들어가기 전에
1단 레이아웃은 레이아웃의 종류 중에 가장 기본이 되는 레이아웃입니다. 때문에 레이아웃 제작과정중에 가장 단순하고 쉽습니다.
2) 1단 레이아웃 제작-2
1단 레이아웃은 위의 이미지와 같이 하나의 행(column)으로 이루어진 레이아웃의 형태를 일컫습니다.
이런 형태의 레이아웃은 웹에서 가장 기본이 되는 레이아웃이며 위의 이미지처럼 상단(header), 중단(contents), 하단(footer)의 구성으로 이루어져있는 것이 가장 일반적입니다.
1단 레이아웃 형태를 가진 사이트들
- (네이버 쇼핑) shopping.naver.com/home/p/index.nhn
- (네이버 사전) dict.naver.com
- (네이버 포스트) post.naver.com/navigator.nhn
제작하기
- 1단 레이아웃 실습
HTML 실습
<!-- 1단 레이아웃 -->
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>레이아웃을 제작하기 위해서 각 div의 class나 id에 해당영역에 대한 이름을 부여합니다. 이것은 html5가 나오기 전까지 div를 이용하여 레이아웃을 제작하는 가장 일반적인 방법입니다.
<!-- html5의 태그를 이용한 1단 레이아웃 -->
<header>header</header>
<section>content</section>
<footer>footer</footer>하지만 html5의 발표로 레이아웃 각 요소의 의미를 태그명 자체에 내포하고 있는 새로운 태그가 등장했고 이 새로운 태그들을 이용한다면 위의 소스처럼 제작할 수 있습니다. 이 html5의 새로운 태그들은 각 요소의 명칭을 class나 id에 부여한 div와 동일한 의미를 갖습니다.
마지막으로 이렇게 레이아웃에 필요한 요소들(header, section, footer 등)을 <body>태그 안에 바로 작성하는 것 보다는 레이아웃과 관련된 아이템들을 감쌀 수 있는 wrap(또는 wrapper) 클래스를 가진 div를 만들어 레이아웃 컨테이너의 역할을 할 수 있도록 합니다.
그리하여 최종적으로 우리가 제작할 수 있는 레이아웃은 아래와 같은 형태입니다.
<!-- div를 이용한 1단 레이아웃 -->
<div class="wrap">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
<!-- html5를 이용한 1단 레이아웃 -->
<div class="wrap">
<header>header</header>
<section>content</section>
<footer>footer</footer>
</div>
CSS 실습
이제 완성된 html을 이용하여 최종적으로 css를 이용해 가로 길이가 800px~1200px 로 유동적인 사이트 구성을 만들어 보겠습니다.
1. 기본 태그에 스타일 부여
.header{
height: 100px;
background-color: lightgreen;
}
.content{
height: 300px;
background-color: lightsalmon;
}
.footer{
height:100px;
background-color: lightblue;
}2. 콘텐츠 영역 최대값 및 가운데 정렬
.header{
height: 100px;
background-color: lightgreen;
}
.content{
max-width: 1200px; /* 최대 가로길이 1200px */
height: 300px;
margin: 0 auto; /* 블럭요소 가운데 정렬 */
background-color: lightsalmon;
}
.footer{
height:100px;
background-color: lightblue;
}3. 전체 영역 최소값(800px)
.wrap {
min-width: 800px; /* 최소 가로길이 800px */
}
.header{
height: 100px;
background-color: lightgreen;
}
.content{
max-width: 1200px;
height: 300px;
margin: 0 auto;
background-color: lightsalmon;
}
.footer{
height:100px;
background-color: lightblue;
}
위의 순서대로 따라 했다면 브라우저에서 확인했을 때 아래와 같은 스타일 변화를 볼 수 있습니다.
요약정리
margin을 이용한 블럭요소 좌우 가운데 정렬
<div>
<p></p>
</div>위와 같은 html 구조는 <p> 태그가 블럭요소이기 때문에 text-align으로는 <p>태그 자체를 가운데 정렬할 수는 없습니다. 임의의 블럭요소<div> 안의 블럭요소<p>의 가운데 정렬을 가장 쉽게 하는 방법중에 하나가 margin을 이용한 방법입니다.
div {
width: 300px;
height: 300px;
}
p {
width: 100px;
height: 100px;
margin: 0 auto;
}부모 요소인 <div>가 임의의 사이즈를 갖고 있고 자식 요소인 <p>태그는 그 보다 작은 사이즈를 갖고 있다고 가정하겠습니다.위의 조건을 만족할 때 그 자식 블럭요소의 margin을 좌, 우로 auto값을 부여한다면 margin은 좌, 우 수치를 균등하게 나눠가지게 됩니다. 그렇게 해서 이번 실습에서 최대 가로길이(1200px)를 넘어서는 레이아웃일 때 content를 가운데 정렬할 수 있었습니다.
하지만 <p> 태그의 margin 값을 상, 하에 넣었을 때는 위, 아래의 가운데를 찾지는 못합니다. 그 이유는 블럭요소는 기본적으로 좌우가 꽉차면서 부모의 좌측 끝과 우측 끝의 사이즈를 인식할 수 있지만, 무조건 위에서 아래로 쌓이는 블럭요소의 특성상 부모의 위쪽 끝과 아래 끝의 사이즈를 인식할 수는 없기 때문입니다.
참고 링크
- [LECTURE] 8) 속성-margin : edwith
https://www.edwith.org
- 들어가기 전에 박스모델 강의에서 margin은 border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역이라고 배웠습니다. 즉, 이 말은 다른 요소와의 간격을 만들 수 있다는 ... - 남동샹
- [LECTURE] 12) 속성-boxmodel정리 : edwith
https://www.edwith.org
- 학습하기 지금까지 < 단위, 배경, 박스모델 > 챕터를 통해서 박스 모델은 content, padding, border, margin의 총 4가지 영역으로 나누어진다는 걸 배웠... - 부스트코스
comment
강의에서 wrapper 를 만들어주는 상황인경우가 있고 아닌경우가 있다고 하셨는데요. 주로 반응형 웹페이지의 경우에 전체를 감싸는 부모요소가 필요한것인지요? 자주 사용되는 예시가 있었으면 좋겠습니다..
에릭 마이어의 reset.css는 어디서 받을수 있을까요?