웹표준 사이트 실습 예제 #5 HOME 화면 (수정)

웹접근성과 웹표준 2013. 8. 22. 15:06

웹표준 사이트 실습 예제 #2

1) HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</style>

</head>

<body>

</div>

<li><a href="about.html">ABOUT</a></li>

<li><a href="portfolio.html">PORTFOLIO</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</div>

<p class="caption">새로운 기술을 학습합니다. </p>

</div>

(02)000-0000 팩스(02)000-1111

</address>

</div>

</body>

</html>

2) style.css

@charset "utf-8";

@font-face {

font-family: 'Nanum Gothic';

src: url('../font/nanum.ttf') ;

}

@font-face {

font-family: 'Yanone';

src: url('../font/Yanone.woff') ;

}

html, body {

width: 100%; height: 100%;

}

body, div, p, ul, ol, li, h1, h2, h3, h4 {

padding: 0; margin: 0;

}

ol, ul, li {

list-style: none;

}

img {

border: none;

}

body {

font-family: 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;

font-size: 14px;

line-height: 20px;

color: #676767;

border-top: 7px solid #7CC0CB;

}

.hidden {

display: none;

}

.noVisible {

visibility: hidden;

position: absolute;

font-size: 0;

width: 0;

height: 0;

line-height: 0;

margin: 0;

padding: 0;

background: none;

}

#skipNav a {

display:block; height:1px; width:1px; margin:0 -1px -1px 0; overflow:hidden; font-size:0; line-height:0;

}

#skipNav a:hover, #skipNav a:active, #skipNav a:focus {

width:100%; height:auto; margin:0; padding:5px;

font-size:12px; line-height:1; text-decoration:none; text-align: center;

}

#wrap {

width: 960px;

margin: 0 auto;

}

#header {

width: 100%;

padding: 30px 0;

}

#logo, #logo a {

float: left;

}

#menu {

z-index: 999;

float: right;

margin: 23px 0 0 0;

}

#menu li {

display: inline;

margin: 0 0 0 20px;

}

#menu li a {

font-family: 'Yanone', 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;

font-size: 24px;

color: #999;

text-decoration: none;

text-transform: uppercase;

}

#header:after {

display: block;

content: "";

clear: both;

}

#campaign {

position: relative;

}

#campaign .caption {

z-index: 500;

position: absolute;

bottom: 72px;

left: 0;

padding: 20px;

background: #7CC0CB;

background: rgba(124,192,203,0.7);

color: #FFF;

font-size: 22px;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);

}

#campaign img {

display: block;

}

#footer {

padding: 20px 0 15px;

margin-top: 70px;

background-color: #7CC0CB;

font-size: 0.9em;

text-align: center;

font-style: normal;

color: #fff;

clear: both;

}

#contents:after {

display: block;

content: "";

clear: both;

}

/* 메뉴에 현재 문서 표시 */

/* 타이틀 */

#contents h1 {

font-family: 'Yanone', 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;

}

/* 메뉴 현재 문서 색 바꾸기 */

#menu li.current a{color:#7cc0cb;} /*개별성값 때문에 그냥 .current만 쓰면 적용이 안되는 문제있어 개별성값을 높이기 위해 자세하게 기술하여 우선순위를 높여줄 것*/

/* 타이틀 */

#contents h1{font-size:40px;line-height:40px;;border-bottom:3px solid #888;text-transform: uppercase;padding-bottom:20px;margin-bottom:20px;

text-shadow:3px 3px 3px; #ccc;}/*무조건 대문자로 바꿔주는text-transform: uppercase;사용 */

/* 3단 나누기 */

.onethird{float:left;width:306px;margin-right:21px;}

.last{margin-right:0;} /* onethird last 이렇게 클래스 2개 지정도 가능 */

#contents h2{font-size:18px;margin-bottom:15px;

word-spacing:2px; /* 자간조절 css(ie8이상) */

}

/* portfolio li 레이아웃 잡기 */

.portfolio ul{margin-left:-6px;}

.portfolio ul li {float:left;width:235px;height:210px;margin: 0 0 6px 6px;

-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;

background:#ccc;

-moz-box-shadow:2px 2px 4px #888;-webkit-box-shadow:2px 2px 4px #888;box-shadow:2px 2px 4px #888;

}

.portfolio ul li img{border-top-left-radius:10px;border-top-right-radius:10px;}

.portfolio ul li p{text-align:center;padding:15px 0;}

/* contact li 레이아웃 잡기 */

.oneharf, .twohalf{float:left;width:480px;}

3) font.css

@font-face {

font-family: 'Nanum Gothic';

src: url('../font/nanum.ttf') ;

}

@font-face {

font-family: 'Yanone';

src: url('../font/Yanone.woff') ;

}

저작자표시

'웹접근성과 웹표준' 카테고리의 다른 글

모바일 웹사이트 구축과 반응형 웹 (0)	2013.08.24
네이버 검색을 이용한 input바 만들기 (0)	2013.08.23
CSS3를 쉽게 사용할 수 있는 CSS 3.0 MAKER (0)	2013.08.21
CSS 하위브라우저 대응기법 (0)	2013.08.20
웹표준 사이트 실습 예제 #4 CONTACT 화면 (0)	2013.08.19