CSS 사용법 - HTML문서에 CSS를 사용하는 3가지 방법
HTML문서에 CSS를 사용하는 방법은 3가지가 있습니다.
- 외부 스타일 시트(External Style Sheet)
- 내부 스타일 시트(Internal Style Sheet)
- HTML태그내에 스타일 지정(Inline Styles)
외부 스타일 시트(External Style Sheet)
css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.
| <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.
반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다. 그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.
그럼에도 불구하고 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 합니다.
내부 스타일 시트(Internal Style Sheet)
HTML문서내에서 <head>와 </head>사이에 스타일을 정의하는 방법입니다.
| <head> <style type="text/css"> <!-- body {font-size:9pt;} //--> </style> </head> |
HTML문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.
HTML태그내에 스타일 지정(Inline Styles)
위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다.
| <p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p> |
|
이 문단의 색상은 회색으로 지정됩니다. |
내용과 스타일의 분리 그리고 이로 인한 스타일 일괄변경의 효율성 측면으로 볼때는 바람직하지 않는 방법입니다.
그러나 위의 소스에서도 보듯이 직관적으로 사용이 가능하다는 장점이 있다
CSS 문법
CSS 문법
CSS 구문을 이해하기 위해서는 선택자(selector), 속성(property) 그리고 속성값(value) 이 3가지를 이해하여야 합니다.
CSS 구문은 아래의 그림처럼 선택자(selector)와 선언으로 구성되며, 선언은 속성(property)과 값(value)으로 구성됩니다.
CSS 구문은 아래의 그림처럼 선택자(selector)와 선언으로 구성되며, 선언은 속성(property)과 값(value)으로 구성됩니다.
우리말로 선택자라고 하면 어감이 좀 이상한데 보통의 경우 선택자는 HTML 태그 중 하나 입니다. 위의 그림에서는 <p>태그가 선택자로 사용되었습니다.
CSS 고급단계에서는 속성의 상속(inherit)과 겹침(cascade)을 제대로 이해해야 하기에 이 선택자(selector)의 개념이 아주 중요해집니다.
위에서 제시한 예제의 의미는 문단(p)의 색상(color)을 red로 지정하라는 말입니다.
속성과 속성값은 계속적으로 추가가 가능합니다. 이때 ; 기호를 사용하여 추가합니다.
CSS 고급단계에서는 속성의 상속(inherit)과 겹침(cascade)을 제대로 이해해야 하기에 이 선택자(selector)의 개념이 아주 중요해집니다.
위에서 제시한 예제의 의미는 문단(p)의 색상(color)을 red로 지정하라는 말입니다.
속성과 속성값은 계속적으로 추가가 가능합니다. 이때 ; 기호를 사용하여 추가합니다.
| p {color:red ; width:200} |
선택자 역시도 추가할 수 있습니다. 이때 , 기호를 사용하여 추가합니다.
| p, td {color:red ; width:200} |
문단(p)뿐 아니라 테이블의 셀(td)의 스타일도 {}안의 내용처럼 지정하라는 의미입니다.
CSS 주석
텍스트에 적용하는 CSS 속성
CSS 텍스트 color
CSS 텍스트 color
CSS 텍스트 backgroud-color
CSS 텍스트 line-height
그러나 라인의 높이라기 보다는 줄간격으로 해석하는게 좋습니다. 배경색을 지정하지 않는 경우 leight-height를 10픽셀로 지정하는건 별 의미가 없습니다.
한글의 경우 line-height를 100% 이상으로 지정하여 줄사이의 간격을 좀 띄우는 편이 가독성에 좋습니다. 아래 예제는 줄사이의 간격을 확인하기 위해서 문단의 width를 200픽셀로 좁게 만들어 보았습니다.
CSS 텍스트 letter-spacing
CSS text-align
CSS text-decoration
CSS 주석
css 파일의 내용이 많아지면 이를 관리하기 위해서 주석을 활용하면 좋습니다.
주석은 소스상에서만 표시될뿐 실제적으로는 아무 영향을 미치지 않는 코드입니다.
css의 주석은 /*로 시작하여 */로 끝납니다.
|
<style type="text/css">
<!-- /*강조하고 싶은 문단에 red 클래스를 적용한다.*/ .red {color:red} //--> </style> <p class="red">이 문단의 id는 red입니다.</p>
<p>일반적인 문단입니다.</p> |
텍스트에 적용하는 CSS 속성
HTML문서에서는 아무래도 텍스트가 가장 많은 비중을 차지합니다.
HTML태그는 텍스트의 스타일 표현에 한계가 있으므로 반드시 CSS를 익혀서 텍스트의 스타일을 지정하여야 합니다.
텍스트의 스타일을 지정하기 위한 속성들은 아래와 같습니다.
| 속성 | 속성값 | 설명 |
| color | red, #FF0000 | 텍스트 색상 |
| direction | ltr, rtl | 텍스트 방향 |
| line-height | 150% | 줄 간격 |
| letter-spacing | -0.1px | 글자 간격 |
| text-align | left, right, center, justify | 텍스트 정렬 |
| text-decoration | none, underline, overline, line-through, blink | 텍스트 장식 |
| text-indent | 20px | 들여쓰기 |
| text-transform | none, capitalize, uppercase, lowercase | 대소문자 지정 |
| word-spacing | 1px | 단어 간격 |
CSS 텍스트 color
color 속성을 이용하여 텍스트의 색상을 지정할 수 있습니다.
| <p style="color:red">이 문단은 붉은색으로 지정됩니다.</p> |
|
이 문단은 붉은색으로 지정됩니다. |
한 문단 전체에 지정하지 않고 일부에만 색상을 지정할려면 <span>태그를 사용하여 지정하면 됩니다.
| <p>문단 전체의 색을 지정하지 않고 <span style="color:red">일부에만</span> 색을 지정할 수 있습니다.</p> |
|
문단 전체의 색을 지정하지 않고 일부에만 색을 지정할 수 있습니다. |
테이블 안에도 사용이 가능합니다.
| <table> <tr> <td style="color:red">이 셀안의 텍스트트 붉은색으로 지정됩니다.</td> </tr> </table> |
|
하이퍼 링크의 색상을 지정할 수도 있습니다.
| <style type="text/css"> a {color:red} a:hover {color:green} </style> <p><a href="http://www.hoemjjang.com">홈짱닷컴</a>은 홈페이지 제작을 위한 가이드 역할을 합니다.</p> |
CSS 텍스트 color
color 속성을 이용하여 텍스트의 색상을 지정할 수 있습니다.
| <p style="color:red">이 문단은 붉은색으로 지정됩니다.</p> |
|
이 문단은 붉은색으로 지정됩니다. |
한 문단 전체에 지정하지 않고 일부에만 색상을 지정할려면 <span>태그를 사용하여 지정하면 됩니다.
| <p>문단 전체의 색을 지정하지 않고 <span style="color:red">일부에만</span> 색을 지정할 수 있습니다.</p> |
|
문단 전체의 색을 지정하지 않고 일부에만 색을 지정할 수 있습니다. |
테이블 안에도 사용이 가능합니다.
| <table> <tr> <td style="color:red">이 셀안의 텍스트트 붉은색으로 지정됩니다.</td> </tr> </table> |
|
하이퍼 링크의 색상을 지정할 수도 있습니다.
| <style type="text/css"> a {color:red} a:hover {color:green} </style> <p><a href="http://www.hoemjjang.com">홈짱닷컴</a>은 홈페이지 제작을 위한 가이드 역할을 합니다.</p> |
CSS 텍스트 backgroud-color
backgroud-color 속성을 사용하면 배경색을 지정할 수 있습니다.
| <p style="background-color:yellow;">문단의 배경색을 yellow로 지정</p> |
|
문단의 배경색을 yellow로 지정 |
color 속성과 마찬가지로 문단의 일부에만 배경색을 지정할려면 <span>태그를 사용하면 됩니다.
| <p>문단의 <span style="background-color:yellow;">일부분의</span> 배경색을 yellow로 지정</p> |
|
문단의 일부분의 배경색을 yellow로 지정 |
테이블에도 배경색을 지정하는 경우가 많습니다.
| <table border="1"> <tr> <td style="background-color:yellow;">background-color</td> </tr> <tr> <td>테이블의 배경색을 지정하는데 사용하는 속성입니다.</td> </tr> </table> |
|
CSS 텍스트 line-height
라인의 높이를 지정합니다.
화면상에서 확인하기 쉽게 문단에 배경이미지를 적용해 보겠습니다.
화면상에서 확인하기 쉽게 문단에 배경이미지를 적용해 보겠습니다.
| <p style="line-height: 10px; background-color:gray;">라인의 높이를 10픽셀로 지정</p> <p style="line-height: 30px; background-color:gray;">라인의 높이를 30픽셀로 지정</p> |
|
라인의 높이를 10픽셀로 지정
라인의 높이를 30픽셀로 지정 |
그러나 라인의 높이라기 보다는 줄간격으로 해석하는게 좋습니다. 배경색을 지정하지 않는 경우 leight-height를 10픽셀로 지정하는건 별 의미가 없습니다.
한글의 경우 line-height를 100% 이상으로 지정하여 줄사이의 간격을 좀 띄우는 편이 가독성에 좋습니다. 아래 예제는 줄사이의 간격을 확인하기 위해서 문단의 width를 200픽셀로 좁게 만들어 보았습니다.
|
<p style="width:200 ;">라인의 높이라기 보다는 라인사이의 간격으로 보는것이 좋습니다. 배경색을 지정하지 않은경우 텍스트보다 line-height를 적게 잡는다고 해도(10픽셀) 화면상에는 아무런 변화를 느끼지 못합니다. 그리고 line-height는 %를 단위로 해서 잡는것이 좋습니다.</p>
<p style="width:200 ; line-height:140%;">이 문단은 line-height 속성값으로 140%를 지정하였습니다. 이렇게 하면 줄 사이의 간격이 어느정도 떨어지기에 가독성이 좋아집니다. 한글의 경우 일반적으로 130%~160%정도로 해서 줄 사이의 간격을 늘리는것이 좋습니다.</p> |
아래의 문단은 leight-height를 140%로 지정하였습니다. 위의 문단과 비교해서 줄 사이의 간격이 넓으므로 가독성에 도움이 된다는 사실을 알 수 있습니다.
|
라인의 높이라기 보다는 라인사이의 간격으로 보는것이 좋습니다. 배경색을 지정하지 않은경우 텍스트보다 line-height를 적게 잡는다고 해도(10픽셀) 화면상에는 아무런 변화를 느끼지 못합니다. 그리고 line-height는 %를 단위로 해서 잡는것이 좋습니다.
이 문단은 line-height 속성값으로 140%를 지정하였습니다. 이렇게 하면 줄 사이의 간격이 어느정도 떨어지기에 가독성이 좋아집니다. 한글의 경우 일반적으로 130%~160%정도로 해서 줄 사이의 간격을 늘리는것이 좋습니다. |
CSS 텍스트 letter-spacing
letter-spacing 속성은 글자 사이의 간격을 지정합니다.
한글의 경우 이 간격을 조금 좁혀주면 괜찮습니다.
한글의 경우 이 간격을 조금 좁혀주면 괜찮습니다.
| <p>일반적인 문장</p> <p style="letter-spacing:-2px">글자사이의 간격을 좁힌 문장</p> <p style="letter-spacing:3px;">글자사이의 간격을 넓힌 문장</p> |
|
일반적인 문장
글자사이의 간격을 좁힌 문장
글자사이의 간격을 넓힌 문장 |
CSS text-align
text-align 속성은 텍스트의 정렬을 지정합니다.
| <p style="text-align:left">왼쪽 정렬입니다.</p> <p style="text-align:right">오른쪽 정렬입니다.</p> <p style="text-align:center">가운데 정렬입니다.</p> <p style="text-align:justify; width:200">자동 줄바꿈시 오른쪽 경계선 부분이 정리됩니다. 이 부분은 자동 줄바꿈이 되어야 효과를 확인할 수 있습니다. 그래서 문단의 width 속성을 200픽셀로 좁혀보았습니다.</p> |
text-align의 속성갑으로는 left, right, center, justify 이 4가지를 사용할 수 있습니다.
|
왼쪽 정렬입니다.
오른쪽 정렬입니다.
가운데 정렬입니다.
자동 줄바꿈시 오른쪽 경계선 부분이 정리됩니다. 이 부분은 자동 줄바꿈이 되어야 효과를 확인할 수 있습니다. 그래서 문단의 width 속성을 200픽셀로 좁혀보았습니다. |
CSS text-decoration
text-decoration 속성을 사용하면 텍스트를 몇가지 형태로 꾸밀 수 있습니다.
| <p style="text-decoration:underline">underline 속성값이 적용된 예문입니다.</p> <p style="text-decoration:overline">overline 속성값이 적용된 예문입니다.</p> <p style="text-decoration:line-through">line-through 속성값이 적용된 예문입니다.</p> <p style="text-decoration:blink">blink 속성값이 적용된 예문입니다.</p> |
|
underline 속성값이 적용된 예문입니다.
overline 속성값이 적용된 예문입니다.
line-through 속성값이 적용된 예문입니다.
blink 속성값이 적용된 예문입니다. |
blink 속성값은 인터넷익스플로러(IE)에서는 효과가 나타나지 않습니다. 글자가 깜박이는 효과인데 파이어폭스(FireFox)에서는 제대로 나타납니다.
blink 속성값을 확인하실려면 파이어폭스를 설치하고 확인하면 됩니다.
CSS text-indent
CSS word-spacing
CSS 배경(background)
CSS 배경색(background-color) 지정
CSS 배경이미지(background-image)
CSS Box Model - 경계선(border)
CSS 리스트(list)
[홈페이지 태그]CSS 고급 - 링크 색상
하이퍼링크의 색상 <a>태그에서 바로 적용해도 됩니다.
그러나 마우스를 올렸을때(hover) 효과를 주기위해서 일반적으로 아래와 같은 방법을 더 많이 사용합니다.
a:link는 방문한적이 없는 일반적인 링크를 의미합니다.
a:visited는 방문한 적이 있는 링크를 의미합니다.
a:active는 클릭하는 순간을 의미합니다. 클릭은 순식간에 이루어지기 때문에 이 부분은 구별이 잘 안갑니다.
a:hover는 마우스를 올렸을때를 의미합니다. 위의 예제에서도 볼 수 있듯이 이 부분을 강조를 하는 경우가 많습니다.
[홈페이지 강좌]CSS 고급 - 필터
Glow Filter
DropShadow
참조 SITE : http://blog.empas.com/magarinhee/19043221
CSS text-indent
text-indent 속성은 들여쓰기 효과를 지정합니다. 문단의 첫번째 줄을 지정한 길이만큼 들여쓰기 합니다.
| <p>일반적인 문단입니다.</p> <p style="text-indent:20px;">20픽셀 들여쓰기 한 문장입니다. 우리말의 경우 문단의 첫부분에서 들여쓰기를 하므로 text-indent 속성을 사용하면 좋습니다.</p> |
|
일반적인 문단입니다.
20픽셀 들여쓰기 한 문장입니다. 우리말의 경우 문단의 첫부분에서 들여쓰기를 하므로 text-indent 속성을 사용하면 좋습니다. |
CSS word-spacing
word-spacing 속성은 단어 사이의 간격을 지정합니다.
| <p>일반적인 문단입니다.</p> <p style="word-spacing:10px;">word-spacing 속성값으로 10픽셀을 지정한 문단입니다. letter-spacing이 글자사이의 간격을 지정한다면, word-spacing은 단어 사이의 간격을 지정합니다.</p> |
|
일반적인 문단입니다.
word-spacing 속성값으로 10픽셀을 지정한 문단입니다. letter-spacing이 글자사이의 간격을 지정한다면, word-spacing은 단어 사이의 간격을 지정합니다. |
CSS 배경(background)
HTML태그에서 배경을 지정하는 방법은 배경색(bgcolor)과 배경이미지(background) 속성밖에 사용할 수 없었지만 CSS에서는 보다 다양한 방법으로 배경을 지정할 수 있습니다.
| 속성 | 설명 | 값 |
| background-color | 배경색을 지정할 수 있습니다. | #FFFF80, Ivory |
| background-image | 배경이미지를 지정할 수 있습니다. | url(bg.gif) |
| background-repeat | 배경이미지의 반복 여부를 지정합니다. | repeat, repeat-x, repeat-y, no-repeat |
| background-position | 배경이미지의 위치를 지정합니다. | top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right |
| background-attachment | 배경이미지의 스크롤 여부를 지정합니다. | scroll, fixed |
CSS 배경색(background-color) 지정
background-color 속성을 사용하면 배경색을 지정할 수 있습니다.
| <div style="height:50px; background-color: ivory">ivory배경색이 지정된 예제</div> |
속성값으로 ivory라는 색상명(color name)을 사용했는데, Hex 코드값을 사용해도 됩니다.
| <div style="height:50px; background-color: #FFFFF0">ivory배경색이 지정된 예제</div> |
|
ivory배경색이 지정된 예제 |
CSS 배경이미지(background-image)
background-image 속성을 사용하면 배경 이미지를 지정할 수 있습니다.
| <div style="width:250; height:250; background-image: url(bg.gif)"></div> |
250*250 크기의 레이어에 100*100 크기의 배경이미지를 적용했기에 배경이미지가 반복적으로 출력됩니다.
|
border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.
| <p style="border:1px gray solid;">border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.</p> |
위와 같이 지정하면 1px의 gray 색상을 가진 경계선이 표시됩니다.
|
border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다. |
border:1px gray solid 에서 1px은 경계선을 굵기를 지정하고, gray는 경계선의 색상을 지정합니다. 마지막에 있는 solid는 경계선을 스타일을 지정합니다.
이를 하나씩 분리하여 지정할 수도 있습니다.
| <p style="border-width:1px; border-color:gray; border-style:solid;">border 속성을 이용하면 컨텐츠의 경계선을 지정할 수 있습니다.</p> |
border-style 속성값으로는 solid 외에 dotted, dashed, double 등이 있습니다.
화면상에 구분이 잘되게끔 border-width를 2픽셀로 지정해보겠습니다.
| <p style="border-width:2px; border-color:gray; border-style:solid;">solid 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:dotted;">dotted 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:dashed;">dashed 스타일의 경계선</p> <p style="border-width:2px; border-color:gray; border-style:double;">double 스타일의 경계선</p> |
|
solid 스타일의 경계선
dotted 스타일의 경계선
dashed 스타일의 경계선
double 스타일의 경계선 |
CSS 리스트(list)
list-style-type 속성을 사용하면 리스트의 marker 스타일을 지정할 수 있습니다.
| <ul> <li style="list-style-type: disc">disc 타입의 리스트 <li style="list-style-type: circle">circle 타입의 리스트 <li style="list-style-type: square">square 타입의 리스트 <li style="list-style-type: none">none 타입의 리스트 </ul> |
|
순서가 있는 리스트(ol)의 경우는 다음과 같이 marker를 지정할 수 있습니다.
| <ol> <li style="list-style-type: decimal">decimal 타입의 리스트 <li style="list-style-type: lower-roman">lower-roman 타입의 리스트 <li style="list-style-type: upper-roman">upper-roman 타입의 리스트 <li style="list-style-type: lower-alpha">lower-alpha 타입의 리스트 <li style="list-style-type: upper-alpha">upper-alpha 타입의 리스트 </ol> |
|
| 관련강좌 |
리스트의 marker에 이미지를 사용할 수도 있습니다.
| <ul> <li style="list-style-image: url('marker.gif')">이미지를 사용한 리스트 <li style="list-style-image: url('marker.gif')">이미지를 사용한 리스트 </ul> |
|
[홈페이지 태그]CSS 고급 - 링크 색상
하이퍼링크의 색상 <a>태그에서 바로 적용해도 됩니다.
| <a href="#" style="color:red;">하이퍼링크의 색상</a> |
| 하이퍼링크의 색상 |
그러나 마우스를 올렸을때(hover) 효과를 주기위해서 일반적으로 아래와 같은 방법을 더 많이 사용합니다.
| <style type="text/css"> a:link {text-decoration: none; color: #333333;} a:visited {text-decoration: none; color: #333333;} a:active {text-decoration: none; color: #333333;} a:hover {text-decoration: underline; color: red;} </style> |
a:link는 방문한적이 없는 일반적인 링크를 의미합니다.
a:visited는 방문한 적이 있는 링크를 의미합니다.
a:active는 클릭하는 순간을 의미합니다. 클릭은 순식간에 이루어지기 때문에 이 부분은 구별이 잘 안갑니다.
a:hover는 마우스를 올렸을때를 의미합니다. 위의 예제에서도 볼 수 있듯이 이 부분을 강조를 하는 경우가 많습니다.
[홈페이지 강좌]CSS 고급 - 필터
CSS를 이용하면 다양한 필터효과를 낼 수 있습니다.
CSS 필터효과는 IE에서만 적용됩니다.
Blur Filter
CSS 필터효과는 IE에서만 적용됩니다.
Blur Filter
| <span style="filter: blur(add=false, direction=135, strength=6); font-size:20pt;width:200px;">Blur Filter</span> |
| Blur Filter |
Glow Filter
| <span style="FILTER: Glow(Color=#ff0000, Strength=8); width:200px;font-size:20pt;">Glow Filter</span> |
| Glow Filter |
DropShadow
| <p style="FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);width:300px;font-size:20pt;">DropShadow Filter</p> |
|
DropShadow Filter |
참조 SITE : http://blog.empas.com/magarinhee/19043221
