1-3-2.CSS

초기의 HTML은 문서의 내용은 물론이고 문서의 장식까지 담당했다. <font> 태그로 글꼴을 지정하고 center, color 등의 속성으로 정렬 방식이나 색상을 지정하는 식이었다. 이 방식으로도 원하는 대로 문서 모양을 꾸밀 수 있지만 비슷한 태그가 자꾸 반복되어 문서양이 많아지고 내용과 모양이 마구잡이로 섞여 관리하기 어려웠다.

그래서 HTML은 문서의 내용만 표현하도록 제한하고 모양은 별도의 스타일시트로 분리하였다. CSS는 문서의 각 부분을 어떻게 표시할 것인가를 지정하는 스타일시트로서 기존의 HTML 포맷팅 태그에 비해 훨씬 더 상세한 디자인을 제작할 수 있다. CSS에 의해 구조와 표현이 분리됨으로써 웹 문서의 제작 및 관리가 훨씬 더 쉬워졌다.

CSS의 도입은 HTML에 비해서는 약간 늦었다. 1996년 처음 발표되어 HTML의 디자인 관련 태그를 더 효율적인 방법으로 대체하였으며 CSS2를 거쳐 현재는 HTML5와 함께 CSS3가 발표되었다. 앞 문서에 CSS로 스타일을 입혀 보자. 문서의 내용은 그대로 두고 <style> 태그 안에 디자인 관련 지시문만 추가로 작성하면 된다.

 

css.html

<!DOCTYPE html>

<html>

<head>

     <meta charset="utf-8">

     <title>인터넷에 대하여</title>

     <style>

         body { background-color:yellow }

         h2 { font-size:200%; background-color:green; padding:10px ; border-radius:20px; }

         p { line-height:140%; text-align:justify; text-indent:16px; }

         li { font-size:90%; color:red; font-weight:bold; }

         a  { color:blue ;text-decoration:none; }

     </style>

</head>

<body>

     <h2>인터넷이란</h2>

     <p>인터넷은 네트워크를 연결한 거대 네트워크로서 전세계의 컴퓨터를 연결한다. 인터넷에 연결된 컴퓨터는 언제 어디서나 원하는 정보에 액세스할 수 있다. 인터넷 기반으로 여러 가지 서비스가 개발되어 있다.</p>

     <ul>

         <li>웹 - 하이퍼텍스트 기반의 문서 공유 서비스이다.</li>

         <li>FTP - 파일 전송 프로토콜을 이용한 파일 교환 서비스이다.</li>

         <li>email - 전자 우편 시스템이다.</li>

     </ul>

     <p> 인터넷 서비스 중 가장 인기있는 것은 웹이다. 그래픽 환경에서 마우스로 링크를 눌러 원하는 정보를 쉽게 찾을 수 있어 요즘은 웹이 곧 인터넷이라고 할 수 있다. 웹 기술의 표준은 <a href="http://www.w3.org">W3C</a>에서 관리한다.</p>

</body>

</html>

 

구문이 상당히 복잡해 보이지만 태그의 특정 속성을 어떻게 변경한다는 단순한 대입문의 반복일 뿐이다. 예를 들어 <body> 태그의 배경색을 노란색으로 지정한다는 식이다. 배경색, 폰트, 크기, 굵기 등 갖가지 속성을 골고루 적용해 보았다. 좀 유치하지만 앞에서 만들었던 밋밋한 문서에 비해서는 모양이 확실히 다르다. 같은 문서에 대해 스타일만 지정했을 뿐인데 디자인이 완전히 달라진다.

디자인과 관련된 모든 지정이 <style> 태그 안에 모여 있으므로 변경 및 관리하기도 수월하며 잘 만들어진 스타일시트를 여러 문서에 재활용할 수도 있다. 내용과 모양이 분리되어 있어 구조적으로 깔끔하고 우수하다. CSS로 지정할 수 있는 스타일은 상상 이상으로 상세하며 정밀해서 워드 프로세서 수준의 배치가 가능하다. 정적인 디자인 뿐만 아니라 애니메이션이나 전환같은 동적인 동작까지도 지원한다.

CSS는 더 이상 옵션이 아니라 웹 사이트를 제작하기 위해서 반드시 배워야 하는 필수 기술이다. HTML은 오로지 문서의 내용만 기술하며 스타일을 입히는 작업은 CSS로 처리한다. 복잡해 보이는 네이버도 CSS를 빼고 보면 내용은 상대적으로 단순한다. 크롬의 개발자 도구를 사용하여 스타일을 적용하지 않도록 한 상태에서 네이버를 열어 보면 다음과 같은 모습으로 표시된다.

포털 사이트도 스타일을 걷어내면 정말 썰렁하게 생겨 먹었다. 이 실습을 통해 스타일시트가 얼마나 중요한지 단적으로 실감할 수 있다. 내용 외에도 스타일과 이미지, 각종 스크립트 코드가 조합되어 멋드러진 웹 사이트가 만들어지는 것이다. HTML에 비해서는 난이도가 조금 더 높고 양도 많지만 적용 결과가 눈에 바로 보이므로 배우는 재미는 있다.