고정 헤더 영역
상세 컨텐츠
본문
float, clear, position 등 이용하여, 사이트 맵과 배너 목록을 작성해보자,
- 사이트 맵은 네비게이션 메뉴의 모음이다.
- 각 메뉴를 클릭하면 해당 웹 페이지로 이동이 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {margin : 0; padding : 0;}
li {list-style-type : none;}
section {heigth : 250px;
background-color : #1b9c92;
color : white;}
#sitemap {width : 800px;
margin : 0 auto;}
div {float : left;
margin : 50px 40px;} /* margin 2개 주면 좌 우로 잡힘 */
.items li {margin-top : 10px;}
</style>
</head>
<body>
<section>
<div id="sitemap">
<div class="items">
<h3>병원 소개</h3>
<ul>
<li>인사말</li>
<li>병원 네트워크</li>
<li>조직도</li>
<li>찾아오시는 길</li>
</ul>
</div>
<div class="items">
<h3>감기 클리닉</h3>
<ul>
<li>기침 감기</li>
<li>코 감기</li>
<li>목 감기</li>
<li>몸살 감기</li>
</ul>
</div>
<div class="items">
<h3>비염 클리닉</h3>
<ul>
<li>알레르기 비염</li>
<li>축농증</li>
<li>코막힘 비염</li>
</ul>
</div>
<div class="items">
<h3>온라인 상담</h3>
<ul>
<li>공지사항</li>
<li>자주하는 질문</li>
<li>질문과 답변</li>
<li>자료실</li>
</ul>
</div>
</div>
</section>
</body>
</html>
수제 초콜릿 전문점
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {margin : 0; padding : 0;}
li {list-style-type : none;}
h2 {margin : 20px 0 0 30px;}
.items {width : 300px;
border : solid 1px #cccccc;
padding : 30px 0 0 30px;
margin : 30px 0 10px 30px;
float : left;}
.i1 img {width : 300px;}
.i2 {margin-top : 20px;
font-size : 16px;
color : #908076;}
.i3 {margin-top : 10px;
font-size : 23px;
font-weight : bold;}
.i4 {margin-top : 20px;
margin-bottom : 10px;}
.i4 div {border-top : solid 1px black;
padding : 15px 0;
font-size : 16px;}
.i4 .s1 {color : #908076;}
.i4 .s2 {margin-left : 80px;}
</style>
</head>
<body>
<h2>수제 초콜릿 전문점</h2>
<div class="items">
<ul>
<li class="i1"><img src="choco1.jpg"></li>
<li class="i2">초콜릿 스타일링</li>
<li class="i3">간식용 수제 초콜릿</li>
<li class="i4">
<div>
<span class="s1">2023.03.10</span>
<span class="s2">좋아요 3 · 추천 5</span>
</div>
</li>
</ul>
<div class="items">
<ul>
<li class="i1"><img src="choco2.jpg"></li>
<li class="i2">초콜릿 스타일링</li>
<li class="i3">간식용 수제 초콜릿</li>
<li class="i4">
<div>
<span class="s1">2023.03.10</span>
<span class="s2">좋아요 3 · 추천 5</span>
</div>
</li>
</ul>
</div>
<div class="items">
<ul>
<li class="i1"><img src="choco3.jpg"></li>
<li class="i2">초콜릿 스타일링</li>
<li class="i3">간식용 수제 초콜릿</li>
<li class="i4">
<div>
<span class="s1">2023.03.10</span>
<span class="s2">좋아요 3 · 추천 5</span>
</div>
</li>
</ul>
</div>
<div class="items">
<ul>
<li class="i1"><img src="choco4.jpg"></li>
<li class="i2">초콜릿 스타일링</li>
<li class="i3">간식용 수제 초콜릿</li>
<li class="i4">
<div>
<span class="s1">2023.03.10</span>
<span class="s2">좋아요 3 · 추천 5</span>
</div>
</li>
</ul>
</div>
<div class="items">
<ul>
<li class="i1"><img src="choco5.jpg"></li>
<li class="i2">초콜릿 스타일링</li>
<li class="i3">간식용 수제 초콜릿</li>
<li class="i4">
<div>
<span class="s1">2023.03.10</span>
<span class="s2">좋아요 3 · 추천 5</span>
</div>
</li>
</ul>
</div>
<div class="items">
<ul>
<li class="i1"><img src="choco6.jpg"></li>
<li class="i2">초콜릿 스타일링</li>
<li class="i3">간식용 수제 초콜릿</li>
<li class="i4">
<div>
<span class="s1">2023.03.10</span>
<span class="s2">좋아요 3 · 추천 5</span>
</div>
</li>
</ul>
</div>
</body>
</html>
환경 기업 웹 페이지
내 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {margin : 0 auto;}
body {background-color : black;}
#main {width : 1000px; padding : 10px;}
#header {background-color : black;
color : white;
padding : 10px;
text-align : center;
border : solid 1px white;}
#one {padding-top : 50px;}
#side1 {float : left;
width : 300px;
height : 300px;
margin-right : 47px;
color : white;
border : solid 1px white;}
#side2 {float : left;
width : 300px;
height : 300px;
margin-right : 47px;
border : solid 1px white;}
#side3 {float : left;
width : 30px; height : 300px;
color : white;
border : solid 1px white;}
#side2 img {width : 100%; height : 100%;}
#side4 img {width : 100%; height : 100%;}
#side5 img {width : 100%; height : 100%;}
#side1 p {line-height : 230%;
text-align : center;}
#side1 span {font-size : 30px;}
#side3 .p {height : 74px;
border-bottom : solid 1px white;}
#side3 span {font-size : 30px;}
#side4 {margin-right : 47px;
float : left;
padding-top : 50px;
width : 300px;
height : 300px;}
#side5 {float : left;
padding-top : 50px;
width : 300px;
height : 300px;}
</style>
</head>
<body>
<div id="main">
<div id="header">
<p style="font-size : 30px;">기업 연혁</p>
</div>
<div id="one">
<div id="side1">
<p style="font-size : 30px; text-align : center; border-bottom : solid 1px white;">2018 ~ 현재</p>
<p>환경과 사람을 존중하는 기업</p>
<p style="font-size : 30px;">'환경 사랑'</p>
<p>환경 관련 우수기업</p>
<p><span>대통령상</span>수상하다.</p>
</div>
<div id="side2">
<img src="love.jpg">
</div>
<div id="side3">
<p class="p"><span>2010</span>
<br>환경사랑 수원 전시장 오픈</p>
<p class="p"><span>2010</span>
<br>환경사랑 광주 전시장 오픈</p>
<p class="p"><span>2010</span>
<br>환경사랑 대전 전시장 오픈</p>
<p><span>2010</span>
<br>환경사랑 서울 전시장 오픈</p>
</div>
</div>
<div id="two">
<h3 style="color : white; text-align : center;">공모전</h3>
</div>
<div id="side4">
<img src="one.jpg">
</div>
<div id="side4">
<img src="two.jpg">
</div>
<div id="side5">
<img src="three.jpg">
</div>
</div>
</body>
</html>
'FrontEnd > HTML' 카테고리의 다른 글
| 레이아웃(layout) 연습 (0) | 2022.06.24 |
|---|---|
| box-sizing, vertical-align (0) | 2022.06.22 |
| float, position (relative, absolute, fixed) (0) | 2022.06.22 |
| HTML 레이아웃 요소 (header, sidebar, section, footer) (0) | 2022.06.22 |
| 레이아웃 (배치),(margin:0 auto;),(float),(clear),(layout) (0) | 2022.06.21 |
