반응형
[광고 누르면 오늘의 행운 상승!!]
- 하나의 페이지에 정리하기 힘듦
- 웹사이트 방문자가 짧은 시간 중요 내용 파악하는데 무리가 있음
- 다단 레이아웃 : 화면을 세로로 여러 개의 단으로 나눠 콘텐츠를 보여주는 형태
→ 다단 레이아웃 제작 시 플로팅, 포지셔닝 사용
float 속성을 사용한 2단 레이아웃 설정 방법
- HTML 문서 준비하기
- 2단 레이아웃을 구성하기 위해 (wrapper) 꼭 필요 - 섹션 요소의 넓이 설정하기
- CSS 이용하여 HTML 요소의 스타일 지정
→ 다단 레이아웃에서 섹션 요소 넓이 지정이 가장 중요! - 전체 요소 margin과 padding 0으로 설정
- 웹 브라우저 상의 기본 margin과 padding은 정밀한 레이아웃에 방해가 됨
- 섹션 요소의 넓이 설정
wrapper : HTML 페이지 고정된 크기 설정
최종 요소의 넓이 : margin 넓이 + padding의 넓이 + border의 굵기
header : 680 px = 700px - 20px (패딩 10px씩) (footer제외)
#wrapper{
width: 700px;
background-color: gray;
}
header{
width: 680px;
height: 80px;
padding: 10px;
background-color: lightgray;
}3. float 속성 설정하기
- float 속성 left, right
- 2단 레이아웃 만들기
- 방법 : nav 요소 - 왼쪽으로 floating
- nav + section 요소 - 오른쪽으로 floating
- footer 요소에 clear 속성 적용하기
→ 여러 단의 높이 CSS에서 수치 맞출 시 관리의 어려움
nav{
width: 160px;
padding: 10px;
float: left;
}
nav+section{
width: 500px;
padding: 10px;
background-color: darkgray;
float:right;
}3. 2단 레이아웃 완성하기
- 디자인 스타일을 적용하여 정리하고 꾸밈
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title </title>
<style type = "text/css" media = "all">
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 700px;
background-color: gray;
}
header{
width: 680px;
height: 80px;
padding: 10px;
background-color: lightgray;
}
nav{
width: 160px;
padding: 10px;
float: left;
}
nav+section{
width: 500px;
padding: 10px;
background-color: darkgray;
float:right;
}
footer{
clear: both;
padding: 5px;
backgroun-color: black;
color: white;
}
body{
font-size: 0.9em;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
p{
margin-bottom: 20px;
}
li{
list-style: none;
margin-bottom: 10px;
}
a{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div id = "wrapper">
<header><h1>토스트는 무엇인가</h1></header>
<section>
<nav>
<ul>
<li><a href="#">토스트의 유래</a></li>
<li><a href="#">토스트의 장점</a></li>
<li><a href="#">토스트의 단점</a></li>
<li><a href="#">토스트의 의외성</a></li>
<li><a href="#">토스트의 추악함</a></li>
</ul>
</nav>
<section>
<article>
<h2>토스트의 유래</h2>
<p>
어원 라틴어에서 '바싹 말리다, 마르다, 굽다, 타다'를 뜻하는 torrere에서 유래한
12세기 통속 라틴어에서 '굽기'를 뜻하는 tostare에서 유래한 것이다. 오늘날 쓰이고 있는 단어
'toast'는 옛 프랑스어에서 온 것이며 1398년에 처음으로 발견되었다.
</p>
</article>
<article>
<h2>이것도 사실 토스트의 유래</h2>
<p>
어원 라틴어에서 '바싹 말리다, 마르다, 굽다, 타다'를 뜻하는 torrere에서 유래한
12세기 통속 라틴어에서 '굽기'를 뜻하는 tostare에서 유래한 것이다. 오늘날 쓰이고 있는 단어
'toast'는 옛 프랑스어에서 온 것이며 1398년에 처음으로 발견되었다.
</p>
</article>
</section>
</section>
<footer>
<p>토스트는 어딜봐도 이삭토스트가 제일 맜있다. 그 중에서도 역시 최고는 햄치즈 </p>
</footer>
</div>
</body>
</html>
반응형
'5. 웹 프로그래밍 > 2. CSS' 카테고리의 다른 글
| 인터렉티브 이미지 버튼[CSS] (0) | 2020.03.12 |
|---|---|
| position 속성을 이용한 2단 레이아웃[CSS] (1) | 2020.03.11 |
| Margin, Padding[CSS] (0) | 2020.03.10 |
| 목록 꾸미기[CSS] (0) | 2020.03.10 |
| 배경 설정[CSS] (0) | 2020.03.10 |