7. 레이아웃
속성 - display
dusplay 속성
요소의 렌더링 박스 유형을 결정하는 속성입니다.
- 기본 값 : - (요소마다 다름)
display: value;
- 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재
- inline level 요소 사이의 공백과 개행 처리 inline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들입니다. 따라서 inline와 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 됩니다.
속성 - visibility
visibility 속성
요소의 화면 표시 여부를 지정하는 속성입니다.
- 기본 값 : visible
visibility: visible | hidden | collapse | initial | inherit;
visibility: visible; /* 보임 기본값 */
visibility: hidden; /* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */
visibility: collapse; /* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지정은 hidden과 같음) */display: none과 차이점
- display: none: 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
- visibility: hidden: 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)
속성 - float
모든 요소는 기본적으로 보통의 흐름에 따라 위에서 아래로, 그리고 좌측에서 우측으로 배치됩니다.
요소 박스의 경계대로 차례대로 배치되며 float 속성은 요소를 보통의 흐름에서 벗어나 독자적인 공간 위에 배치되게 됩니다.
float 속성
요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성입니다.
- 기본 값 : none
float: none | left | right | initial | inherit;
- 요소를 보통의 흐름에서 벗어나 띄어지게 함 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음
대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외: inline-table, flex 등)
속성 - clear
clear 속성
요소를 floating 된 요소의 영향에서 벗어나게 하는 속성입니다.
- 기본 값 : none
clear: none | left | right | both | initial | inherit;
- block-level 요소만 적용 가능
속성 - position
요소의 레이아웃을 설정하는 대표적인 속성은 position 속성입니다.
position은 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다.
position을 사용하기 위해서는 요소를 이동시키기 위한 좌표 속성인 offset에 대해서도 알아야 합니다.
position 속성
요소의 위치를 정하는 방법을 지정하는 속성입니다.
- 기본 값 : static
position: static | absolute | fixed | relative | sticky | initial | inherit;
- Normal-flow 란? 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻합니다. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말합니다.
offset(top/left/bottom/right)
top|bottom|left|right: auto|length|initial|inherit;top: 50%;
left: 10px;
bottom: -10px;
right: auto;- offset의 %단위 사용 이전에 padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이 가로 사이즈를 기준으로 %값을 계산된다고 배웠습니다. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산되어집니다.
속성 - z-index
요소의 위치를 지정하다 보면 부득이하게 두 요소가 겹쳐지게 되는 경우가 있습니다. 결국, 둘 중 하나는 다른 요소로 인해 덮어쓰게 됩니다.
이때 어느 요소가 더 위로 올라와야 하는지는 요소들의 쌓임 순서의 규칙에 따라 위치하게 됩니다.
이것을 정하는 것이 바로 z-index의 역할입니다.
z-index 속성
- 기본 값 : auto
요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다.
z-index: auto | number | initial | inherit;
z-index: 1;- position 값이 static이 아닌 경우 지정가능
- 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
- 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
- 큰 값이 가장 위쪽(음수 사용 가능)
