02. 웹 표준 사이트 만들기(2019)
레이아웃 유형을 연습한다. 전체박스가 있고 6개의 박스가 있다.
"02. layout02.html" 파일을 만든다.
아래와 같이 작성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout2</title>
<style>
#wrap {}
#header {width: 1000px; height: 100px; background-color: #0277bd;}
#nav {width: 1000px; height: 100px; background-color: #0288d1;}
#side_left {width: 300px; height: 600px; background-color: #039be5;}
#contents {width: 400px; height: 600px; background-color: #03a9f4;}
#side_right {width: 300px; height: 600px; background-color: #29b6f6;}
#footer {width: 1000px; height: 100px; background-color: #0288d1;}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="side_left"></div>
<div id="contents"></div>
<div id="side_right"></div>
<div id="footer"></div>
</div>
</body>
</html>
볼록구조이기 때문에 아래와 같이 나온다.
전체소스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout2</title>
<style>
body {background: #b3e5fc;}
/* 블록구조를 가운데 정렬하기 위해서는 전체를 감싸고 있는 태그 속성을 설정하면 된다. */
#wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color: #fff; text-align: center; text-transform: uppercase;}
#header {width: 1000px; height: 100px; line-height: 100px; background-color: #0277bd;}
#nav {width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1;}
#side_left {float: left;width: 300px; height: 600px; line-height: 600px; background-color: #039be5;}
#contents {float: left;width: 400px; height: 600px; line-height: 600px; background-color: #03a9f4;}
#side_right {float: left;width: 300px; height: 600px; line-height: 600px; background-color: #29b6f6;}
/* footer에도 float : left를 하면 정렬되지만 footer 밑에 똑같은 박스가 여러개 있으면 다 float: left를 적어줘야 한다. clear는 '취소하다'라는 뜻으로 left는 float: left값을 취소하고 right는 float: right 값을 취소한다. both는 둘다 취소이다. */
#footer { clear: both; width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">header</div>
<div id="nav">nav</div>
<div id="side_left">side_left</div>
<div id="contents">contents</div>
<div id="side_right">side_right</div>
<div id="footer">footer</div>
</div>
</body>
</html>
'IT공부 > HTML & CSS' 카테고리의 다른 글
| 06. 웹 표준 사이트 만들기(2019) (0) | 2020.06.16 |
|---|---|
| 05. 웹 표준 사이트 만들기(2019) (0) | 2020.06.16 |
| 04. 웹 표준 사이트 만들기(2019) (0) | 2020.06.16 |
| 03. 웹 표준 사이트 만들기(2019) (0) | 2020.06.16 |
| 01. 웹 표준 사이트 만들기(2019) (0) | 2020.06.15 |
