웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다.
display는 layout을 적절하게 조정하는 중요한 속성이라고 볼 수 있다. 모든 요소들은 속성에 의거하여 기본값을 가지고있는데, 기본값은 대부분 block 혹은 inline 요소들로 구성되어있다.
block요소는 block-level요소라고 불리며, line요소는 inline-level이라고 말한다.
<div> div 태그는 block-level의 표준이다. 무조건 한 줄을 점유하고 있기 때문에 block-level은 새로운 줄에서 시작하며, 왼쪽에서 오른쪽으로 최대한 확장된다. <p> <form> <header> <footer> <section>
- width/height 적용불가
- margin/padding-top/bottom 적용불가
- line-height를 원하는대로 사용할 수 없다.
대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.
<span> span태그는 가장 표준의 inline요소이다. span은 문장의 흐름을 방해하지 않으면서 텍스트를 감싸주는 역할을 한다. <a> a태그는 가장 공공연한 inline요소이다.
- width/height 적용불가
- margin/padding-top/bottom 적용불가
- line-height를 원하는대로 사용할 수 없다.
inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다. 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능) inline속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있디.
- width/height 적용 가능
- margin/padding-top/bottom 적용 가능
- line-height 적용 가능
position 속성은 태그를 어떻게 위치시킬지를 정의하며, 5가지의 값을 갖는다.
좌표를 지정을 해주기 위해서는 left, right, top, bottom속성과 함께 사용한다.
*position을 absolute나 fixed로 설정할 때 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다.
relative인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 된다.