위 사진의 왼쪽은 HTML 만으로 구성된 모습이며 오른쪽은 CSS를 이용하여 디자인을 한 모습이다.
CSS 는 Cascading Style Sheet 의 줄임말이다.
html을 이용해서 텍스트와 이미지, 표 등을 웹 문서에 넣는 것을 물고기에 비유하자면 '뼈'에 해당한다.
그럼 CSS 는 무엇일까? CSS는 텍스트에 크기와 색상을 주고 이미지의 크기와 위치, 표의 색상, 배치 등 웹 문서에 디자인을 추가한다.
비유하자면 물고기의 '살'에 해당한다.
CSS가 없다면 웹 문서는 매우 투박하고 볼품없어질 것이다.
위의 목록은 <ul> 태그와 <li> 태그를 이용해서 만든 것이다. 이것에 css 효과를 주면
이렇게 만들 수 있다. 세로로 나열되있던 목록을 가로로 만들고 글자에 색을 입히고 크기를 키웠으며 배경색을 주는 등 웹 문서에 여러가지 효과를 줄 수 있다. 웹 페이지의 디자인은 css로 하는 것이다. 그리도 모바일, 태블릿 등 웹 문서에 접근 가능한 다양한 기기들이 나온 지금 css의 중요성은 더욱 커져가고 있다. 사실 html을 이용해도 간단한 디자인 효과를 주는 것도 가능하긴하다.
HTML
위의 글자는 html로 글자색을 준 것이며 소스는 <font color="red">HTML</font> 이다.
이것을 css 로 한다면
CSS
이며 소스는 아래와 같다.
<style>
.cssfont{color:red;}
</style>
<p class="cssfont">CSS</p>
이렇게만 보면 html로 효과 주는 것이 더 짧은데 왜 css를 사용하냐는 의문이 생길 수 있다. 하지만 같은 효과를 여러곳에 줄때 html은 하나하나 지정해줘야하지만 css는 한번에 지정해 줄 수 있는 등 소스가 길어질 수록 css의 중요성은 커진다.
다시 말하면 웹 문서에서 내용과 디자인을 html 과 css 로 분리 할 수 있다. 이것은 웹 표준에 필요한 것이기도 하며 사이트의 수정에 도움을 줄 수 있다.
html은 그대로 두고 css만 바꿔 주면 전혀 다른 디자인을 만들 수 있다. 인쇄용 문서, 모바일용 페이지, 태블릿용 페이지, TV용 페이지 등 CSS만 바꾸면 여러 매체에 사용할 수 있게 된다.
CSS는 <style>태그 사이에 넣는다. 보통 <style>태그는 <head>태그 사이에 넣는다.
html문서 안에 css를 넣는것을 간단하게 표현하면 이렇다. (내부 스타일시트)
<html>
<head>
<style></style>
</head>
<body>
</body>
</html>
또는 css를 넣는 다른 방법도 있다(외부 스타일 시트)
<html>
<head>
<link href="외부 css 파일 경로" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
그리고 html과 다른점이 있다면 html에서는 주석을 넣을 때 <!-- 주석 --> 이랫다면
css에서는 /* 주석 */ 를 사용한다.
css를 사용하면 한번에 문서에 디자인을 바꿀 수 있다.
p{
color:red;
}
위 소스를 사용하면 <p> 태그안의 모든 글자 색상은 red가 된다. 여기서 p 부분을 선택자(select)라고 한다.
선택자에 { 와 } 사이에 들어간 속성들을 주는 것이다.
간단하게 css에 대해 알아봤다. css는 웹 문서에 없어서는 안되는 필수 요소이다. html을 배운다면 css도 꼭 알아두도록 하자.
