Book

[내가 정리한] 헤드퍼스트 HTML with CSS & HTML

Ozahir 2007. 8. 4. 09:37

나중에 스스로 보려고 정리해본 것이므로.
다른사람들에게는 도움이 될 지 모르겠다.
내나름대로 축약한 내용들이 많고.. 아주 잘 알고있는내용은
과감히 생략했으므로.. 필요한 사람만 보는것이 좋을 것 같다.

#########################################3장 블록 만들기
<ol> :  ordered list
<ul> :  unordered list
<li> : list item
* <ol>과<li>엘리먼트는 항상 같이 사용해야 한다. <li>로 항목을 식별하고 <ol>은 이들을 묶는다.
* 엘리먼트가 다른 엘리먼트 안에 들어가는 것을 중첩(nesting)이라 한다. 예를 들어 <body>안에 <p>...
<dl></dl>, <dt></dt>, <dd></dd> : 정의리스트?? (definition리스트)

#########################################4장

툴팁 <a href="링크" title="짧은 문장(스크린 리더기 쓰는 시각장애자에게 유용하다.)"></a>
<img src="" alt="설명">

목적지 앵커의 착륙지점 지정 : <a id="chai">Chai Tea, $1.85</a>
착륙지점으로 이동 : <a href="index.html#chai">See Chai Tea</a>
맨위로 이동 : <a href="#top">Back to Top</a>

#########################################5장
GIF파일에서 matte를 깔아서 투명그림이나 텍스트를 더 부드럽게 보이게 할 수 있다.
matte의 색을 배경색과 일치시켜라.

#########################################8장

class에 대한 이야기

#green클래스를 사용해서 텍스트를 다음과 같이 녹색으로 변경할 수 있다.
p.greentea{
 color: green;
}

#blockquote엘리먼트에도 적용하려면 다음과 같이 한다.
blockquote.greentea, p.greentea{
 color: green;
}

#.greentea클래스에 있는 모든 엘리먼트가 한가지 스타일을 갖도록 하려면 다음과 같이 하면 된다.
.greentea {
 color: green;
}

#사용할때는 <p class="grean tea">

#충격적인 사실!!
<p class="greentea raspberry blueberry">처럼 여러개의 클래스를 이용할 수 있다.
부가로, 만일 위의 세개의 클래스가 모두 색상을 지정하고 있다면, 마지막에 지정한 색(css에서 가장 아래에 위치하는 색)이 적용될 것이다.


#########################################9장 폰트와 색으로 장식하기(예시만 나열하겠다.)
body {
 font-family: Verdana, Genava, Arial, sans-serif;
 font-weight: bold;
 text-decoration: underline;
 background-color: rgb(80%, 40%, 0%);
 background-color: rgb(204, 102, 0);
 background-color: #cc6600;
 background-color: #c60;
}
em {
 text-decoration: none;
}
em {
 text-decoration: underline overline;
}
h1, h2 {
 font-weight: normal;
 color: #c60;
 border-bottom: thin-dotted #888888;
}
#########################################10장

# line-height: 1.6em; ←이렇게 하면 줄간격이 폰트크기의 1.6배가 된다.



#중첩된 테이블 제목을 위해 css재정의 하기
table table th {
 background-color: white;
}

#리스트의 스타일
li {
 list-style-type: disc;
}
li {
 list-style-type: circle;
}
li {
 list-style-type: square;
}
li {
 list-style-type: none;
}

#커스텀 마커
li {
 list-style-image: url(images/backpack.gif);
 padding-top: 5px;
 margin-left: 20px;
}

p#guarantee {
 font-family: "문체부 쓰기 흘림체";
 color: #444;
 line-height: 1.9em;
 border-color: white;
 border-width: 1px;
 border-style: dotted;
 background-color: #a7cece;
 padding: 25px;
 padding-right: 180;
 margin: 30px;
 margin-right: 250px;
 background-image: url(11.gif);
 background-repeat: no-repeat;
 background-position: top right;
}


p.guarantee이런거나
p#guarantee이런게 뭐가다르게?? class와 id의 차이..

#########################################11장

#elixirs {
 width: 200px; <---컨텐츠의 넓이만을 명시한다. 높이는 설정도 가능하지만
         작게 설정하면 잘릴 수 있으므로 기본값인 auto가 되도록 명시하지 않는다.

}

div내부의 h2에 대한 속성을 넣으려면

div h2 {
 color: black;
}

elxirs라는 엘리먼트의 h2에 대한 속성을 넣으려면

#elixirs h2 {
 color: black;
}

***줄여쓰는법

margin: 0px 20px;
border: 1px solid #007e7e;
background: white url(images/cocktail.gif) repeat-x;
font: small/1.6em Verdana, Helvetica, Arial, sans-serif;

p#guarantee {
 font: 15px/1.9em "문체부 쓰기 흘림체" #444;
 border: 1px dotted #007e7e;
 background: #a7cece url(11.gif) no-repeat;
}

#elixirs a:link {
 color: #007e7e;
}
#elixirs a:visited {
 color: #333;
}
#elixirs a:hover {
 color: #0d5353;
}
이런식으로 a:hover라고는 적지만 이를 불러서 사용할 때 hover를 명시하지 않는다.
이건 브라우저가 알아서 하는 것이다. 이를 pseudo-class라고 한다.

#########################################12장
인라인 엘리먼트 두개가 인접할 경우.
양쪽의 마진을 더한만큼 떨어진다.

블록 엘리먼트 두개가 인접한 경우.
합쳐진 마진의 높이는 두개 중에서 큰 값의 마진이 높이가 된다.

길게 적을 필요가 없다.
body{margin:0px;} <--주위의 마진0으로 설정.

#header{}
#main{}
#sidebar {
 float: right;
}
#footer {
 clear: right; <-- footer의 오른쪽에는 떠다니는 콘텐츠가 허용되지 않는다는 것을 명시함.
}

* gutter: 도랑이란 뜻이지만, 인쇄에서는 '여백'으로도 쓰임

컨텐츠를 중앙으로..
#allcontent {
 width: 800px
 padding-top: 5px;
 padding-bottom: 5px;
 background-color: #675c47;

}