들어가기 전에
다단 레이아웃은 1단 레이아웃과 함께 매우 대표적인 레이아웃 형태중에 하나입니다.
3) 다단 레이아웃 제작-1
위의 예시 이미지와 같이 콘텐츠의 영역이 2개 또는 그 이상의 행(column)으로 나눠진 레이아웃을 행의 갯수의 따라 2단 레이아웃, 3단 레이아웃으로 부르고 있으며 이런 행의 갯수에 따른 레이아웃들을 통틀어서 다단 레이아웃이라고 부르고 있습니다.
과거에는 다단 레이아웃의 짜임새가 테이블과 비슷하고 PC에서만 고정적인 사이즈로 표현을 했기 때문에 <table>태그를 이용하여 레이아웃을 만드는 방법이 유행을 했습니다. 하지만 웹표준이 발표되면서 현재는 <table> 태그로 레이아웃을 제작하는 사이트는 찾아보기 힘듭니다.
다단 레이아웃 형태를 가진 사이트들
- (네이버 뮤직 : 2단) https://music.naver.com/home/index.nhn
- (네이버 지식인 : 2단) https://kin.naver.com/index.nhn
- (네이버 날씨 : 3단) https://weather.naver.com/
제작가이드
- 2단 레이아웃 가이드
주요 기능
- 콘텐츠의 행(column)이 두개를 갖는다.
- 콘텐츠와 사이드영역의 구분선을 갖는다.
- 구분선은 헤더와 푸터에 항상 맞닿는다.
스타일 정보
- 콘텐츠 영역 가로길이: 500px
- 사이드 영역 가로길이: 300px
주요 태그 및 속성
- HTML
- div
- CSS
- float
- clear
- display: table
- display: table-cell
참고 링크
- [LECTURE] 3) 속성-float : edwith
https://www.edwith.org
- 들어가기 전에 모든 요소는 기본적으로 보통의 흐름에 따라 위에서 아래로, 그리고 좌측에서 우측으로 배치됩니다. 요소 박스의 경계대로 차례대로 배치되며 float 속성은 요소를 보통... - 남동샹
- [LECTURE] 4) 속성-clear : edwith
https://www.edwith.org
- 들어가기 전에 이전 수업에서 배웠듯이 floating 요소는 주변 요소들의 배치에도 영향을 줍니다. 그러므로 가끔 주변 요소들이 의도하지 않은 대로 나타날 수 있는데, clear ... - 남동샹
- [LECTURE] 5) 속성-position : edwith
https://www.edwith.org
- 들어가기 전에 요소의 레이아웃을 설정하는 대표적인 속성은 position 속성입니다. position은 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다. position을 사용... - 남동샹
- box-sizing
https://developer.mozilla.org
- box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 데에 사용되는 기본적인 CSS box model 대체하기 위해 사용된다.
comment
여러 개의 '열'(column)로 이뤄진 레이아웃이 정확한 표현 같습니다 :)
헤더가 적용 되지 않는데 뭐가 문제 일까요...?
HTML
<!DOCTYPE html>
<html lang="ko ">
<head>
<meta charset="UTF-8">
<title>layout_2</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<div class="header">header</div>
<div class="container">
<div class="content">content</div>
<div class="aside">aside</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
CSS
@charset "UTF_8;
/* style.css */
.header { /* 왜 적용이 안되는지 확인 */
height: 100px;
background-color: lightgreen;
}
.container {
position: relative;
/* 부모요소 */
width: 800px;
margin: 0 auto;
}
.container:after {
display: block;
clear: both;
content: '';
}
.content {
float: left;
width: 500px;
height: 300px;
background-color: lightsalmon;
}
.aside {
float: left;
width: 300px;
height: 100px;
background-color: lightgreen;
}
.aside:after {
content: '';
position: absolute;
/* 자식요소 */
right: 300px;
top: 0;
bottom: 0;
width: 5px;
background-color: #000;
}
.footer {
height: 100px;
background-color: cornflowerblue;
}
비공개 글입니다.