CSS - 레이아웃의 모든 것

1. position 속성 - relative, absolute, fixed
2. inline, inline-block, block 에 대해서
3. float에 대해서


► Position

html과 상관없이 css의 position 을 통해 위치를 줄 수 있음 / 레이아웃 배치 / 객체를 위치할 때 쓰임

▸ position : static

기본적으로 적용되는 값 / 위치를 지정하지 않을 때 사용
(static은 top, right, bottom, left 속성값을 무시함)

▸ position : relative

원래 위치에서 상대적인 위치 지정
(*원래 위치 = 기본적으로 적용되는 static 위치)

▸ position : absolute

가장 가까운 상위 엘리먼트에서 상대적인 위치 지정

▸ position : fixed

그 자리에 고정 / 절대적 위치

1.png


► inline / inline-block / block

▸ display : inline

자기 자신만의 영역을 채우는 특징
다른 요소들과 함께 같은 라인에 배치 / 줄바꿈 X
가로, 세로 크기 지정 불가능
ex) span

▸ display : inline-block

inline + block 속성을 섞은 것
가로, 세로 크기 지정 가능
새로운 줄에서 시작 X
inline 요소처럼 같은 라인에 배치

▸ display : block

부모를 꽉 채우는 특징 / 특정 구역을 차지
다른 요소들이 배치된 페이지에서 새로운 줄(행)에 위치
가로, 세로 크기 지정 가능
ex) div, p

2.png

3.png


► Float

해당 요소를 어찌 정렬할지 정의하는 속성
묶음 태그 (block element) 만 적용 가능!
ex) div, p, ul, ol, table, img 등

▸ float : none

기본값 / 정렬 X

▸ float : left

왼쪽 정렬

▸ float : right

오른쪽 정렬

*사진에 float 속성을 적용하면 이후에 오는 글자나 다른 요소들은
그 주위로 둘러싼 형태가 됨

4.png


► Clear

사진 주위로 글자가 따라붙지 않게 함
float 주변으로 흐르듯 배치된 컨텐츠를 해제 / float 속성을 취소함

▸ clear : none

기본값 / clear 를 설정하지 않은 것과 같음

▸ clear : left

float 정렬 왼쪽을 취소

▸ clear : right

float 정렬 오른쪽을 취소

▸ clear : both

float 정렬 왼,오 양쪽을 취소