반응형
1. Sitemap
사이트의 설계도.
크롤링 로봇이 이용할 수 있는 웹사이트의 접근 가능한 페이지의 목록.
2. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site 맵 만들기</title>
<link href="css/ex07.css" rel="stylesheet">
</head>
<body>
<header>
<h1>sitemap</h1>
</header>
<section>
<div class="row">
<div class="box" id="toefl" >
<h2>TOEFL</h2>
<ul>
<li>TOEFL 시험 소개</li>
<li>TOEFL 프로그램 소개</li>
<li>TOEFL 강의 시간표</li>
<li>TOEFL 등록 문의</li>
<li>TOEFL 수업 후기</li>
<li>TOEFL 강사 소개</li>
</ul>
</div>
<!-- box end -->
<div class="box" id="toeic">
<h2>TOEIC</h2>
<ul >
<li>TOEIC 시험 소개</li>
<li>TOEIC 프로그램 소개</li>
<li>TOEIC 강의 시간표</li>
<li>TOEIC 등록 문의</li>
<li>TOEIC 수업 후기</li>
<li>TOEIC 강사 소개</li>
</ul>
</div>
<!-- box end -->
<div class="box" id="english">
<h2>ENGLISH</h2>
<ul>
<li>ENGLISH 프로그램 소개</li>
<li>ENGLISH 강의 시간표</li>
<li>ENGLISH 등록 문의</li>
<li>ENGLISH 수업 후기</li>
<li>ENGLISH 강사 소개</li>
</ul>
</div>
<!-- box end -->
</div>
<!-- row end -->
<div class="row">
<div class="box"id="japanese">
<h2>JAPANESE</h2>
<ul >
<li>JAPANESE 프로그램 소개</li>
<li>JAPANESE 강의 시간표</li>
<li>JAPANESE 등록 문의</li>
<li>JAPANESE 수업 후기</li>
<li>JAPANESE 강사 소개</li>
</ul>
</div>
<!-- box end -->
<div class="box"id="academy">
<h2>ACADEMY</h2>
<ul >
<li>ACADEMY 소개</li>
<li>연혁</li>
<li>제휴 문의</li>
<li>회원 가입</li>
<li>강사 모집</li>
<li>공지사항</li>
<li>FAQ</li>
</ul>
</div> <!-- box end -->
</div><!--row end -->
</section> <!-- section end -->
<footer>
<address>
©copyright allright ankiwoong
</address>
</footer>
</body>
</html>
3. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
ul, li{
list-style:none;
}
address{
font-style:normal;
/* 단어 첫글자만 대문자로 */
text-transform:capitzlize;
/* 단어 전체 대문자로 */
text-transform:uppercase;
}
/* css레이아웃 설계 */
body{
margin:20px;
}
header h1{width:900px;
margin:auto;
background:red;
border:5px solid darkgray;
text-align:center;
color:white;
/* 글자 간격 */
letter-spacing:8px;
/* 위아래 여백 */
line-height:2;
text-transform:capitalize;
}
section{
/* 1) 해당 */
/* border:1px solid red; */
width:900px;
margin:auto;
}
div.row{
/* 1) 해당 */
/* border:1px solid blue; */
}
div.box{
width:250px;
border:2px solid black;
}
footer{
width:900px;
margin:auto;
text-align:center;
}
/* 디자인하기 */
div.row h2{
text-align:center;
border-bottom:2px solid red;
}
div.row li{
line-height:2em;
/* 들여쓰기 */
text-indent:20px;
}
/* 목록기호넣기 */
div.row ul li:before{
content:'☞ ';
color:blue;
}
/* 동적인 효과 넣기 */
div.row h2:hover{
background:orange;
cursor:pointer;
}
ul li:hover{
background:pink;
cursor:pointer;
}
div.row ul li:hover:before{
content:'☞ ';
color:red;
}
header h1:hover{
background:black;
transition:0.5s
}
/* 정렬하기 */
div.row h2{
width:95%;
margin:auto;
margin-bottom:5px;
}
section{
margin-top:10px;
}
/* 1) float를 이용해 배치하기 */
div.box{
float:left;
margin:10px;
}
/* 부모태그에 overflow 적용 */
div.row{
overflow:hidden;
}
div.row div.box:first-child{
margin-left:50px;
}
/* h2에 태그에 롤오버효과주기 */
div.row h2{
/* absolute에 대한 기준점 주기 */
position:relative;
}
div.row h2:after{
content:'';
position:absolute;
left:50%;
bottom:0;
width:0;
height:5px;
background:blue;
/* 박스처리 */
display:block;
}
div.row h2:hover:after{
width:100%;
transition:0.5s;
left:0;
}
4. HTML / CSS 파일
ex07.html
0.00MB
ex07.css
0.00MB
5. HTML 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190609 Basic Study 32(Note) (0) | 2019.06.09 |
|---|---|
| HTML5 - 190609 Basic Study 31(가시 속성) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 29(Sitemap 제작 - 1) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 28(positon과 float를 이용한 레이아웃 설계) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 27(위치 속성) (0) | 2019.06.09 |
