06. 웹 표준 사이트 만들기(2019)
실제 사이트 만들 때는 서버에 들어가서 작업한다. 보통 다른 강사들은 로컬에서 작업을 한다. 서버에서 작업하는 것과 로컬에서 작업하는 것은 거의 흡사하지만 서버는 약간의 스킬이 필요하다. 여기서는 서버에서 작업을 할 것이다.
"06. layout06.html" 파일을 만든다.
전체소스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout06</title>
<style>
* {margin: 0; padding: 0;}
#wrap {font-size: 40px; color: #fff; text-align: center; text-transform: uppercase;}
#header { height: 140px; line-height: 140px; background: #ffe1e4;}
#banner { height: 450px; line-height: 450px; background: #fbd6e3;}
#contents { height: 950px; line-height: 950px; background: #ead5ee;}
#footer {height: 220px; line-height: 220px;background: #d6ebfd;}
/* 블록구조를 가운데 오게 하려면 margin:0 auto 속성을 준다. */
/*
.header-container {width: 1100px; height: 140px; margin:0 auto; background: #999;}
.banner-container {width: 1100px; height: 450px; margin:0 auto; background: #888;}
.contents-container {width: 1100px; height: 950px; margin:0 auto; background: #777;}
.footer-container {width: 1100px; height: 220px; margin:0 auto; background: #666;}
*/
/* height: inherit는 부모값을 상속받는다. 색상설정 방법 2가지 #666(헥사코드 모드), rgba(0(r),0(g),0(b),0.3(a 투명도 0 ~ 1 사이의 실수))rgba모드 위에 보다 소스가 훨씬 간결해졌다. */
.container { width: 1100px; margin: 0 auto; height: inherit; background: rgba(0,0,0,0.3)}
</style>
</head>
<body>
<div id="wrap">
<!-- 전체영역에는 id를 쓰고 컨테이너에는 class를 쓴 이유가 id는 반복해서 사용할 수 없지만 class는 반복해서 사용할 수 있다. -->
<div id="header">
<div class="container">header</div>
</div>
<div id="banner">
<div class="container">banner</div>
</div>
<div id="contents">
<div class="container">contents</div>
</div>
<div id="footer">
<div class="container">footer</div>
</div>
</div>
</body>
</html>
'IT공부 > HTML & CSS' 카테고리의 다른 글
| 08. 웹 표준 사이트 만들기(2019) - 레이아웃1 (0) | 2020.06.16 |
|---|---|
| 07. 웹 표준 사이트 만들기(2019) (0) | 2020.06.16 |
| 05. 웹 표준 사이트 만들기(2019) (0) | 2020.06.16 |
| 04. 웹 표준 사이트 만들기(2019) (0) | 2020.06.16 |
| 03. 웹 표준 사이트 만들기(2019) (0) | 2020.06.16 |
