<?xml version="1.0" encoding="UTF-8" ?>
css.zip<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>선택된 상태 표현하기</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
margin: 0; /* 상하좌우 마진을 없앤다. */
padding: 0; /* 상하좌우 패딩을 없앤다. */
font-size: small; /* 기본 글꼴 크기를 small로 지정한다. */
}
#nav{
float: left; /* li항목을 둘러싸고 있는 ul항목에 width를 설정하고, float 속성을 지정해야만 배경이 제대로 표시된다. */
width: 720px; /* 너비를 720픽셀로 지정한다. 전체 너비는 너비(720픽셀) + 왼쪽패딩(46픽셀) = 766픽셀이 됩니다. */
width: 100%; /* 너비를 브라우져 전체 너비로 지정한다. */
margin: 0; /* 상하좌우 마진을 없앤다. */
padding: 10px 0 0 46px; /* 컨텐츠를 상(10픽셀) 우(0픽셀) 하(0픽셀) 좌(46픽셀)만큼 들여쓴다. */
list-style: none; /* 리스트 스타일을 없앤다. */
background: #ffcb2d url(img/nav_bg.gif) repeat-x top left; /* 네비게이션 메뉴바가 입체적으로 보이도록 1픽셀짜리 nav_bg.gif 이미지를 위쪽에 깐다. */
}
#nav li{
float: left; /* 네비게이션 메뉴를 가로형으로 표시하기 위해서 float 속성을 사용한다. */
margin: 0; /* 상하좌우 마진을 없앤다. */
padding: 0; /* 상하좌우 패딩을 없앤다. */
font-family: "Lucida Grande", sans-serif; /* 글꼴을 설정한다. */
font-size: 80%; /* 글꼴 크기를 기본 글꼴 크기의 80%로 설정한다. */
}
#nav a{
float: left; /* <a> 엘리먼트를 한 줄에 나오게 하기위하여 float 속성을 지정한다. */
display: block; /* 탭 전체를 클릭할 수 있도록 <a>엘리먼트에 display: block; 속성을 지정한다. */
margin: 0 1px 0 0; /* 탭의 오른쪽에 1픽셀만큼의 공간이 생기도록 설정한다. */
padding: 4px 8px; /* 탭에 상하(4픽셀) 좌우(8픽셀)만큼의 패딩을 추가한다. */
color: #333; /* 컨텐츠 색상을 지정한다. */
text-decoration: none; /* 텍스트의 장식(여기서는 밑줄)을 없앤다. */
border: 1px solid #9b8748; /* #9b8748 색상의 1픽셀짜리 실선 테두리를 만든다. */
border-bottom: none; /* 아랫쪽 테두리를 없앤다. */
background: #f9e9a9; /* 배경색을 지정한다. */
background: #9fe9a9 url(img/off_bg.gif) repeat-x top left; /* 배경색(#9fe9a9)을 지정하고 배경이미지를 수평방향(repeat-x)으로 반복해서 깐다. */
}
/* #nav안에 a태그들 에게 hover 마우스가 올라갔을때 효과를 주라! */
#nav a:hover, body#intro #t-about a{
font-weight: bolder; /* 글꼴을 진하게 설정한다. */
color: #333; /* 컨텐츠 색상을 지정한다. */
padding-bottom: 5px; /* 바닥 패딩값을 4픽셀에서 5픽셀로 늘린다.배경 테두리선이 올라오게 되는 효과가 생긴다. */
border-color: #727377; /* 테두리 색상을 설정한다. */
background: #fff url(img/on_bg.gif) repeat-x top left; /* 배경색(#fff)을 지정하고 배경이미지를 수평방향(repeat-x)으로 반복해서 깐다. */
}
</style>
</head>
<body id="intro">
<ul id="nav">
<li id="t-intro"><a href="/">이 사이트에 대하여</a></li>
<li id="t-about"><a href="about.html">회사 소개</a></li>
<li id="t-news"><a href="news.html">새로운 소식</a></li>
<li id="t-sponsors"><a href="sponsors.html">후원 안내</a></li>
</ul>
</body>
</html>
