CSS는 HTML로 작업하는데 따르는 여러 가지 제약사항을 해결하기 위해 만들어졌다. 웹 페이지를 구성하는 구성요소들을 예쁘게 꾸미거나 레이아웃을 적용할 수 있는 기능을 제공해준다.
웹 사이트를 구성하는 웹 페이지는 대부분 동일한 스타일이 적용되어 있다. 그래야 안정적인 느낌을 줄 수 있다. 이를 HTML의 태그를 이용하여 스타일을 적용하려면 하나 하나 바꿔줘야 하기 때문에 많이 불편할 것이다. 웹 페이지의 스타일을 조금만 변경하려고 해도 HTML로 설정했다면 모든 페이지를 하나 하나 변경해야 할 것이다.
예를 들어 <img>태그를 살펴보자. <img>태그 내에서 “width”속성을 변경할 수 있도록 지원하고 있다. 만약 웹 페이지 내에 삽입된 이미지가 수십 장이고 이런 이미지들이 삽입된 페이지도 여러 장이라고 해보자. “width”속성이 “500”으로 적용된 이미지의 사이즈를 변경하려면 어떻게 해야 할까? HTML태그 내에서 변경하려면 모든 <img>태그의 “width”속성을 하나 하나 다 변경해주어야 한다.
CSS를 이용하면? CSS파일 내의 img태그에 적용된 속성 하나만 변경하면 모두 적용되는 것이다.
CSS에서는 한 장의 스타일 문서를 여러 웹 페이지에 간단하게 적용할 수 있으며 또 간단하게 교체할 수 있다.
CSS를 웹 페이지에 적용할 수 있는 방법을 살펴보기 전에 우선으로 처리해야 하는 것은 CSS를 적용할 HTML문서 내의 컨텐츠를 블록으로 묶어 주는 일이다. <div>태그나 <p> 혹은 <span>등의 태그를 이용하여 먼저 블록으로 처리하고 CSS를 적용한다.
다음과 같이 주어진 HTML문서를 <div>와 <p>태그를 이용하여 블록으로 묶어준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
HTML5는 웹 문서를 만들기 위한 기본 프로그래밍
언어 ‘HTML(Hyper Text Markup Language)’의 최신규격이다.
HTML5는 엑티브X(Active X)를 설치하지 않아도 동일한 기능을
구현할 수 있고, 특히 플래시(flash)나 실버라이트(Silverlight), 자바FX(JAVA FX) 없이도
웹 브라우저(web browser)에서 화려한 그래픽 효과를 낼 수 있다.
HTML5는 웹 문서를 만들기 위한 기본 프로그래밍
언어 ‘HTML(Hyper Text Markup Language)’의 최신규격이다.
HTML5는 엑티브X(Active X)를 설치하지 않아도 동일한 기능을
구현할 수 있고, 특히 플래시(flash)나 실버라이트(Silverlight), 자바FX(JAVA FX) 없이도
웹 브라우저(web browser)에서 화려한 그래픽 효과를 낼 수 있다.
</body>
</html>
