[TIL] CSS | 레이아웃의 모든 것 📙

dosilv·2021년 4월 13일

CSS TIL

🎲 목표: 사전과제 때 공부했었지만 절반은 까먹었기 때문에...🙃 이번에야말로 레이아웃을 정복해 보자!

▶ 목차

🔎 inline / block / inline-block
🔎 Position
🔎 Float
🔎 box-sizing: border box

🔎 inline / block / inline-block

📌 block element

기본값이 display: block으로서 혼자서 한 줄을 차지하는 요소
기본적으로 width: 100%의 속성을 지니고 있으며, width를 수정하더라도 빈 공간은 남겨놓고 다음 줄로 넘어감!
<header>, <footer>, <p>, <div>, <ul>, <ol>, <li> 등

📌 inline element

기본값이 display: inline으로서 줄 안에
width, height 속성이 적용되지 ❌
margin-top, margin-bottom이 적용되지 ❌ (left, right는 가능)
👉 line-height으로 어느정도 대체 가능!
<span>, <a>, <img>, <input>, <button>, <textarea> 등

📌 display: inline-block

display값을 inline-block으로 설정하면 block 요소처럼 width와 height를 지정할 수 있는 동시에, 여백이 있을 경우 inline 요소처럼 다른 요소와 한 줄에 배치된다!
float: left 대신 사용할 수 있음
vertical-align을 통해 상하 배치도 조절 가능함

🧐 margin: auto

margin: auto로 센터 배치가 되는 경우가 있고 안 되는 경우가 있었는데, inline 요소는 안 됨. 그리고 width가 지정되지 않은 block 요소도 안 됨! (애초에 좌우 margin이 0이기 때문)
👉 display: block이고 width가 지정되어 있을 때 가능!

🔎 Position

📌 static

일반적 문서 흐름에 따라(html 순서대로) 배치되며, top/bottom/left/right 속성이 아무런 효력을 갖지 않음

📌 relative

자신의 static 위치에서 top/bottom/left/right 속성에 따라 배치됨

📌 absolute

position이 relative, fixed, 혹은 absolute인 가장 가까운 부모 요소를 기준으로 top/bottom/left/right 속성에 따라 배치됨
(보통 기준점으로 잡을 부모요소를 position: relative로 설정함)

🧐 relative VS. absolute

저번에 정리한 이후에도 relative와 absolute가 유독 헷갈렸는데, absolute는 부모요소가 중요하고(형제요소는 무시) relative는 형제요소의 영향을 받는다(부모요소는 없어도 됨)고 생각하니까 좀 이해가 됨!

예를 들어
<div class="parents">
  <div id="element1"></div>
  <div id="element2"></div>
  <div id="element3"></div>
</div>
위와 같은 코드에서 #element3에 position: relative를 줄 경우 element3은 element2 다음 자리(원래 자신의 자리)에서 top/bottom/left/right에 따라 결정된다.
반면 #element3에 position: absolute를 줄 경우 (.parent가 position: relative라는 가정 하에) element1, element2의 존재와 관계없이 parents가 시작되는 자리에서 top/bottom/left/right에 따라 결정된다!

📌 fixed

스크린을 기준으로 top/bottom/left/right 값에 따라 고정된 위치에 배치되어 스크롤해도 움직이지 않음

🧐 position: fixed일 때 가운데 정렬하는 방법

left: 50%로 시작 위치를 정중앙으로 잡은 뒤, transform: translateX(-50%)를 추가하여 요소 width의 50%만큼 왼쪽으로 이동시킴!
같은 원리로 top: 50%, transform: translateY(-50%)로 세로 중앙 정렬도 가능

📌 sticky

static처럼 문서의 흐름에 따라 배치되어 있다가, 스크롤에 의해 top/bottom/left/right 값의 임계점에 도달하면 fixed처럼 화면에 고정됨
조상요소의 overflow 값이 hidden, scroll, auto 중 하나면 작동하지 않으니 주의!

🔎 Float

float은 블록요소를 인라인요소처럼 주변 컨텐츠와 함께 배치할 수 있도록 만들어 주는 속성이다. 앞서 언급한 display: inline-block과 비슷! (inline-block이 더 뒤에 나온 개념인 듯)
float: left를 하면 해당요소는 왼쪽에 정렬되고 남는 공간에 다른 inline 또는 float 속성을 지닌 요소들이 배치되며, float: right의 경우에는 그 반대이다.

📌 float 사용시 주의할 점

부모 요소가 있고, 그 안의 자식 요소에 float 속성을 줄 경우 부모 요소 height에는 해당 자식 요소의 height이 반영되지 않는다. 따라서 부모 요소 바깥으로 자식 요소가 튀어나가는 상황이 발생한다.

<해결방법>
1. 부모요소에도 float 속성을 부여하기
👉 이 경우 부모요소는 자식요소를 담을 크기 만큼만 height를 가진다
2. 부모요소에 overflow:auto 또는 hidden 속성 부여하기
👉 이 경우는 부모요소보다 자식요소의 width가 클 경우 스크롤바가 생기거나 잘릴 수 있음
3. 자식요소 아래에 빈 요소를 추가하고, clear:both 속성 주기
👉 의미없는 빈 요소를 생성해야 한다는 단점...
4. 가상선택자 :after 이용하기 (best!)
👉 css에서자식요소:after로 가상 엘리먼트를 선택하고, clear:both 속성을 준다 (아래 코드 참조)
자식요소:after {
  content: "";
  display: block;
  clear: both;
  }

🔎 box-sizing: border box

박스모델에서 width를 500px로 지정하고, padding을 20px, border를 10px로 지정할 경우 해당 요소가 총 너비는 500 + 20*2 + 10*2 = 560px이 된다. 박스 사이즈는 500px로 고정한 채로 그 안에서 padding과 border을 주고 싶을 경우, box-sizing: border box를 넣어 주면 됨!

🙇‍♀️참고한 자료
CSS / position의 값이 fixed일 때 가운데 정렬하는 방법
float을 clear하는 방법. | naradesign.github.io