cascading style sheets 의 약자
HTML 문서가 어떻게 표현될 것인지를 나타내는 방법이다.
아래 링크로 접속해 보면 그림 1처럼 보인다.
http://www.w3schools.com/css/ex2.htm
[그림 1. CSS가 적용된 페이지]
하지만 실제 CSS로 표현된 것을 제외하면 아래 그림2 같다.
[그림2. CSS가 적용되지 않은 페이지]
즉, text의 색상과 크기, 배경색 등을 다르게 보이게 정의 하면 그림 1 처럼 보이는 방법을 정의 할 수 있는 것이다.
그럼 실제 코드를 보자
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" | |
| href="ex2.css" /> | |
| </head> | |
| <body> | |
| <h1>This is a header 1</h1> | |
| <hr /> | |
| <p>You can see that the style | |
| sheet formats the text</p> | |
| <p><a href="http://www.w3schools.com" | |
| target="_blank">This is a link</a></p> | |
| </body> | |
| </html> |
위에서 보면 HTML로 문서를 어떻게 정의 했는지 보여준다.
두꺼운 글씨를 살펴보면 ex2.css라는 link가 있는 것을 볼 수 있다. 실제 url은 http://www.w3schools.com/css/ex2.css 이다.
body {background-color:tan;}h1 {color:maroon;font-size:20pt;}hr {color:navy;}p {font-size:11pt;margin-left:15px;}a:link {color:green;}a:visited {color:yellow;}a:hover {color:black;}a:active {color:blue;}
가보면 위와 같은 데이터를 볼 수 있는데 여기서 표현형식을 지정해 주는 것이다.
body의 백그라운드 color를 tan[http://en.wikipedia.org/wiki/Tan_(color)] 이라는 색깔로 지정했다.
h1 헤더의 크기와 색깔을 바꿨다.
hr 가로 라인의 색깔을 바꿨다.
p 문단안의 글씨 크기를 11픽셀로 하고 margin을 두어 왼쪽 옆에 15픽셀의 여백을 줬다.
a 링크의 글씨 색상을 녹색으로 한다.
a 링크를 과거에 방문했었다면 글씨 색상을 노랑으로 바꾼다.
a 링크에 마우스를 올려 hover하면 글씨 색상을 검정으로 바꾼다.
a 링크에 마우스를 클릭해 active하게 되면 파랑색으로 바꾼다.
마지막으로 아래를 방문해보고 style sheet에 따라 같은 html이 어떻게 바뀌어 표현되는지 보자
http://www.w3schools.com/css/demo_default.htm
View Style 1, 2, 3을 눌러보면 스타일이 변하는 것을 확인할 수 있다. Style 1, 2, 3을 눌러 각 스타일이 어떻게 정의되었는지 확인할 수 있다.
사실은 더 공부를 할게 많이 있다.
[CSS 문법은 어떻게 되는가?]
[Id와 Class 그리고 Selector]
[어떻게 적용하는가?]
[스타일 적용하기]
[박스모델 이해하기]
[고급으로 CSS사용하기]
[참고 페이지]
Tutorial 페이지
http://www.w3schools.com/css/default.asp
CSS 예제 페이지들
http://www.w3schools.com/css/css_examples.asp
먼저 예를 많이 보는 것이 중요하니 여기도 참고해보면 감이올 것이다.
'Web > CSS' 카테고리의 다른 글
| CSS 문법 (CSS syntax) (0) | 2012.03.06 |
|---|---|
| CSS selector (0) | 2012.02.10 |
| background image 백그라운드 이미지 사이즈 맞추기 (4) | 2011.04.28 |
