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

웹접근성과 웹표준 2013. 8. 19. 00:00

웹표준 CSS 실습 #1

1) HTML

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

<head>

</head>

<body>

</div>

<li class="current"><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>

<h1>about</h1>

<p>가족의 웃음이 담긴 따뜻한 사진에도, 친구와 함께 듣는 즐거운 음악에도, 연인을 위해 정성들인 맛있는 음식에도 일상의 작은 감동이 만드는 행복함이 있습니다. 마음을 나누는 행복한 생활 속에 삼성이 언제나 함께 하고 있습니다. 신뢰와 사랑으로 성장해 온 삼성은 더 좋은 세상을 위해 노력합니다.</p>

</div>

<h2>사람과 환경을 존중하는 지속가능경영을 실천합니다.</h2>

<p>장기적인 관점에서의 성장과 번영을 위한 친환경 녹색경영과 사회적 책임을 실천합니다. 기업시민으로서 사회구성원들과 서로 돕고 사랑을 나누는 삼성은 사랑,기업,사회, 환경의 조화로운 발전을 위해 노력합니다. 우리 아이들의 밝고 건강한 미래를 위해 삼성은 아름다운 세상을 만들어 갑니다.</p>

</div>

<p>전자,기계,화학,금융 등 대한민국을 뛰어 넘어 세계 속에 우뚝 선 우리의 대표 브랜드 삼성. 글로벌 일류기업으로서 최고의 기술력과 최상의 서비스, 새로운 미래를 위한 끊임없는 도전과 혁신으로 생각의 변화를 주도하고 있습니다. 삼성은 항상 여러분의 생활 속에 함께 합니다.</p>

</div>

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

</address>

</div>

</body>

</html>

2) 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이상) */

}

저작자표시

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

웹표준 사이트 실습 예제 #4 CONTACT 화면 (0)	2013.08.19
웹표준 사이트 실습 예제 #3 PORTFOLIO 화면 (0)	2013.08.19
CSS3: 텍스트/박스에 그림자 효과, 박스 테두리 라운드 효과 (0)	2013.08.18
네이버 널리에서 제공하는 웹 접근성 체크 (0)	2013.08.17
웹 접근성 검사도구 (0)	2013.08.17