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