본문 바로가기

Python_WEB/HTML

HTML5 - 190609 Basic Study 29(Sitemap 제작 - 1)

728x90

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>
    &copy;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 미리보기

< css 2일차 >

반응형