본문 바로가기
Python_WEB/HTML

HTML5 - 190615 Basic Study 33(Sitemap 제작 - 3)

AnKiWoong 2019. 6. 15. 09:51
반응형

1. Sitemap

사이트의 설계도.

크롤링 로봇이 이용할 수 있는 웹사이트의 접근 가능한 페이지의 목록.


2. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<link href="css/ex09.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapBody">
  <h1><span>사이트맵</span></h1>
  <div id="wrapSitemap">
    <div id="sitemap">
      <div id="companyIntro">
        <h2><span>회사소개</span></h2>
        <ul>
          <li><a href="#">출판이념</a></li>
          <li><a href="#">회사연혁</a></li>
          <li><a href="#">찾아오시는길</a></li>
        </ul>
      </div>
      <div id="newBook">
        <h2><span>신간소개</span></h2>
        <ul>
          <li><a href="#">디카</a></li>
          <li><a href="#">그래픽</a></li>
          <li><a href="#">오피스</a></li>
          <li><a href="#">ITQ</a></li> 
          <li><a href="#">경영/경제</a></li>
          <li><a href="#">기타</a></li>
        </ul>
      </div>
      <div id="bookIntro">
        <h2><span>도서소개</span></h2>
        <ul>
          <li><a href="#">디카</a></li>
          <li><a href="#">그래픽</a></li>
          <li><a href="#">오피스</a></li>
          <li><a href="#">ITQ</a></li>
          <li><a href="#">경영/경제</a></li>
          <li><a href="#">기타</a></li>
        </ul>
      </div>
      <div id="screenLecture">
        <h2><span>영상강좌</span></h2>
        <ul>
          <li><a href="#">디카</a></li>
          <li><a href="#">그래픽</a></li>
          <li><a href="#">오피스</a></li>
          <li><a href="#">ITQ</a></li>
          <li><a href="#">경영/경제</a></li>
          <li><a href="#">기타</a></li>
        </ul>
      </div>
      <div id="data">
        <h2><span>자료실</span></h2>
        <ul>
          <li><a href="#">디카</a></li>
          <li><a href="#">그래픽</a></li>
          <li><a href="#">오피스</a></li>
          <li><a href="#">ITQ</a></li>
          <li><a href="#">경영/경제</a></li>
          <li><a href="#">기타</a></li>
        </ul>
      </div>
      <div id="community">
        <h2><span>고객마당</span></h2>
        <ul>
          <li><a href="#">공지사항</a></li>
          <li><a href="#">1:1 게시판</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
</html>

 

3. CSS Code

@charset "utf-8";
/* CSS Document
 */
body {
	background:#FFF;
	color:#333;
	font-size:0.75em;
	font-family:맑은 고딕, 돋움, sans-serif;
	margin:0;
	line-height:1.5em;
	}
ul {
	margin:5px 0;
	}
li {
	list-style:none;
	padding-left:7px;margin-left:20px;
	}
a:link, a:visited {
	text-decoration:none;
	color: #09F;
	font-weight:bold;
	}
a:hover, a:active {
	text-decoration:underline;
	color:#F00;
	font-weight:bold;
	}
#contentsBox {
	width:726px;
	margin:50px;
}
#contentsBox h1 {
	height:25px;
	border-bottom:1px solid #EAEAEA;
	margin:20px;
	padding-bottom:5px;
	}
#contentsBox h1 span {
	display:none;
	}
#wrapSitemap {
	margin-top:20px;
	}
#sitemap {
	margin-left:40px;
	padding-bottom:10px;
	}
#sitemap h2 {
	border:0px solid black;
	background:#00FFFF;
	border-radius:10px;
	color:#FFF;
	font-size:1.2em;
	width:132px;
	height:28px;
	text-align:center;
	margin:0;
	}
#sitemap h2 span {
	padding-top:5px;
	display:block;
	}
#companyIntro, #newBook, #bookIntro, #screenLecture, #data, #community {
	float:left;
	margin:0 20px 20px 0;
	}
.clearDiv {
	clear:both;
	}
#wrapBody h1{
	color:#fff;
	font-family:맑은 고딕, 돋움, sans-serif;
	border:0px solid black;
	width:900px;
	height:50px;
	margin-left:50px;
	background:#00ffff;
	text-align:right;
	line-height:50px;
	border-radius:40px 10px;
	padding:10px;
}

 

4. HTML / CSS 파일

ex09.html
0.00MB
ex09.css
0.00MB

 

5. HTML 미리보기

반응형
저작자표시 비영리 동일조건

'Python_WEB > HTML' 카테고리의 다른 글

HTML5 - 190615 Basic Study 35(스프라이트 메뉴)  (0) 2019.06.15
HTML5 - 190615 Basic Study 34(배경 속성 이해하기)  (0) 2019.06.15
HTML5 - 190609 Basic Study 32(Note)  (0) 2019.06.09
HTML5 - 190609 Basic Study 31(가시 속성)  (0) 2019.06.09
HTML5 - 190609 Basic Study 30(Sitemap 제작 - 2)  (0) 2019.06.09

'Python_WEB/HTML' Related Articles

티스토리툴바