08.HTML / CSS

이수현·2022년 5월 10일

TIL

목록 보기

8/23

📚HTML/CSS

position 속성 - relative, absolute, fixed

inline, inline-block, block

float / clear

position 속성 - relative, absolute, fixed

position이란?

position 속성이란 문서 상에 요소를 배치하는 방법을 지정하는 속성이다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다

relative & absolute

: relative 방식은 해당 HTML 요소의 기본 위치(해당 요소가 static position 방식일 때 위치-default가 static이다.)를 기준으로 위치를 설정하는 방식이다.

위 화면을 보면 default가 static이므로 빨간 div는 position이 relative지만, 기본 위치에서 left: 20px;가 적용되어 왼쪽에서 떨어진 것을 볼 수 있고, 기본 파란 div는 그렇지 않은 것을 볼 수 있다.

그리고 노란 div는 position이 relative이므로, 상위의 파란 div를 기준으로 left: 20px;가 적용되어, 파란 div의 margin-left: 30px;가 적용돼서 왼쪽에서 50px이 떨어져 있는 것을 확인할 수 있었다.

보라 div는 relative이고, 하위 태그인 주황 div는 absolute이다. 이 경우 absolute는 상위 태그에 relative가 있는지 먼저 찾아보고, 있다면 그 부모 태그의 좌측 상단을 기준으로 위치가 조정된다. 만약에 relative가 없다면 기본 위치가 부모가 돼서 위치가 조정된다.

그렇기 때문에 주황 div는 보라 div 좌측 상단 기준으로 left: 20px;이 적용된다. 반면에, 회색 div는 margin-left: 40px가 적용되어 있지만 relative가 존재하지 않기 때문에 검정 div는 기본 위치를 기준으로 left: 20px;가 적용된다.

fixed

: fixed 방식은 viewport를 기준으로 위치를 설정하는 방식이다. 즉, 웹 페이지가 스크롤 되어도 fixed 요소는 항상 같은 곳에 위치하게 된다.

위 화면을 보면 header 태그의 position을 fixed로 설정하면, 스크롤을 내려도 header가 상단에 고정돼서 움직이는 것을 볼 수 있다.

inline, inline-block, block

우선 display속성은 그 값에 따라서 웹 페이지를 보고있는 사용자에게 특정 요소를 어떻게 보여줄지 결정한다. display속성의 값으로는 가장 기본이 되는inline, inline-block, block이 있다.

inline :

display가 inline으로 설정된 요소는 다른 요소들과 함께 같은 라인(가로)에서 표시된다.

크기를 임의로 지정할 수 없으며, 해당 요소의 content에 의해서 결정된다.

상하 margin 적용이 불가능하지만, 좌우 margib, 상하좌우 padding은 가능하다.

block :

display가 block으로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 부모 요소의 100%를 차지한다.

크기를 임의로 지정할 수 있다.

상하좌우 margin & padding을 가질 수 있다.

inline-block :

기본 특성은 inline이므로 요소가 수평으로 쌓이지만, block 요소처럼 크기를 지정할 수 있다.

상하좌우 margin & padding을 가질 수 있다.

해당 요소의 content 만큼만 영역을 사용한다.

float

float이란?

float 속성은 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치하여 텍스트 및 인라인 요소가 주위를 둘러쌀 수 있도록 한다. 하지만 절대 위치 요소(position-absolute)는 float 속성을 무시한다.

float: none - default값. 요소는 움직이지 않고, 발생한 위치에 바로 표시된다.

float: left - 요소는 컨테이너의 왼쪽에 떠 있는다.

float: right - 요소는 컨테이너의 오른쪽에 떠 있는다.

위 화면을 보면 left일 경우는 왼쪽, right는 오른쪽, none은 기본 위치에 위치한다. 하지만 position속성의 값이 absolute인 경우에는 float의 자연스럽게 흐르도록하는 텍스트 및 인라인 요소가 주위를 둘러쌀 수 있는 특성을 무시한다.

clear

clear란 float의 속성을 해제하는 방법이다.

clear: none - 아무런 해제를 하지 않는다.

clear: left - float: left를 해제한다.

clear: right - float: right를 해제한다.

clear: both - float: 모든 float을 해제한다.

clear 속성을 이용하여 float 특성을 없애보았는데, 절대 위치 요소로 인해 무시된 float 속성은 clear 속성도 적용되지 않았다.