24. 웹 표준 사이트 만들기(2019) - 게시판4
전체소스
index.html
...
<body>
...
<div id="contents">
...
<div class="column col5">
...
<!-- 게시판4 -->
<!-- 글씨를 특별한 이유로 평범한 글자와 구분하기 위해서는 <i> 태그를 사용합니다.
글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 <b> 태그를 사용합니다.
글씨를 강조하고 싶다면 <em> 태그를 사용합니다.
글씨의 중요성을 강조하고 싶다면 <strong> 태그를 사용합니다.
글씨의 중요성과 강조를 고려하지 않는 단순 참고용 표시를 사용한다면 <mark> 태그를 사용합니다.
글씨의 전문적인 용어를 정의할 때는 <dfn> 태그를 사용합니다.
글씨를 위첨자로 표현하고 싶다면 <sup> 태그를 사용합니다.
글씨를 아래첨자로 표현하고 싶다면 <sub> 태그를 사용합니다.
글씨의 맞춤법이 틀린 단어를 표현하고 싶다면 <u> 태그를 사용합니다. -->
<div class="notice4 mt15">
<h4>최신 <em>공지사항</em></h4>
<ul>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2018.11.19</span>
</li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2018.11.19</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2018.11.19</span></li>
</ul>
<a href="#" class="more" title="더보기">더보기</a>
</div>
<!-- //게시판4 -->
...
style.css
...
/* 게시판4 */
.notice4 {position: relative; border: 1px solid #ccc;}
.notice4 h4 {border-bottom: 1px solid #ccc; font-size: 14px; font-weight: 700; color: #0093bd; padding: 8px 10px;}
.notice4 h4 em {color: #cf3292;}
.notice4 ul {padding: 10px;}
.notice4 li {overflow: hidden; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px; padding-bottom: 2px;}
.notice4 li a {float: left; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice4 li span {float: right; width: 30%;}
.notice4 a.more {position: absolute; right: 9px; top: 9px;}
'IT공부 > HTML & CSS' 카테고리의 다른 글
| 26. 웹 표준 사이트 만들기(2019) - 로그인 (0) | 2020.06.20 |
|---|---|
| 25. 웹 표준 사이트 만들기(2019) - 갤러리 (0) | 2020.06.19 |
| 23. 웹 표준 사이트 만들기(2019) - 탭메뉴 (0) | 2020.06.19 |
| 22. 웹 표준 사이트 만들기(2019) - 마우스 오버효과2 (0) | 2020.06.19 |
| 21. 웹 표준 사이트 만들기(2019) - 마우스 오버효과1 (0) | 2020.06.18 |
