HTML을 통해 웹페이지에 들어가는 여러 형태의 구성요소를 만들 수 있게 됐다. 이제 CSS를 이용하여 구성요소의 스타일을 정하는 방법을 배워보자.
• CSS가 무엇이고 어떻게 사용하는지,
• 클래스와 아이디를 사용하여 구성요소를 어떻게 조회하는지,
• 웹페이지를 재구성하기 위해 DIVs를 사용하는 법,
• 테두리와 포지셔닝, 컬러와 폰트, 텍스트와 링크 포맷을 조정하기 위해 CSS를 사용하는 법을 배운다.
CSS란 무엇인가?
HTML로 웹페이지에 구성요소를 추가할 수는 있지만 이들의 위치, 색깔, 폰트 또는 스타일을 조절하기는 쉽지 않다.
CSS는 1994년에 버너스 리의 동료인 하콤 비움리(Hakon Wium Lie)가 처음 제안하여 도입되었다. 스타일 정보를 페이지 내용과 별도로 저장하여 내용에 영향을 주지 않고 쉽게 스타일을 조정하자는 것이 주된 아이디어였다. 실제로 HTML은 전혀 손대지 않고 CSS만 변경하여 웹페이지의 모습과 레이아웃을 완전히 바꿀 수 있다.
CSS는 연속되는 스타일 시트(Cascading Style Sheets)의 줄임말이다. ‘Cascading’은 여러 가지 서로 다른 규칙이 존재할 때 어떤 스타일 ‘규칙’을 적용할지를 브라우저가 결정하는 방식을 일컫는다. 예를 들어 하나의 스타일 시트가 <p> 요소를 파란색으로 규정할 때 다른 시트가 빨간색이라고 규정하면 우리는 <p> 요소가 실제로 어떤 색을 가져야 할지 알 수 있는 일관된 방식이 필요하다.
왜 CSS를 배우는가?
CSS 없이 HTML만 배우는 것은 흑백으로 그림을 배우는 것과 같다. 무슨 그림이든 그릴 수는 있지만 실제 세상에 존재하는 색깔들은 쓸 수가 없다. CSS를 이용해 웹사이트를 독특하고, 친근하고 아름답게 디자인할 수 있다. 또 웹사이트의 모습을 자기가 원하는 대로 바꿀 수 있다.
코딩의 관점에서 CSS의 클래스와 ID(곧 정체를 살펴볼 것이다)를 활용하는 것은 자바스크립트의 기본이 된다. 그리고 한 줄의 코드로 수많은 다른 구성요소들의 모습을 바꿀 수 있는 법을 배운다. CSS도 간단하긴 하지만 HTML보다는 약간 더 복잡해서 집중이 필요하다. 이런 점들 때문에 두 번째로 배우기에 적합한 언어다.
CSS는 어떻게 생겼는가?
이제 실제 CSS로 들어가자. 우선 비어 있는 웹페이지에 ‘I love HTML.’이라는 문장을 추가해라. (텍스트 편집기와 브라우저 그리고 기본 웹페이지를 설정하는 법이 기억나지 않는다면 앞서 설명한 HTML 내용의 첫 부분으로 돌아가라.)
코드는 아래와 같다.
<p>I love HTML.</p>
이제 ‘color:blue’ 값의 스타일 어트리뷰트를 추가해라. 아래와 같다.
<p style="color:blue">I love HTML.</p>
놀랍게도 CSS를 통해 텍스트가 파란색으로 바뀐다. 다른 색깔로도 시험해본다.
‘color:blue’ 부분이 CSS다. 특정 <p> 구성요소에 하나의 CSS 규칙이 적용됐다.
‘style’ 어트리뷰트를 이용해 CSS를 추가하는 것을 인라인(inline) CSS라고 부른다. HTML 줄 안쪽에 있기 때문이다.
