[CSS] Layout, position

CSS Layout (display / float / clear)

 

display 속성

: 배치 방법 결정 (블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능)

종류	설명
block	인라인 레벨 요소를 블록 레벨 요소로 전환
inline	블록 레벨 요소를 인라인 레벨 요소로 전환
inline-block	인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지는 속성 - 인라인 레벨 요소인데 마진과 패딩 지정가능
none	해당 요소를 화면에 표시하지 않는 속성

 

float 속성

: 왼쪽 또는 오른쪽으로 배치

• <p> 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우

종류	설명
left	해당 요소를 문서의 왼쪽에 배치
right	해당 요소를 문서의 오른쪽에 배치
none	좌우 어느쪽에도 배치하지 않는 속성 : 기본값

 

clear 속성

: float 속성을 해제

종류	설명
left	float: left 해제
right	float: right 해제
both	float: left와 float: right 해제

 

CSS position

position 속성 : 웹 문서에서 요소의 위치 지정

종류	설명
left	기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정
right	기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정
top	기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정
bottom	기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지

 

배치 방법 지정

: 웹 문서 안의 요소를 배치 -> 텍스트나 이미지를 나란히 배치 OR 원하는 위치 선택 가능

종류	설명
static	문서의 흐름에 맞춰 배치 : 기본값
relative	static + 위칫값 지정
absolute	relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
fixed	브라우저 창을 기준으로 위치를 지정해 배치