CSS 레이아웃 정리

Flex·2022년 2월 19일

HTML/CSS/JS

CSS 모음

목록 보기

6/14

CSS 레이아웃에 관해 정리해보았다.

📐 기본사항

display 속성에는 inline, block, inline-block 값이 있다.

요소별로 display 속성값을 설정하여 강제로 지정 또한 가능하다.

inline

영역의 크기가 내부 콘텐츠 크기로 정해진다.
width 와 height 를 가지고 크기 조절이 불가능하다.
내부 콘텐츠 크기에 딱 맞게 설정된다.
margin, padding 의 top/bottom 은 추가할 수 없다.
--> left/right 만 가능하다.
여러 inline 요소를 가로로 배치할 수 있다.

block

영역의 크기를 width 와 height 로 조절할 수 있다.
width 를 지정하지 않으면 가로 전체를 차지한다.
--> 따라서 여러 block 요소들은 세로배치가 된다.

inline-block

"inline 요소의 특징 + block 요소의 특징"이다.
요소들이
1. 가로배치 가능함과 동시에
2. width 와 height 로 크기 조절이 가능하다.

📐 요소를 없애는 방법

display: none 혹은 visibility: hidden 키워드를 사용해 요소를 없앨 수 있다.
중요한 차이점은 아래에서 살펴보자.

display: none

레이아웃에서 요소 자체를 사라지게 만든다.

요소를 작성하지 않은 것과 같은 효과를 낸다.

visibility: hidden

문서의 레이아웃을 변경하지 않고 단순히 보이지만 않게 만든다.

단순히 보이지만 않을 뿐, 자리는 차지하는 것임을 정확히 알고 가자!
추후 JavaScript 로 동작을 제어할 때
1) 요소를 완전히 삭제할 것인지,
2) 눈에만 보이지 않게 할것인지 정할 때 중요하게 생각될 것이다.

📐 float

float : 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는
자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다.

normal flow 를 따르지 않고 임의로 지정하는 속성이다.
디폴트값은 none 이다.
left, right 값을 지정할 수 있다.
부모 영역 내에서 갈 수 있는 한 좌우측 끝으로 붙는다.
신문, 뉴스, 기사 등의 배치에서 많이 볼 수 있다.
요소를 둥둥 떠있게 만드는 속성이라고 이해하면 쉽다.

Example

.image {
  float: left;
}

🦊 MDN Link - float

📐 position - 중요!⭐️

position : 문서 상에 요소를 배치하는 방법을 지정한다.

요소가 원하는 위치에 갈 수 있도록 변경할 수 있다.

top, right, bottom, left 오프셋 속성이 요소를 배치할 최종 위치를 결정한다.
normal flow : CSS에서 사용하는 실제 용어로써, 먼저 이해하도록 하자.
--> 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명한다.
요소들의 기본 흐름 상태를 이해한 후에야 position 을 정확히 이해할 수 있다.
static, relative, absolute, fixed, sticky 중에서
하나의 키워드 값을 선택해 지정할 수 있다.
디폴트 값은 static 이고, 오프셋 속성이 반영되지 않는다.

1. relative

relative : 우선 normal flow 에 따라 배치하고,
자기 자신을 기준으로 top, right, bottom, left 오프셋을 적용한다.

페이지 레이아웃에서 요소가 차지하는 공간은 static 일 때와 같다.
오프셋 지정값은 음수도 가능하다.
top 과 bottom 을 동시에 지정할 경우 top 만 반영된다.
left 와 right 를 동시에 지정할 경우 left 만 반영된다.

Example

div {
  position: relative;
  top: 50px;
  left: 50px;
}

2. absolute

absolute : 요소를 normal flow 에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.

가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다.
공간이 배정되지 않기 때문에 한겹 떠있다고 생각할 수 있다.
조상 중 position: static 이 아닌 요소를 찾아 기준점을 삼는다.
--> 없을 때는 <body> 를 기준으로 오프셋이 적용된다.

3. fixed

fixed : 요소를 normal flow 에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.

뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.
특정 요소 내에 붙지 않고 뷰포트에 붙어있는다.
--> 스크롤을 해도 해당 오프셋 자리에 그대로 있다.
항상 보이는 menu bar, 하단 고정 버튼(top 버튼 등) 을 만들 때 많이 사용된다.

Q) relative, absolute, fixed 기준점의 차이가 뭐에요? 🤔

A) 오프셋이 적용되는 각각의 기준점은 아래와 같습니다.

relative = 자기 자신

absolute = position: static 이 아닌 부모(조상)
ㄴ ❗️ 사용시 부모를 relative로 설정하는것이 일반적임을 알아둡시다!

fixed = viewport (뷰포트)