[TIL] CSS | 레이아웃의 모든 것 📙
🎲 목표: 사전과제 때 공부했었지만 절반은 까먹었기 때문에...🙃 이번에야말로 레이아웃을 정복해 보자!
▶ 목차
🔎 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
Author And Source
이 문제에 관하여([TIL] CSS | 레이아웃의 모든 것 📙), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dosilv/TIL-CSS-레이아웃의-모든-것저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)