CSS FAQ | ../ |
CSS가 뭐죠..? |
Cascading이 무슨 뜻이죠..? |
Style 사용 간략히 보기 |
<font face="굴림" color="green">페이지의 구성물인 글자들을 다루는 <font> 택에게 구성물의 형식을 다루는 속성에 각 값을 지정하여 원하는 페이지를 만들 수 있습니다. CSS는 이들 구성물을 지정하는 택, 구성물의 형식을 지정하는 속성들을 다룹니다.
H3 { font-family: 굴림; color: green; }
위의 style 구문은 <H3> 택의 글자들을 색상은 초록색으로 글꼴은
"굴림"으로 지정하게 합니다. 위의 <font> 택의 각 속성과 CSS 구문을 비교하면 아래의 식으로 나타낼 수
있습니다. | 택의 속성 | CSS 구문 |
| <font face="굴림"> | font-family: 굴림 |
| <font color="green"> | color: green |
위의 기능만 있다면 택의 속성과 CSS 구문의 차이점을 느낄 수 없을 것입니다. 하지만 CSS를 사용하여 택 하나에 지정할 수 있고 페이지에 있는 모든 택에게 지정할 수도 있습니다. 더 나아가 사이트의 전체 페이지에 적용할 수도 있습니다.
페이지에 <H3> 택이 3개가 있는데 글꼴을 "굴림"으로 색상은 초록색으로 지정할려면 아래의 식으로 적어야 합니다.
<h3><font face="굴림" color="green"> h3 택 속의 초록색 굴림글자</font></h3> <h3><font face="굴림" color="green"> h3 택 속의 초록색 굴림글자</font></h3> <h3><font face="굴림" color="green"> h3 택 속의 초록색 굴림글자</font></h3>으로 <H3> 와 <font> 택을 두개 같이 사용해야 합니다. 하지만 style을 사용하면 하나의 택에만 지정하면 됩니다.
H3 { font-size: 12pt; font-family: 굴림; color: green; }
<h3> h3 택 속의 초록색 글자</h3>
<h3> h3 택 속의 초록색 글자</h3>
<h3> h3 택 속의 초록색 글자</h3>
위의 style을 사용하지 않은 구문과 비교하면 <font></font> 택이 없어진것을 알 수 있습니다.
여기까지는 별로 차이가 나지 않습니다. 근데, style은 <h3> 택 뿐만이 아니라 <P>, <B>,
<BODY>, <DIV> 등 모든 html 택에 지정할 수가 있습니다.
body { font-size: 12pt; font-family: 굴림; color: green; }
로 지정하면 <body></body> 안에 있는 글자들을 가진 택들에게 style을 상속해 줍니다.
그래서 이것 하나로 페이지의 모든 글자에게 style을 지정합니다. 개개의 택에게 지정할 때보다
문서의 크기를 줄일 수 있고 이런 지정을 여러 페이지에 동시에 지정할 수도 있습니다. 그래서
페이지의 양식을 관리하기가 편리해 집니다.
<H3> 택의 글자들의 크기가 얼마인지 아세요..? 잘 모를것입니다. 사용자 마다 브라우저에 지정한 글꼴 크기가 다르고 모니터의 해상도가 다르기 때문에 정확한 수치를 예상할 수 없습니다.
h3 { font-size: 12pt; }
를 지정한 <h3> 택의 글자의 크기는 바로 12pt입니다. 즉, 정확한 크기를 지정할 수 있습니다.
단위도 px, pt, em, cm, inch 등 여러가지가 있어서 미세한 크기조절도 가능하여 정확한 페이지를 만들 수 있습니다.
그리고 더 나아가 이들 style을 지정한 택에 JavaScript같은 SCRIPT를 사용하여 색상이나 위치, 크기같은
style 자체를 변경할 수 있는 동적인 페이지를 만드는 DHTML의 기초가 됩니다.
STYLE 사용하기 |
<STYLE>
페이지 전체에 style을 지정시 사용하는 택입니다. <STYLE></STYLE>으로 사용할 style을 가질 수 있는 택입니다.
<HEAD>
<STYLE type="text/css">
P { color: red }
</STYLE>
</HEAD>
<BODY>
<P>나는 빨간색입니다. </P>
</BODY>
</HTML>
로 사용할 style을 <HEAD> 택 안에 넣어줍니다. type="text/css"은 style의 언어를 지정하는 것으로
브라우저에 따라서 사용할 수 있는 style 언어가 있는데 그것을 지정합니다. NN4에서는
type="text/javascript"라는 JavaScript 구문의 css 언어가 있습니다.
지정하지 않으면 기본으로 "text/css"으로 지정됩니다.
<LINK>
외부 화일을 연결하여 사용하는 <LINK> 택으로 사용하는 방법입니다. 외부 화일을 만드는 방법은 메모장 같은 문서편집기로 style 구문을 작성하고 확장자를 *.css로 지정하면 됩니다. style 구문만을 작성하지 <STYLE> 같은 다른 HTML 택은 필요없습니다. 그리고 화일을 <LINK> 택의 href 속성에 지정합니다.
P { color: red }
위의 줄의 내용을 적은 화일을 "my.css" 로 만들었다면 아래로 지정하면 됩니다.
<HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="my.css"> </HEAD> <BODY> <P>나는 빨간색입니다. </P> </BODY> </HTML>
<택>
<LINK>, <STYLE> 택 외에도 직접 택에게 지정합니다. 택에 style 속성으로 사용합니다.
<P style="color:red">나는 빨간색입니다. </P>
@import url()
<LINK> 택과 비슷합니다. nn4에서는 지원하지 않습니다.
<HEAD> <STYLE> @import url(사용할 외부화일.css) </STYLE> </HEAD>
링크 밑줄 없애기 |
A { text-decoration: none }
으로 지정하면 페이지의 모든 링크들의 밑줄을 없앱니다. 단순히 링크의 민줄을 없에는 것 뿐만이 아니고
방문한 링크, 방문하지 않은 링크에 다른 양식을 지정할 수도 있습니다.
A:link { text-decoration: none; color: red}
A:visited { text-decoration: none; color: yellow}
로 하면 링크들을 밑줄을 없애고 방문하지 않은 링크들의 색을 빨간색으로 방문한 링크의 색은 노란색으로
지정합니다.
링크들에게 style로 양식을 지정하는 것은 세심한 주의를 해야합니다. 기존의 브라우저는
모든 링크에 밑줄이 있었고 링크의 색은 파란색이었습니다. 대부분의 인터넷 사용자가 이런 습관이 들어 있습니다.
그래서, 링크의 색은 가급적 파란색 계통의 색을 사용하고 다른 색을 사용하고자 한다면 페이지의 다른
글자의 색과 비교를 하여 잘 구분되는 색을 사용해야 합니다. 그렇지 않으면 어느것이 링크고 어느것이
페이지의 글자인지 해깔리게 됩니다. 링크의 밑줄도 마찬가지입니다.
inline, block 택 |
Block 택 : ADDRESS BLOCKQUOTE BODY DD DIV DL DT FIELDSET FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 IFRAME NOSCRIPT NOFRAMES OBJECT OL P UL APPLET CENTER DIR HR MENU PRE LI TABLE TR THEAD TBODY TFOOT COL COLGROUP TD TH CAPTION
Inline 택: block 택 외의 모든 택입니다. 예를들면 EM, I, B, U, BIG, SMALL, SUB, SUP, A, IMG, SPAN, INPUT, SELECT, TEXTAREA 같은 택들입니다.
INS, DEL은 사용하는 식에 따라서 block, inline 둘다 될 수 있습니다.
<P>, <P></P> |
<P style="margin-left:10%"> block으로 지정됩니다. </P>는 "block으로 지정됩니다." 문장이 페이지 왼쪽에서 페이지 넓이의 10% 만큼 떨어져 있습니다.