CSS - 4. 레이아웃

 

1. 속성 - display

요소의 렌더링 박스 유형을 결정하는 속성이다. 

inline 요소의 경우 공백과 개행에 대해 하나의 여백으로 받아들인다. 따라서 inline과 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 된다.

display: value;

diplay: none;
diplay: inline;
diplay: block;
diplay: inline-block;
diplay: list-item;
diplay: flex;
diplay: inline-flex;
diplay: table;
diplay: table-cell;
...

 

• Display 와 Box Model 의 관계

display	width	height	margin	padding	border
block	O	O	O	O	O
inline	X	X	좌/우	O(설명)	O(설명)
inline-block	O	O	O	O	O

 

 

2. 속성 - visibility

요소를 어떻게 숨길 것인지 결정한다.

visibility: visible | hidden | collapse | initial | inherit;

visibility: visible; /* 보임 기본값 */
visibility: hidden; /* 숨김. 자신의 박스 영역은 유지(margin까지 모두 포함) */
visibility: collapse; /* 셀간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능) */

• display:none과 hidden의 차이점: display:none은 요소가 렌더링 되지 않으나 hidden은 보이지 않지만 렌더링 되어 화면에 공간을 갖고 있다.

 

 

3. 속성 - float

요소를 보통의 흐름에서 벗어나게 한다. 주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있다. 대부분 요소의 display값을 block으로 변경한다.

float: none | left | right | initial | inherit;

float: none; /* 기본값 */
float: left;
float: right;

요소를 공중으로 띄워 그림자부분(요소 아래부분)을 피해 주변 텍스트나 인라인요소가 자리잡게 된다.

 

 

4. 속성 -clear

요소를 floating 된 요소의 영향에서 벗어나게 하는 속성. * block-level 요소만 적용 가능하다.

clear: none | left | right | both | initial | inherit;

clear: none; /* 기본값 */
clear: left; /* 왼쪽 요소 float의 영향에서 벗어남 */
clear: right; /* 오른쪽 요소 float의 영향에서 벗어남 */
clear: both; /* 양쪽 다 벗어남 */

 

 

5. 속성 - positioin

요소의 위치를 정하는 방법을 지정하는 속성.

position: static | relative | absolute | fixed | sticky | initial | inherit;

position: static; /* 기본값, 정상흐름 대로 배열, 좌표설정 안됨 */
position: relative; /* 상대위치, 정상흐름 대로 배열, 주변요소들에 영향을 주지 않으면서 offset 값으로 이동 */
position: absolute; /* 절대위치, 정상흐름에서 벗어나 offset 이동, 부모가 상대 절대위치를 가지면 offset 값의 시작점이 됨 */
position: fixed; /* 고정위치, 뷰포트 상에서 offset 이동, 부모위치에 영향 안받음 */

top/bottom/left/right:auto |length|initail|inherit;

top: 50%;
left: 10px;
bottom: -10px;
right: auto;

• absolute: 부모 요소의 위치를 기준으로 offset에 따라 배치. 부모가 position 값을 가지면 offset 값의 시작점이 된다. * 부모의 position 값이 static인 경우엔 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼는다
• fixed: 뷰포트를 기준으로 offset에 따라 배치된다. 부모의 위치에 영향을 받지 않는다.
• relative: 자신이 원래 있어야 할 위치를 기준으로 offset에 따라 배치된다. 부모의 position 속성에 영향을 받지 않는다.

 

 

6. 속성 - z-index

박스가 겹치는 순서를 지정

z-index: auto | number | initial | inherit

z-index: 1;

• position 값이 static이 아닌 경우 지정가능
• 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
• 부모가 z-index 값이 있을 경우 부모 안에서만 의미 있음
• 큰 값이 가장 위쪽. 음수 사용