HTML / CSS
관공서 홈페이지
메인 , 풋터
결과
HTML 구성
<div id="section3" class="section3Wrap">
<div class="container cf">
<div class="memory midBox">
<h3 class="tit">경기도메모리</h3>
<ul class="contList">
<li>
<a href="#" target="_blank">
<p class="thumb"><img src="./img/memory_1.png" alt="한개인이 도서관을 매개로 공동체를 형성"></p>
<div class="txtBox">
<h4 class="themeFc">경기도민이야기 '도서관과 나'</h4>
<p>한 개인이 도서관을 매개로 공동체를 형성하면서 삶이 어떻게 변화하였는지 살펴보는 것과 동시에 개인과 공동체의 기억과 기록이 또 다른 도서관의 역할을 할 수 있다는 것을 보여줍니다.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<p class="thumb"><img src="./img/memory_2.jpg" alt="‘경기도가 궁금해?’ 콘텐츠는 초등학교 사회과 교과학습에서 활용하도록"></p>
<div class="txtBox">
<h4 class="themeFc">[경기도의 생활] 경기도가 궁금해?</h4>
<p>‘경기도가 궁금해?’ 콘텐츠는 초등학교 사회과 교과학습에서 활용하도록 초등학생 교재 중 하나인 ‘경기도의 생활’ 지역화 교과서의 구조를 반영한 교육용 콘텐츠입니다. </p>
</div>
</a>
</li>
</ul>
<p class="more">
<a href="#">
<span class="ir_pm">경기도메모리 더보기</span>
</a>
</p>
</div>
<div class="bookMagic midBox">
<h3 class="tit">북매직</h3>
<ul class="contList">
<li>
<a href="#" target="_blank">
<p class="thumb"><img src="./img/magic_01.jpg" alt="[서평집] 2021 사서들의 책 이야기"></p>
<div class="txtBox">
<h4 class="themeFc">[서평집] 2021 사서들의 책 이야기</h4>
<p>2021년 사서들의 책 이야기는 경기도사서서평단이 한 해 노력의 결실로 작성한 서평을 묶은 서평집입니다.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<p class="thumb"><img src="./img/magic_2.png" alt="<내 생애 첫 책놀이 2> 동영상 서비스"></p>
<div class="txtBox">
<h4 class="themeFc">
<내 생애 첫 책놀이 2> 동영상 서비스
</h4>
<p>0~48개월 영유아를 위한 책놀이 동영상 서비스를 소개합니다.</p>
</div>
</a>
</li>
</ul>
<p class="more">
<a href="#">
<span class="ir_pm">북매직 더보기</span>
</a>
</p>
</div>
</div>
</div>
<div id="section4">
<div class="container cf">
<div class="gyeonggiLib">
<ul class="cf">
<li class="detail">
<a href="#">
<div class="bar"></div>
<h3>
<span>경기도 도서관</span>
한눈에 보기
</h3>
<div class="info">
<ul>
<li>
도서관 연간 방문수
<span>43,668,958명</span>
</li>
<li>
경기도 소장 책수
<span>35,357,915권</span>
</li>
<li>
공공/작은도서관
<span>299개관/1,825개관</span>
</li>
</ul>
<p class="taget">2021년 12월 기준</p>
</div>
</a>
</li>
<li class="search">
<a href="#">
<span>경기도 도서관 찾기</span>
</a>
</li>
</ul>
</div>
<div class="snsContentWrap">
<div class="preview01">
<div class="titleBox">
<p class="tit1">경기도 대표도서관 미리보기</p>
</div>
<div class="imgBox">
<a href=""><img src="./img/p1.jpg" alt="경기도 대표도서관 미리보기"></a>
</div>
</div>
<div class="preview02">
<div class="titleBox">
<p class="tit1">경기도 작은도서관 도우미</p>
</div>
<div class="imgBox">
<a href=""><img src="./img/p2.jpg" alt="경기도 작은도서관 도우미"></a>
</div>
</div>
</div>
</div>
</div>
<div id="section5">
<div class="container"></div>
</div>
</main>
<footer id="footer" class="footer-area">
<div class="container">
<ul class="cf">
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">저작권정책</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
<div class="addressArea">
<address>16258 경기도 수원시 팔달구 신풍로 23번길 68(신풍동) | Tel : 031) 252-5237 | Fax : 031) 246-4021</address>
<cite>Copyright © Gyeonggi-do Cyber Library. All rights reserved.</cite>
</div>
</div>
</footer>CSS 구성
.section3Wrap .midBox{width: 484px; float: left; position: relative; margin-right: 32px;}
.section3Wrap .midBox:last-child{margin-right: 0;}
.section3Wrap .midBox h3{font-size: 1.286em; line-height: 1.111em; color: #333; padding-bottom: 15px; font-weight: bold;}
.section3Wrap .midBox ul{width: 100%;}
.section3Wrap .midBox ul li{width: 48%; float: left; margin-right: 4%;}
.section3Wrap .midBox ul li:last-child{margin-right: 0;}
.section3Wrap .midBox ul li a{display: block; max-width: 230px; background: #fff; border: 1px solid #dfdfdf; margin: 0 auto;}
.section3Wrap .midBox ul li a p{height: 135px;}
.section3Wrap .midBox ul li a p img{width: 100%; height: 100%;}
.section3Wrap .midBox ul li a .txtBox{padding: 15px 18px; box-sizing: border-box; }
.section3Wrap .midBox ul li a .txtBox h4{color: #0066b3; margin-bottom: 5px; font-size: 1.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.section3Wrap .midBox ul li a .txtBox p{color: #666; font-size: 0.9em; overflow: hidden; height: 3.1em; line-height: 1.54em; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.section3Wrap p.more{position: absolute; top: 0; right: 0;}
.section3Wrap p.more a{display: block; width: 24px; height: 24px; background: url(../img/split_main.png) no-repeat -120px -117px;}
.gyeonggiLib{width: 63.7%; float: left; background: #007bc6;}
.gyeonggiLib > ul{width: 637px; padding: 36px 0 40px;}
.gyeonggiLib > ul > li{float: left;}
.gyeonggiLib ul li.detail{width: 330px; height: 307px; }
.gyeonggiLib ul li.detail a{display: block; position: relative; height: 100%; background: url(../img/btm_img1.png) no-repeat right 0;}
.gyeonggiLib ul li.detail a .bar{width: 125px; height: 6px; background: #fff;}
.gyeonggiLib ul li.detail a h3{margin-top: 20px; color: #fff; font-size: 2.2em; font-weight: bold;}
.gyeonggiLib ul li.detail a h3 span{font-size: 0.61em; display: block;}
.gyeonggiLib ul li.detail a .info{position: absolute; bottom: 25px; right: 0; left: 0;}
.gyeonggiLib ul li.detail a .info ul{}
.gyeonggiLib ul li.detail a .info ul li{padding: 13px 15px; border: 1px solid #66b0dd; background: rgba(0,102,179,0.8); margin-top: 6px; color: #fff;}
.gyeonggiLib ul li.detail a .info ul li span{float: right; color: #ffec57; font-weight: bold;}
.gyeonggiLib ul li.detail a .info .taget{text-align: right; color: #fff;}
.gyeonggiLib ul li.search{margin-left: 33px;}
.gyeonggiLib ul li.search a{display: block; width: 240px; height: 60px; padding-top: 220px; border: 3px solid #80bde3; background: url(../img/map.png) no-repeat center 20px;}
.gyeonggiLib ul li.search a span{width: 194px; display: block; margin: 0 auto 20px; text-align: center; font-weight: bold; color: #fff; font-size: 1.143em; background-color: #0066b3; box-shadow: 2px 3px 0 #00436b; line-height: 34px;}
.snsContentWrap{width: 36.3%; float: left;}
.snsContentWrap .preview01{padding: 24px 0 24px 15px; background-color: #0066b3;}
.snsContentWrap .preview02{padding: 24px 0 24px 15px; background-color: #00599c;}
.snsContentWrap .titleBox{font-size: 1.4em; color: #fff; font-weight: bold; line-height: 1.4; background: url(../img/leftBar.jpg) no-repeat 0 3px; padding-left: 15px;}
.snsContentWrap .imgBox{margin-top: 10px;}
.footer-area{padding: 30px 0 50px; box-sizing: border-box;}
.footer-area .container{background: url(../img/footer_logo.png) no-repeat; padding-left: 250px; box-sizing: border-box;}
.footer-area ul{margin-bottom: 20px;}
.footer-area ul>li{float: left; margin-right: 20px; font-weight: bold;}
.footer-area ul>li:first-child a{color: #f6ff00;}
.footer-area ul>li>a{color: #fff;}
.footer-area .addressArea{color: #fff; padding-bottom: 21px; font-size: 14px;}
.footer-area .addressArea cite{font-style: normal;}
