CSS Display속성

CSS에는 크게 두 가지 박스 유형이 존재한다 인라인 박스  / 블록 박스

 

외부 디스플레이 타입

Block Box

• 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채운다. 상위 콘테이너에서 사용 가능한 공간을 채운다.
• width, height 속성을 가질 수 있다.
• 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어낸다.

 

 

Inline Box

• 기본적으로 컨텐츠 박스만큼의 크기만 가진다. 자신이 필요한 부분만을 차지
• 새로 줄로 행을 바꾸지 않고 행으로 나열이 된다.
• width, height속성을 사용할 수 없다.
• 패딩과 보더 속성을 사용할 수 있지만 스타일적으로 보이기는 하지만 실제로는 적용되지 않고(다른 요소들을 밀어낼 수 없다.) 마진 속성은 좌우만 조절 할 수 있다.
• inline적인 특성을 가지기 때문에 상/하는 의도한대로 적용되지 않기 때문에 유의

 

Inline-Block Box

• inline 요소와 block레벨 요소를 합친 형태(두개의 특징이 합쳐진 형태)
• inline처럼 한줄에 여러 요소가 존재가능
• block처럼 width,height,margin,padding 등 모든 값을 지정

 

박스의 유형을 결정하는 속성 : display

display속성으로 박스의 유형을 변경할 수 있다.

외부 디스플레이 타입

div{ display:inline }

div{ display:block }

div{ display:inline-block }

 

내부 디스플레이 타입

내부 자식 박스 배치

• flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축 혹은 Y축의 단방향으로 설정하는 속성
• grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축과 Y축을 모두 이용해 배치하는 속성