TIL # 5 (레이아웃의 모든 것)

🚀 [Check Point] 18-3. 레이아웃의 모든 것

👉 1. position 속성 - relative, absolute, fixed

✔️relative:
기본 위치인 static 상태를 기준으로 top, bottom, left, right 프로퍼티를 사용하여 위치를 이동시킬 수 있다.

.relative1 {
	position: relative;
    }
.relative2 {
	position: relative;
    top: -20px;
    left: 20px;
    background-color: white;
    width: 500px;
    }

✔️absolute:
postion 프로퍼티의 값이 가까운 부모 요소를 기준으로 top, bottom, left, right 프로퍼티의 값만큼 위치를 이동시킵니다.

.relative {
	position: relative;
    width: 600px;
    height: 400px;
    }
    
.absolute {
	position: absolute;
    top: 120px;
    right: 0;
    width: 300px;
    height: 200px;

.fixed {
	position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    background-color: white;

👉 2. inline, inline-block, block 에 대해서

✔️inline
전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됨. 줄바꿈 없이 순서대로 한 줄에 보이게 됨. width, height 속성 지정 X. margin, padding 좌우 간격만 반영, 상하 간격 반영 X

ex) span, a, em

✔️block
전후 줄바꿈이 들어가 혼자 한 줄을 차지. block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됨

ex) div, p, h1

✔️inline-block
inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됨. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해짐. display: inline-block로 지정해줘야 함. 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있음.

ex) button, select

👉 3. float에 대해서

✔️float
layout 테크닉. 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성. float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법. 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것.

• none
• left
• right

플로팅된 요소는 그 요소의 종류에 상관없이 블럭 박스가 된다. 대신 자신의 영역만을 가지고 있는 인라인 블럭 박스처럼 렌더링되는 것이 특이한 점이다.

✔️clear - 플로팅 해제 기법
clear 속성을 적용해 float 의 영향을 받지 않도록 한다는 의미. float 을 사용해 레이아웃을 잡다보면 clear 가 필요해지기 때문에 가급적 플롯된 요소의 부모 요소에 clearfix 방법을 적용하는 것을 권장

left : 왼쪽에 floating 된 요소를 지정 해제
right : 오른쪽에 floating 된 요소를 지정 해제
both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
none : 기본값(default), floating 을 해제하지 않음