CSS란?
- HTML이 정보를 표현한다면
- CSS는 HTML을 시각적으로 꾸며주는 역할을 한다.
example1.html - 정보로서의 html (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!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을 해석할 수 있도록 할 수 있다.
