CSS에서 레이아웃을 제어하는 Display의 속성값이다.
대부분의 요소들은 기본값으로 inline또는 block을 갖고있다.
대표 예로 span
a
이 있다.
inline 타입은 단락에서 흐름을 깨지않고 정보를 구성할 수 있다.
글이라면 한 문장내에 연속적으로 나타낼 수 있는 형태이다.
margin과 padding은 좌우만 반영. 상하는 무시된다.
대표 예로 div
p
이 있다.
block 타입은 새줄로 시작하며 페이지의 좌우를 꽉 채워쓰는 형태이다.
한 줄내에는 해당 태그를 적용한 요소만이 나타나게 된다.
기본적으로 width:100%;
를 갖고있다.
width, height, margin, padding 모두 반영된다.
요소의 배치를 inline과 유사하게 할 수 있지만, 너비나 높이를 지정할 수 있다.
(block처럼 width, height, margin, padding 등이 적용됨.)
요소들을 자연스러운 간격으로 연속적으로 배치시킬 수 있는 타입이다.
화면에 나타나지 않게 함. 요소가 차지한 영역까지 없앤다. 이와는 달리 visibility:hidden
속성은 영역을 남긴다.
기껏 만든 것을 없엘필요가 있나 싶지만, 유저의 움직임에 반응하여 없었던 것이 나타나는 것과 같은 요소를 만들기 위해서 들어가는 타입이다.
별도의 속성 없이는 기본값인 static
과 동일하다.
(top, right, bottom, left)속성을 사용함으로써 원하는 거리만큼을 기존위치에서 이동 조정한다.
위치를 잡을 때 잡아 주는 기준이 되는 역할.
- 적용된 요소는 레이아웃의 변동이 없다(그자리임)
- 적용된 요소의 크기는 내용의 크기만큼 자동으로 인지되지 않는다.
- 자기자신(원래 있던자리)이 기준.
(원래 있던 자리에서 상대위치(left, right, top, bottom)를 정한다.
(left, right, top, bottom으로 위치를 잡으면 실체가 움직이는 것이 아니다.)
실체가 움직이려면 margin을 이용해야 한다.
z-index
태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성. 기본값은 0이다.
static
이 아닌 조상을 기준으로(혹은 없다면 문서 본문) 위치를 이동시킨다.
즉, 원래 위치와 상관없이 위치를 지정할 수 있다.
relative와 동일하게 (left, right, top, bottom)로 위치를 지정한다.
페이지가 스크롤되거나 움직여도 화면상에서 같은 위치에 위치한다.
화면을 기준으로 위치를 잡기 때문에 다른 요소들의 이동과 상관없이 고정된다.