20. 웹 표준 사이트 만들기(2019) - 게시판3
전체소스
index.html
...
<body>
...
<div id="contents">
...
<div id="cont_cont">
<div class="container">
<div class="cont">
...
<div class="column col2">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판3 -->
<div class="notice3">
<h4>Html Reference</h4>
<ul>
<li>
<a href="#">
<img src="img/notice01.jpg" alt="이미지1">
<strong>[HTML] table</strong>
<span>table 태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice02.jpg" alt="이미지2">
<strong>[HTML] div</strong>
<span>div 태그는 문서의 섹션을 만들거나 영역을 나눌 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice03.jpg" alt="이미지3">
<strong>[HTML] dl</strong>
<span>dl 태그는 용어를 설명하는 목록형 태그입니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice04.jpg" alt="이미지4">
<strong>[HTML] em</strong>
<span>em 태그는 텍스트를 강조할 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- //게시판3 -->
</div>
<!-- //col2 -->
...
</div>
</div>
</div>
<!-- //cont_cont -->
</div>
<!-- //contents -->
...
</body>
</html>
style.css
...
/* 게시판3 */
.notice3 {position: relative;}
.notice3 h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
/* padding: 8px 0 14px 60px;은 이미지와 strong, span 글자가 겹치기 때문에 적용했다. img는 absolute가 적용되서 padding의 영향을 받지 않는다. */
.notice3 li {position: relative; padding: 8px 0 14px 60px;}
/* img 태그는 width 값만 설정해도 height도 같이 설정되는듯. span 태그에 이미지를 설정할 때 width와 height를 주기위해서는 block으로 변경해야 한다. */
.notice3 li a img {width: 50px; position: absolute; left: 0; top: 0; border: 1px solid #0093bd;}
/* strong과 span을 상하로 나누기 위해 block 속성을 주었다. */
.notice3 li a strong {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice3 li a span {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;}
.notice3 a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
'IT공부 > HTML & CSS' 카테고리의 다른 글
| 22. 웹 표준 사이트 만들기(2019) - 마우스 오버효과2 (0) | 2020.06.19 |
|---|---|
| 21. 웹 표준 사이트 만들기(2019) - 마우스 오버효과1 (0) | 2020.06.18 |
| 19. 웹 표준 사이트 만들기(2019) - 게시판2 (0) | 2020.06.18 |
| 18. 웹 표준 사이트 만들기(2019) - 게시판 (0) | 2020.06.18 |
| 17. 웹 표준 사이트 만들기(2019) - 컨텐츠 레이아웃 (0) | 2020.06.18 |
