CSS란?
- HTML이 정보를 표현한다면
- CSS는 HTML을 시각적으로 꾸며주는 역할을 한다.
example1.html - 정보로서의 html (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <h1>생활코딩이란?</h1> <p> 일반인을 위한 프로그래밍 커리큘럼입니다. </p> <p> 누구나 프로그래밍을 할 수 있습니다. </p> </body> </html>
example2.html - html을 꾸며주는 역할로서 CSS (jsfiddle, github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>생활코딩이란?</h1>
<p>
일반인을 위한 프로그래밍 커리큘럼입니다.
</p>
<p>
누구나 프로그래밍을 할 수 있습니다.
</p>
</body>
</html>
CSS를 통해서 기대되는 효과들
- 정보(HTML)과 디자인(CSS)를 분리할 수 있다.
- 정보를 수정하지 않고 디자인만 변경할 수 있다. (참고 : css Zen Garden)
- 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문하도록 유도할 수 있다.
- HTML에서 디자인 분리함으로서 시각장애인을 위한 프로그램인 스크린리더가 HTML을 해석할 수 있도록 할 수 있다.
