*
{
margin:0px;
padding:0px;
border:0.1px dashed #ddd;
}
a:link{text-decoration:none;color:#222;}
a:hover{text-decoration:underline;}
body
{
text-align:center;
font-size:1em;
font-family:sans-serif;
line-height:1.3em;
}
#wraper
{
width:1024px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#title
{
text-align:right;
font-size:0.8em;
font-style:italic;
word-spacing:0.2em;
padding:20px 20px 20px;
}
.topText
{
text-indent:7%;
font-weight:bold;
margin:10px;
}
#header
{
width:80%;
margin-left:30px;
font-size:0.9em;
}
.headerList
{
margin-left:30px;
font-size:0.85em;
word-spacing:-0.2em;
}
.headerListFooter
{
margin:5px auto 5px;
}
#content
{
width:80%;
margin:10px 30px 10px;
font-size:0.9em;
}
.contentList
{
padding-top:10px;
padding-bottom:10px;
padding-left:30px;
font-size:0.9em;
line-height:1.6em;
}
.contentList li
{
}
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sunday Experiance</title>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
<meta http-equiv = "Content-Language" content = "ko" />
<link rel = "stylesheet" media = "screen" type = "text/css" href = "_Css_Files/basic.css" />
<style type = "text/css">
</style>
</head>
<body>
<div id = "wraper">
<h4 id = "title"> Stylein'CSS 망침 by 송중식과, 김유미</h4>
<h1 class = "topText">XHTML 의 세계로 어서오센</h1>
<div id = "header">
CSS 는 물론 어떤 디자인도 적용되어 있지 않은 네이티브 XHTML 페이지다. 비록 디자인은 되어있지 않지만 컨텐츠가 구조적으로
잘 만들어져 있음을 알수 있데. 각 부분에 적합한 요소를 사용하여 제대로 XHTML 페이지를 만드는것이 가장 선행되어야할 작업이다.
어떻게 하면 유효한 XHTML 페이지를 만들수 있을까나??
<ol class = "headerList">
<li>DOCTYPE 을 선언한다</li>
<li>XML namespace 를 선언한다</li>
<li>컨텐츠 타입을 선언한다</li>
<li>모든 태그는 잘 닫는다</li>
<li>인라인 태그는 블럭 레벨 태그를 감쌀수 없다</li>
<li>P 태그는 p 태그를 감쌀수 없다</li>
<li>태그는 소문자로 쓴다</li>
<li>태그의 기능을 확장할때는 속성에 반드시 값을 넣는다</li>
<li>CSS 속성은 세미콜론(;) 로 마무리한다.</li>
</ul>
<p class = "headerListFooter"><a href = "#">더 많은 정보는 여길 클릭하센</a></p>
</div>
<div id = "content">
아래에 있는 웹페이지의 링크들은 <span class = "w3c">W<sup>3</sup>C</span>(World Wide Web Consoritum)에서 제공하는 유용한 도구들로 웹페이지를 개발할때
도움이 될것이다.
<ul class = "contentList">
<li><a href = "#">W3C's XHTML 유효성 검사</a></li>
<li><a href = "#">W3C's CSS 유효성 검사</a></li>
<li><a href = "#">XHTML 리소스</a></li>
<li><a href = "#">CSS 리소스</a></li>
</ul>
</div>
<div id = "footer">
© 2007 Charies Wyke - Smith. Modify © 2009 Ssong.
</div>
</div>
</body>
</html>
font 의 em 은 부모로부터 상속 받은 값을 기준으로 변화
하지만 line-height 속성은 현재 텍스트의 크기를 기준으로 변화.
물론 지정해준 값이 없을 경우는 상위 요소로부터 상속받은 값 적용
'코드 > Html & CSS' 카테고리의 다른 글
| :first-letter, :first-line (0) | 2011.08.26 |
|---|---|
| img 요소 아래단 공백 뜨는 현상 (Img - bottom margin) (0) | 2011.06.11 |
| text-indent 상속. (0) | 2011.06.04 |
| 상위 요소 값의 상속 (0) | 2011.05.28 |
| Inherit, 자식 선택자. (0) | 2011.05.28 |