728x90
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<!--문서속의 언어가 utf-8-->
<meta charset="UTF-8">
<meta name="author" content="webstoryboy">
<!--사이트 설명 : 검색할때 나오는 부분-->
<meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
<meta name="keyword" content="웹스토리보이, 웹표준, 웹접근성, 사이트 만들기">
<meta name="generator" content="brakets">
<title>WEBSTANDARD SITE</title>
<!-- CSS STYLE -->
<!--순서대로 우선순위-->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- 웹 폰트 -->
<!-- 윈도우 , 맥에따라 기본폰트가 달라 화면에서 나타나는 위치 등이 약간 다르게 나올 수 있는데 웹상에서 폰트를 다운받게해서 폰트를 맞추는 것 -->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
</head>
<body>
<!-- 스킵 내비게이션 -->
<!--스킵 내비게이션은 장애인도 평등하게 웹을 사용하기 위한 웹 접근성을 위해 꼭 설정해야하는 요소 중 하나이다.-->
<div id = "skip">
<!-- <a>태그 : 다른 페이지 이동을 설정 -->
<a href="#cont_nav">전체 메뉴 바로가기</a>
<a href="#cont_nav">배너 메뉴 바로가기</a>
<a href="#cont_cont">컨텐츠 메뉴 바로가기</a>
</div>
<!-- //스킵 내비게이션 -->
<div id="wrap">
<div id="header">
<div class="container">
<div class="header">
<div class="header-menu">
<a href="https://wiss.tistory.com">Desinger</a>
<a href="https://kimgom2.tistory.com/category">Publisher</a>
<a href="https://www.youtube.com/channel/UCsvQSv7EeCMHyYb9ENKAJZw">Youtube</a>
</div>
<!--//헤더 메뉴-->
<div class="header-tit">
<!-- <h1~h6> : 섹션의 제목을 설정 (<h1>태그가 가장 높은 단계의 제목) / <br> : 엔터 -->
<h1>Professional Publisher & Desinger</h1><br>
<a href="https://kimgom2.tistory.com/category">kimgom2.tistory.com</a>
</div>
<!--//헤더 타이틀-->
<!-- 이미지를 표현하는 방법
1. img 태그로 표현 (이미지가 의미가 있을 때) / alt 태그 - 대체 문자 표현
2. background 속성으로 표현 (이미지가 의미가 없을 때) / 대체 문자 X
3. 이미지를 background 속성 - 웹 표준 준수하기 위해서는
가상으로 대체를 문자를 만들어줌 (IR 효과)
이미지 스프라이트 효과
-->
<div class="header-icon">
<a href="#" class = "icon1"><span class="ir_pm">icon1</span></a>
<a href="#" class = "icon2"><span class="ir_pm">icon2</span></a>
<a href="#" class = "icon3"><span class="ir_pm">icon3</span></a>
<a href="#" class = "icon4"><span class="ir_pm">icon4</span></a>
</div>
</div>
<!-- //헤더 아이콘-->
</div>
</div>
<!--//header-->
<div id="contents">
<div id="cont_nav">
<div class = "container">
<h2 class = "ir_su">전체 메뉴</h2>
<div class="nav">
<div>
<h3>HTML Reference</h3>
<!-- <ol : 순서가 있는 목록형 태그> -->
<ol>
<!-- <li : 목록의 항목을 나타내는 태그> -->
<li><a href="#">HTML 태그(Tag)</a></li>
<li><a href="#">블록 요소/인라인 요소</a></li>
<li><a href="#">DTD 선언</a></li>
<li><a href="#">언어 속성 설정</a></li>
<li><a href="#">HTML <title></a></li>
<li><a href="#">HTML <meta></a></li>
<li><a href="#">특수문자</a></li>
<li><a href="#">하이퍼 링크</a></li>
<li><a href="#">HTML <style></a></li>
<li><a href="#">HTML <html></a></li>
<li><a href="#">HTML <head></a></li>
<li><a href="#">HTML <div></a></li>
<li><a href="#">HTML <colgroup></a></li>
<li><a href="#">HTML <caption></a></li>
</ol>
</div>
<div>
<h3>CSS Reference</h3>
<ol>
<li><a href="#">CSS 선택자</a></li>
<li><a href="#">CSS 단위</a></li>
<li><a href="#">CSS 색상</a></li>
<li><a href="#">CSS 선언 방법</a></li>
<li><a href="#">상대주소와 절대주소</a></li>
<li><a href="#">CSS float</a></li>
<li><a href="#">이미지 표현 방법</a></li>
<li><a href="#">이미지 스프라이트</a></li>
<li><a href="#">IR 효과</a></li>
<li><a href="#">이미지 최적화</a></li>
<li><a href="#">background-color</a></li>
<li><a href="#">border-style</a></li>
<li><a href="#">font-size</a></li>
<li><a href="#">text-align</a></li>
</ol>
</div>
<div class = "last">
<h3>Webstandard</h3>
<ol>
<li><a href="#">웹 표준</a></li>
<li><a href="#">웹 접근성</a></li>
<li><a href="#">W3C</a></li>
<li><a href="#">웹 접근성 연구소</a></li>
<li><a href="#">네이버 널리</a></li>
<li><a href="#">다음 다룸</a></li>
<li><a href="#">Webstandard</a></li>
</ol>
</div>
</div>
</div>
</div>
<!--//cont_nav-->
<div id="cont_tit">
<div class = "container">
<div class="tit">
<h2>"나는 퍼블리셔다"</h2>
<!--<span> : 콘텐츠 요소를 표현하기 위한 인라인 요소이며, 의미가 없는 그룹화 요소 / 적절한 의미에 맞는 요소가 없거나 그룹화 할 떄 사용하며 <div>요소와 비교됨
<div>태그는 블록구조이며, <span>태그는 인라인 구조-->
<a href="#" class = "btn"><span class = "ir_pm">전체메뉴</span></a>
</div>
</div>
</div>
<!--//cont_tit-->
<div id="cont_ban">
<div class = "container">
<div class = "ban">
<a href="#" class ="prev"><span class="ir_pm">이전 이미지</span></a>
<ul>
<li class = "ban_imgl"><a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a></li>
<li class = "ban_img2"><a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a></li>
<li class = "ban_img3"><a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a></li>
</ul>
<a href="#" class ="next"><span class="ir_pm">다음 이미지</span></a>
</div>
</div>
</div>
<!--//cont_ban-->
<div id="cont_cont">
<div class = "container">
<div class = "cont">
<div class="column col1">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 게시판 -->
<div class = "notice">
<h4>Web Publisher Notice</h4>
<ul>
<li><a href="#">display:inline과 display:block의 차이점은 무엇인가요?</a></li>
<li><a href="#">HTML 태그 중에 dl,dd,ul,ol,li의 차이점이 무엇인가요?</a></li>
<li><a href="#">HTML 태그 중에 strong과 em 태그의 차이점은 무엇인가요?</a></li>
<li><a href="#">컨텐츠 요소를 가운데로 오게 하는 방법을 알려주세요!</a></li>
<li><a href="#">독타입을 선언하는 이유에 대해서 설명하세요.</a></li>
</ul>
<a href="#" class="more ir_pm">더보기</a>
</div>
<!-- //게시판 -->
<!-- 게시판 2 -->
<div class="notice2">
<h4>Web Designer Notice</h4>
<ul>
<li><a href="#">JPG, PNG, GIF의 차이점이 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">UI 디자인과 UX 디자인의 차이점을 설명하세요.</a><span>2018.11.16</span></li>
<li><a href="#">인터랙션 디자인의 핵심은 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
<li><a href="#">포트폴리오를 하면서 가장 잘 했다고 생각하는 부분은 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">웹 디자인과 모바일 디자인의 차이가 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- //게시판 2 -->
</div>
<!-- //col1 -->
<div class="column col2">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_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 class="column col3">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div>
<!-- //col3 -->
<div class="column col4">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<!-- 오버효과 -->
<div class = "notice_hover">
<h4>Mouse Hover</h4>
<ul>
<li>
<a href="#">
<span><img src = "img/sban01.jpg" alt ="이미지1"><em>바로가기</em></span>
<strong>와이어 프레임</strong>
</a>
</li>
<li>
<a href="#">
<span><img src = "img/sban02.jpg" alt ="이미지2"><em>바로가기</em></span>
<strong>스케치 작업</strong>
</a>
</li>
<li>
<a href="#">
<span><img src = "img/sban03.jpg" alt ="이미지3"><em>바로가기</em></span>
<strong>UI 디자인</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과 -->
<!-- 오버효과2 -->
<div class="notice_hover2 mt15">
<h4 class="ir_su">Mouse Hover</h4>
<ul>
<li>
<a href="#">
<span><img src = "img/sban04.jpg" alt ="이미지4"><em>바로가기</em></span>
<strong>HTML</strong>
</a>
</li>
<li>
<a href="#">
<span><img src = "img/sban05.jpg" alt ="이미지5"><em>바로가기</em></span>
<strong>CSS</strong>
</a>
</li>
<li>
<a href="#">
<span><img src = "img/sban06.jpg" alt ="이미지6"><em>바로가기</em></span>
<strong>jQuery</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과2 -->
</div>
<!-- //col4 -->
<div class="column col5">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div>
<!-- //col5 -->
<div class="column col6">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div>
<!-- //col6 -->
</div>
</div>
</div>
<!--//cont_cont-->
</div>
<div id="footer">
<div class = "container">footer</div>
</div>
<!--//footer-->
</div>
<!--//wrap-->
</body>
</html>reset.css
@charset "UTF-8"; /*여백 초기화*/
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form { margin: 0; padding: 0; } /*모두 적용하는 것이 아닌 지정된 것에만 여백 설정*/
/*a 링크 초기화*/
a { color: #222; text-decoration: none; }
/*hover : 마우스가 오버했을때*/
a:hover { color: #390; }
/* 폰트 초기화 */
body, input, textarea, select, button, table { /*font-family : 순차적으로 적용 AppleSDGothic...이 없으면 Malgun Gothic, Malgun Gothic이 없으면 맑은고딕 ... 이런식으로*/
font-family: "Nanum Gothic", AppleSDGothicNeo-Regular, "Malgun Gothic",
"맑은 고딕", dotum, "돋움", sans-serif; color: #222; font-size: 13px; line-height: 1.5; }
/*폰트 스타일 초기화*/
em { font-style: normal; }
/* 블릿기호 초기화
(메뉴 앞에 숫자(1. 2. 3. ...)가 나오지 않게 */
dl, ul, li, ol, menu { list-style: none; }
/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 { font-size: 13px; color: #222; font-weight: normal; }
/* IR 효과 */
/* overflow : 지정된 영역에 요소들이 벗어났을 떄 속성을 설정 / overflow: hidden - 지정한 영역에 넘쳐난 요소들을 안보이게 함
text-indent: 문단 들여쓰기 속성을 설정*/
/* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; }
/*position: relative - 요소의 위치를 상대적인 위치 및 기준점으로 설정*/
/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */
.ir_wa { display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%; }
/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
.ir_su { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; }
/* margin, padding */
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt45 { margin-top: 45px !important; }
.mt50 { margin-top: 50px !important; }style.css
@charset "UTF-8"; /*글자가 깨지지 않게 하기 위해*/
/*스킵 내비게이션*/
#skip { position: relative; }
/*position : 요소의 위치를 설정
- static : 요소의 정상적인 위치(기본값)을 설정
- absolute : 요소의 위치를 절대적 값으로 설정
- relative : 요소의 위치를 상대적인 위치 및 기준점으로 설정
- fixed : 요소의 위치를 고정으로 설정*/
#skip a { position: absolute; left: 0px; top: -35px; border: 1px solid #fff; color: #fff; background: #333; line-height: 30px; width: 140px; text-align: center; }
#skip a:active,
#skip a:focus { top: 0; }
/* 레이아웃 */
#wrap { }
/*url() : 배경 그림을 설정하는 속성 / center top : 이미지를 가운데 위로 고정 / repeat-x : x방향으로 반복*/
#header { height: 325px; background: url(../img/header_bg.jpg) center top repeat-x; }
#contents { }
#footer { height: 200px; background: #333; }
/*컨텐츠 레이아웃*/
#cont_nav { background-color: #f6fdff; }
#cont_tit { background-color: #eaf7fd; }
#cont_ban { background-color: #dceff7; }
#cont_cont { background-color: #f6fdff; }
/*컨테이너*/
.container { width: 990px; margin: 0 auto; height: inherit; /*background: rgba(255, 255, 255, 0.3); */}
/* 헤더 */
/*박스구조*/
.header .header-menu { text-align: right; }
/*인라인 구조
인라인 구조는 text-align와 padding이 먹히지 않음
display: inline-block을 사용하여 인라인 속성을 가지고 있는 블록 구조로 만들어주어 padding을 사용*/
.header .header-menu a { color: #fff; padding: 10px 0px 10px 13px; display: inline-block; }
.header .header-menu a:hover { color: #666; }
.header .header-tit { text-align: center; }
/*margin-top : 상단여백 / font-weight : 글꼴 굵기*/
.header .header-tit h1 { background-color: #4aa8d4; font-size: 28px; padding: 5px 20px 6px 20px; display: inline-block; color: #fff; margin-top: 40px; font-weight: normal; text-transform: uppercase; }
.header .header-tit a { display: inline-block; background-color: #2698cb; font-size: 18px; color: #fff; padding: 5px 20px 6px 20px; margin-top: -5px; }
.header .header-icon { text-align: center; margin: 30px; }
.header .header-icon a { width: 60px; height: 60px; display: inline-block; background: url(../img/icon.png); margin: 0 3px; }
/*이미지 스프라이트 기법을 사용하여 불러옴
의미가 있는 이미지인 경우 alt태그를 사용하여 해야하는데 그런경우 포토샵에서 이미지를 하나씩 잘라주어야함. 이미지 스프라이트 효과는 이미지를 하나씩 자를필요없음*/
.header .header-icon a.icon1 { background-position: 0 0; }
.header .header-icon a.icon2 { background-position: 0 -60px; }
.header .header-icon a.icon3 { background-position: 0 -120px; }
.header .header-icon a.icon4 { background-position: 0 -180px; }
.header .header-icon a.icon1:hover { background-position: -60px 0; }
.header .header-icon a.icon2:hover { background-position: -60px -60px; }
.header .header-icon a.icon3:hover { background-position: -60px -120px; }
.header .header-icon a.icon4:hover { background-position: -60px -180px; }
/*float : left로 인한 영역깨짐(height:0) 방지법
1. 깨지는 영역에 똑같이 float: left를 사용한다. (x) --> 모든 박스에 float:left를 사용해야하기 때문에
2. float의 성질을 차단하는 clear: both; 를 사용한닫. (x) --> 어떤 영역이 깨졌는지 찾기 어려움
3. float을 사용한 상위 박스한테 overflow: hidden을 사용합니다. (o) --> 현재는 제일 많이 사용
4. clearfix를 사용합니다. (o)*/
/*전체 메뉴*/
.nav { overflow: hidden; padding: 30px 0; }
/*.nav dic { } : 전체 자식
.nav > div { } : 첫번째 자식만 */
.nav > div { float: left; width: 40%; }
.nav > div:last-child { width: 20%; } /* ie9부터 사용 가능 / .nav > div.last와 같은 의미*/
.nav > div.last { width: 20%; }
.nav > div h3 { font-size: 18px; color: #25a2d0; margin-bottom: 4px; }
.nav > div ol { overflow: hidden; }
.nav > div ol li { float: left; width: 50%; }
.nav > div.last ol li { width: 100%; }
/*text-decoration: 글자 라인 속성을 설정*/
.nav > div ol li a:hover { text-decoration: underline; }
/*타이틀*/
/* position: relative - .tit이 기준점 역할*/
.tit { position: relative; }
/*letter-spacing: 글자 사이의 간격*/
.tit h2 { font-size: 40px; text-align: center; color: #2c94c4; padding: 5px 0; letter-spacing: 2px; font-family: "Nanum Brush Script", cursive; }
/*position: absolute - 요소의 위치를 절대적 값으로 설정 / background: no-repeat - 반복하지 않음*/
.tit .btn { position: absolute; top: 5px; right: 0; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat 0 -600px; }
/*background-position : 백그라운드 이미지의 위치 영역을 설정*/
.tit .btn:hover { background-position: -60px -600px; }
/* 배너 */
/*padding : 위, 오른쪽, 아래, 왼쪽*/
.ban { position: relative; padding: 24px 0 20px; }
.ban a.prev { position: absolute; left: -80px; top: 60px; width: 43px; height: 43px; background: #ccc; background: url(../img/icon.png) no-repeat -150px 0; }
.ban a.next { position: absolute; right: -80px; top: 60px; width: 43px; height: 43px; background: #ccc; background: url(../img/icon.png) no-repeat -150px -43px; }
.ban a.prev:hover { background-position: -193px 0; }
.ban a.next:hover { background-position: -193px -43px; }
.ban ul { overflow: hidden; }
.ban ul li { float: left; width: 330px; }
/*이미지 정렬시에 text-align:를 사용*/
.ban ul li.ban_imgl { text-align: left; }
.ban ul li.ban_img2 { text-align: center; }
.ban ul li.ban_img3 { text-align: right; }
/*border */
.ban ul li img { border: 4px solid #dcdcdc; }
.ban ul li img:hover { border-color: #98bcdc; }
/*contents*/
/*margin과 padding의 차이점 : margin은 object와 화면과의 여백(외부여백)을 말하며, padding은 object내의 내부여백을 의미*/
.cont { overflow: hidden; padding-top: 30px; }
.cont .column { position: relative; float: left; width: 289px; height: 363px; margin: 0 30px 30px 0; padding-right: 30px; }
.cont .column.col1 { border-right: 1px solid #c8c8c8; }
.cont .column.col2 { border-right: 1px solid #c8c8c8; }
.cont .column.col3 { margin-right: 0; padding-right: 0; }
.cont .column.col4 { border-right: 1px solid #c8c8c8; }
.cont .column.col5 { border-right: 1px solid #c8c8c8; }
.cont .column.col6 { margin-right: 0; padding-right: 0; }
.cont .column .ico_img { display: block; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat; position: absolute; left: 0; top: 0; }
.cont .column .ico_tit { padding-left: 70px; font-size: 16px; color: #2c94c4; }
.cont .column .ico_desc { padding-left: 70px; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px; margin-bottom: 15px; }
.cont .col1 .ico_img { background-position: 0 -240px; }
.cont .col2 .ico_img { background-position: 0 -300px; }
.cont .col3 .ico_img { background-position: 0 -360px; }
.cont .col4 .ico_img { background-position: 0 -420px; }
.cont .col5 .ico_img { background-position: 0 -480px; }
.cont .col6 .ico_img { background-position: 0 -540px; }
.cont .col1 .ico_img:hover { background-position: -60px -240px; }
.cont .col2 .ico_img:hover { background-position: -60px -300px; }
.cont .col3 .ico_img:hover { background-position: -60px -360px; }
.cont .col4 .ico_img:hover { background-position: -60px -420px; }
.cont .col5 .ico_img:hover { background-position: -60px -480px; }
.cont .col6 .ico_img:hover { background-position: -60px -540px; }
/*게시판*/
.notice { position: relative; }
.notice h4 { font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold; }
/*overflow: hidden - 지정한 영역 이외에는 아무것도 보이지 않게 / text-overflow: ellipsis - 문자열 끝부분을 "...*으로 설정 / white-space: nowrap - 줄바꿈을 하지 않음
---> 3가지를 전부 사용하면 한줄에 문장을 표현*/
.notice ul li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px; }
.notice ul li a { font-size: 12px; }
.notice a.more { position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px; }
/*게시판2*/
.notice2 { position: relative; margin-top: 15px; }
.notice2 h4 { font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold; }
.notice2 li { overflow: hidden; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px; }
.notice2 li a { float: left; width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice2 li span { float: right; width: 30%; text-align: right; }
.notice2 a.more { position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px; }
/*게시판3*/
.notice3 { position: relative; }
.notice3 h4 { font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold; }
.notice3 li { position: relative; padding: 8px 0 14px 60px; }
.notice3 li img { position: absolute; left: 0; top: 0; width: 50px; border: 1px solid #0093bd; }
.notice3 li a strong { display: block; }
.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; }
/*마우스 오버효과1*/
.notice_hover h4 { font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold; }
.notice_hover ul { overflow: hidden; }
.notice_hover li { float: left; width: 93px; margin-right: 5px; text-align: center; }
.notice_hover li:last-child { margin-right: 0; }
.notice_hover li a span { display: block; position: relative; width: 93px; height: 93px; line-height: 93px; }
.notice_hover li a span img { width: 100%; }
/*visibility : hidden(요소를 보이지 않게 합니다.) , visible(속성의 기본값)*/
.notice_hover li a span em { visibility: hidden; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.7); color: #fff; width: 100%; height: 100%; }
.notice_hover li a span:hover em { visibility: visible; }
.notice_hover li a strong { display: inline-block; padding-top: 3px; font-size: 12px; }
/*마우스 오버효과2*/
.notice_hover2 ul { overflow: hidden; }
.notice_hover2 li { float: left; text-align: center; margin-right: 5px; }
.notice_hover2 li:last-child { margin-right: 0; }
.notice_hover2 li a span { display: block; position: relative; }
.notice_hover2 li a strong { font-size: 12px; }
.notice_hover2 li a span img { width: 93px; height: 93px; }
.notice_hover2 li a span em { visibility: hidden; left: 0; bottom: 0; width: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.7); color: #fff; }
.notice_hover2 li a span:hover em { visibility: visible; }사이트 링크
http://hostingju.dothome.co.kr/web/index.html
WEBSTANDARD SITE
아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니
hostingju.dothome.co.kr
728x90
'프론트엔드 > 웹 표준 사이트 만들기' 카테고리의 다른 글
| 사이트 제작 - 게시판4 (0) | 2021.09.13 |
|---|---|
| 사이트 제작 - 탭메뉴 (0) | 2021.09.10 |
| 사이트 제작 - 게시판3 (0) | 2021.09.08 |
| 사이트 제작 - 게시판2 (0) | 2021.09.06 |
| 사이트 제작 - 게시판1 (0) | 2021.09.06 |