레이아웃 - 1단 레이아웃 ( layout )

* 이 글은 부스트코스 웹 UI제작에 있는 강의 내용을 토대로 정리/분석한 글입니다. 

 

레이아웃

레이아웃은 책이나 신문, 잡지 등의 출판물에서 글이나 그림을 효과적으로 정리하고 배치하는 일을 뜻하는 출판용어
이와같이 웹사이트를 제작할때 메뉴, 컨텐츠, 부가정보 등과 같은 구성요소들을 필요한 곳에 위치하여 사용자가 효과적으로 웹사이트를 이용할 수 있게 배치하는 작업 

종류
1. 1단 레이아웃
    가장 기본이 되는 레이아웃
    헤더/콘텐츠/푸터 영역이 직렬로 연결된 형태를 가지고 있다.
    
2. 다단 레이아웃
3. 고정 레이아웃
4. 그 외 다양한 레이아웃

 

1단 레이아웃 부터 실습해보자 . 

 

html

<div id="wrap">
    <div class="header">헤더</div>
    <div class="contents">콘텐츠</div>
    <div class="footer">푸터</div>
</div>

전체를 감싸는 wrap 와 각 header , content, footer이 들어가는 공간을 만들었다.

 

 

css

#wrap{
    min-width: 800px;
}
.header{
    background-color: red;
    height: 100px;
}
.contents{
    max-width: 1200px;
    margin: 0 auto;
    background-color: blue;
    height: 300px;
}
.footer{
    background-color: green;
    height: 100px;
}

wrap에 min-width 를 주어 800px이하로는 줄어들지 않게 하였으며

contents 에는 max-width를 주어 1200px 이상으로 늘어나지 않게 하였다.

 

 

 

* 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.