반응형
1. Sitemap
사이트의 설계도.
크롤링 로봇이 이용할 수 있는 웹사이트의 접근 가능한 페이지의 목록.
2. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site 맵 만들기</title>
<link href="css/ex07-2.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{
width:900px;
margin:auto;
}
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;
}
/* 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;
}
/* 2) postion을 이용해 배치하기 */
section{
position:relative;
height:500px;
}
div.row div.box{
position:absolute;
}
div.row:first-of-type div.box:nth-child(1){
left:50px;
top:50px;
background:tomato;
}
div.row:first-of-type div.box:nth-child(2){
left:200px;
top:150px;
background:gold;
}
div.row:first-of-type div.box:nth-child(3){
left:300px;
top:250px;
background:cyan;
}
div.row:last-of-type div.box:nth-child(1){
left:480px;
top:150px;
background:peru;
}
div.row:last-of-type div.box:nth-child(2){
left:560px;
top:50px;
background:lavender;
}
/* 2) UI/UX */
/* 마우스 올려놓을시 튀어나오기 */
div.box:hover{
z-index:1;
transform:scale(1.2);
transition:0.5s;
/* transform:rotate(360deg); */
}
4. HTML / CSS 파일
ex07.html
0.00MB
ex07-2.css
0.00MB
5. HTML 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190609 Basic Study 31(가시 속성) (0) | 2019.06.09 |
|---|---|
| HTML5 - 190609 Basic Study 30(Sitemap 제작 - 2) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 28(positon과 float를 이용한 레이아웃 설계) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 27(위치 속성) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 26(:taget 활용하기) (0) | 2019.06.09 |
