1단 레이아웃 제작 방법

https://www.boostcourse.org

다 함께 배우고 성장하는 부스트코스

출처입니다.

 

<!-- 1단 레이아웃 -->
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>

<!-- html5의 태그를 이용한 1단 레이아웃 -->
<header>header</header>
<section>content</section>
<footer>footer</footer>

위와 같이 두 가지 방식의 구성이 있다. 이는 html5 시멘틱 태그가 생기면서 더 의미 있는 태그를 만들 수 있게 되었다.

 

---

<min-width / max-witdh> 

    max-width: 1200px; /* 최대 가로길이 1200px */
    min-width: 800px; /* 최소 가로길이 800px */

이처럼 최소길이 최대길이를 지정할 수 있는데 만약 늘리거나 줄일 때 저 조건이 되면 더 이상 늘어나거나 줄어들지 않는다

최소 길이보다 더 줄어들면 가로 스크롤이 생성된다.