[ HTML/CSS ] HTML 레이아웃

1. 레이아웃은 기본적으로 <div> 사용

 

2. 레이아웃 잡을 땐 전체를 포함하는 <div class="container"> 하나 만드는 게 좋음
    요걸 wrapper box라고 부르기도 함

3. width: 100%; 는 "부모 태그 width의 100%" 를 의미

{
	width: 100%;
}

4. 레이아웃 정렬할 때 float 속성 좋음
    float: left; 는 "요소를 붕 띄워서 왼쪽 정렬해주셈"을 의미

    float 속성 쓰면 여러 개의 <div>를 좌우로 정렬할 수 있음

{
	float: left;
}

 

5. float을 이용한 좌우 정렬이 끝나면, 그 다음 요소에서 float 기능을 정지해야 함
    clear: both; 를 사용하면 됨
    앞서 float 적용된 요소들이 공중에 붕 떠있기 때문에 clear 해주어야 함

{
	clear: both;
}

 

6. display: grid를 쓰면 레이아웃 잡기 더 쉬워짐
    fr 단위로 폭지정 가능 - 비율로 레이아웃을 잡음