레이아웃

display

요소의 rendering box 유형을 결정

display 속성

none : 요소가 렌더링 되지 않음
inline : inline level 요소처럼 렌더링
- height, width는 적용이 되지 않음
- margin, padding, border는 좌/우 값만 영향을 미친다.
- 콘텐츠가 겹칠 수 있기 때문에 상/하는 사용하지 않는다.
- inline 요소 안에 block요소를 사용하면 안된다. display로 변경을 하더라도
block : block level 요소처럼 렌더링
inline-block : inline level 요소처럼 렌더링 되지만 block level의 성질을 가짐
- height나 width 등과 같은 박스모델 속성을 적용할 수 있다.

inline level 요소 사이의 공백과 개행 처리

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

display와 box model의 관계

display | width | height | margin | padding | border :—:|:—:|:—:|:—:|:—:|:—: block | O | O | O | O | O inline | X | X | 좌/우 | 좌/우 | 좌/우 inline-block | O | O | O | O | O

visibility

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

속성값

visible : 화면에 표시 (기본값)
hidden : 화면에 표시되지 않음 (공간은 차지함)
collapse : 셀 간의 경계를 무시하고 숨김(테이블 태그에서만 적용)

display:none 과 차이점

display: none - 요소가 렌더링 되지 않음 (DOM에 존재하지 않음)
visibility: hidden - 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음 (DOM에 존재함)

float

요소를 보통의 흐름에서 벗어나게 함

속성값

none : float 시키지 않음 (기본값)
left : 좌측으로 float시킴
right : 우측으로 float시킴

요소를 보통의 흐름에서 벗어나 띄워지게 함
주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음
대부분 요소의 display 값을 block으로 변경함 (예외 : inline-table, flex 등)

clear

floating 된 요소의 영향에서 벗어나 다음 행으로 이동

속성값

none : 양쪽으로 float 요소를 허용 (기본값)
left : 왼쪽으로 float 요소를 허용하지 않음
right : 오른쪽으로 float 요소를 허용하지 않음
both : 양쪽으로 float 요소를 허용하지 않음

block-level 요소만 적용 가능

position

요소의 위치를 원하는 곳으로 이동 시킬 때 사용

속성값

static : Normal-flow에 따라 배치되며 offset 값이 적용되지 않는다. (기본값)
absolute
- 절대 위치
- 부모 요소의 위치를 기준으로 offset에 따라 배치된다. (부모의 padding영역부터 기준으로 갖는다.)
- 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다.
- 부모의 position 값이 static인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼는다.
- Normal-flow의 흐름에서 벗어난다.
fixed
- 고정 위치
- 뷰포트 상에서 offset에 따라 배치
- 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타남
- 부모 위치에 영향을 받지 않는다.
relative
- 상대 위치
- 자신이 원래 있어야 할 위치를 기준으로 offset에 따라 배치된다.
- Normal-flow 흐름을 따른다.
- 주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다.

offset

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

z-index

박스가 겹치는 순서를 지정

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

dongkwon