CSS | 6. 레이아웃

 

 

렌더링 박스 유형

 

display

 

none : 요소가 렌더링 되지 않음
inline : inline level 요소처럼 렌더링. 같은 라인안에 표시
block : block level 요소처럼 렌더링. 특정 구역을 차지
inline-block : inline level 요소처럼 렌더링되지만 block level의 성질을 갖습니다.

flex : inline-block과 동일한 효과를 가지며 flex-direction을 이용해 정렬

-webkit-box : 크롬, 사파리

• -webkit-line-clamp : 블록 컨테이너의 컨텐츠를 지정한 줄 수만큼 제한
• -webkit-box-orient : 

 

 

 

visibility

 

요소의 화면 표시 여부를 지정

visible : 화면에 표시
hidden : 화면에 표시되지 않지만 공간은 차지. display:none은 아예 렌더링 하지 않습니다.
collapse : 셀 간의 경계를 무시하고 숨깁니다. 

 

float

 

요소를 독자적인 공간 위에 배치. 주변 텍스트나 인라인 요소가 주위를 감싸게 됩니다.

 

clear

 

floating 된 요소의 영향에서 벗어남

 

 

 

 

 

 

position

 

요소의 위치를 정함

static : normal flow에 따라 배치
absolute : 부모 요소의 위치를 기준으로 offset에 따라 배치
fixed : 뷰포트(브라우저)를 기준으로 offset에 따라 배치
relative : 자신이 있어야 할 위치에 부모 position에 영향 받지 않고 offset에 따라 배치

offset : top | left | bottom | right

z-index

 

요소가 겹치는 순서를 지정

auto : 기본값
number : 해당 수치로 쌓이는 순서를 설정합니다.

 

 

 

 

 

 

관련포스트

• CSS | 개념
• CSS | 구문과 적용 방법
• CSS | 폰트 텍스트 관련
• CSS | 선택자
• CSS | 조합자와 가상선택자
• CSS | 구체성과 상속
• CSS | 박스모델