CSS기본 4강 - CSS의 시작(3) -

vonzone 2009. 6. 1. 14:51

본 글은 독자들이 보다 쉽게 이해를 할 수 있도록 하기 위해 최삼순이라

는 특정인물과 상황을 만들었습니다.

이제 HTML의 Element와 CSS의 관계를 알 수 있겠지요? 다음은 HTML을 구성할 수 있는 Element의 종류들입니다. 위에서 알아본 span을 시작으로 다양한 Element가 존재하지요? 여러분이 자주 사용하는 Element들의 속성들을 여기서 파악해 두시는 것이 좋을 것입니다.

http://trio.co.kr/webrefer/html/index/elements.html

▶ Element의 이름 지어주기

“최삼순”인턴이 만든 문서를 보면 이름 부분을 span을 사용해 각각 Element로 만들었습니다. 이렇게 만들어진 span Element의 글자의 크기와 색상 스타일을 적용했습니다.

<html>

<head>

<style>

span {

font-size: 130%;

font-color: red;

}

</style>

</head>

<body>

<p>

연락처 : 010-0000-0000<br />

주소 : 경기도 김포시 대곳면 177번지<br />

메모 : 언제나 나라를 지켰다.<br />

</p>

</body>

</html>

그런데 “무”대리가 연락처와 주소에도 다른 글꼴과 크기, 색상을 적용하라고 했습니다. 그래서 “최삼순”은 코웃음 치면서 연락처와 주소부분에도 <span>태그를 사용하여 각각 Element로 만들어 주었습니다. 다음과 같이 말이죠.

<body>

<p>

메모 : 언제나 나라를 지켰다.<br />

</p>

</body>

그런데 연락처와 주소부분에 적용한 Element에도 이름과 동일하게 글씨가 130%로 커지고 글자의 색은 붉은색으로 적용되었습니다. span으로 만든 모든 Element에 동일 글꼴의 모양과 색상이 적용되었습니다. 이런 현상은 다른 Element에서도 적용됩니다. 가령 table Element의 각각의 줄을 다른 색으로 하고 싶어서 tr이라는 Element의 스타일속성을 <style>부분에서 정의하여 적용하면 모든 tr Element가 동일한 스타일이 적용 될 것입니다.

이와 같은 현상은 CSS를 적용하였을 경우에만 나타나게 됩니다. 기존에 HTML에서 스타일을 적용할 경우 각각의 Element에 직접 스타일옵션을 지정하기 때문이죠. 다음과 같이 말이죠.

<body>

<p>

메모 : 언제나 나라를 지켰다.<br />

</p>

</body>

각각의 Element에 그 Element에 맞는 이름을 지어주었습니다. 이름은 "name" 연락처는 “phone" 주소는 ”address" 물론이 이름들은 여러분이 다른 이름으로 바꾸어 줄 수도 있습니다. 그럼 스타일을 적용하는 부분에서는 어떻게 이름을 사용하는지 볼까요?

<style>

span {

font-size: 130%;

color: red;

}

</style>

<style>

.name {

font-size: 130%;

color: red;

}

.phone {

font-size: -2;

color: blue;

}

.address {

font-size: +4;

color: #998877;

}

</style>

좌측은 기존에 여러분이 사용하시던 방법으로 Element인 span Element의 속성을 모두 바꾸어 줍니다. 하지만 오른쪽의 경우에는 span Element를 직접 써주는 것이 아니라 Selector부분에 여러분이 지정한 Element의 이름인 class의 이름을 적어 주시면 됩니다. 기서 중요한 것은 Class의 이름 앞에 “.”를 꼭 적어주셔야 그 class를 가진 Element의 스타일을 정의 할 수 있다는 것입니다. 이처럼 HTML의 내용부분에서 Element의 Class을 정해주면 그 Class만 가지고 Element만의 스타일을 따로 정의 할 수 있습니다.

그런데 Element의 이름을 정해주는 방법은 2가지가 존재한다고 위에서 말씀 드렸습니다. 하나는 Class이며, 다른 하나는 ID였습니다. ID의 경우에는 Class와 다르게 style 부분에서 “#”으로 그 ID를 selector로 지정할 수 있습니다.

CSS에서 ID와 Class 둘 다 Element의 이름을 정해주는 점은 동일합니다. 그럼 ID와 Class의 다른점은 무엇일까요? 그것은 기능의 차이보다는 사용하는 용도, 개념의 차이로 볼 수 있습니다. Class는 한 HTML 문서의 다양하고 많은 Element에 스타일을 적용할 경우에 즉 2개 이상의 Element에 스타일을 적용할 때 사용하며, ID의 경우에는 HTML 문서에서 유일하게 존재하는 Element에 스타일을 적용할 때 사용합니다. 반면 HTML 문서에서 body나 head와 같은 Element에는 ID를 사용하는 것이 좋으며, 여러개의 테이블이나, 머리글과 같은 Element에는 Class를 사용하는 것이 좋다.

위에서도 말했듯이 이것은 하나의 개념이나, 용도의 차이이지 하나의 문서에 ID가 동일한 ID가 2개 이상 존재한다고 해서 스타일이 적용되지 않거나, HTML 문서가 작동하지 않는 것은 아닙니다. 즉 여러분의 사용여부에 따라 많이 달라질 수 있다는 것입니다. 그리고 Class나 ID는 숫자로 시작할 수 없습니다.

▶ SPAN VS DIV

span과 Class를 이용한 글자의 편집에 대해서는 이제 큰 무리 없이 스타일을 할 수 있게 된 “최삼순”인턴!, 하지만 “무”대리의 요구는 점점 늘어만 갔습니다. HTML 문서의 디자인구조, 레이아웃 등 이제는 글자를 넘어서 HTML문서의 전체적인 부분의 스타일링을 원하게 되었습니다. “최삼순”인턴은 날이 갈수록 배워야 할 것만 늘어간다고 투정을 부리면서 다시금 CSS와 관련된 자료를 다시금 찾게 되었습니다.

이제는 HTML의 글자 폰트를 넘어서 점점 규모가 커지고 있습니다. HTML을 구성하고 있는 글자의 경우에는 위에서도 알아보았듯이 span태그를 사용하여 원하는 글자들의 범위 지정하여 element로 만들었습니다. 이렇듯 span의 경우는 HTML문서에서 글자를 포함하고 있는 라인을 Element로 만드는 인라인 element입니다. 물론 글자만 스타일링 한다면 상관없지만, “최삼순"대리과 같이 글자 이외에 HTML 웹페이지를 구성하는 레이아웃이나 문서의 내용의 정렬 등을 위해서는 여러분이 지금까지 사용하던 span은 적절하지 않습니다. 이럴 경우 인라인 element인 span보다는 다른 새로운 엘리먼트를 사용해야 합니다. 여기서 사용되는 것이 바로 DIV라는 새로운 엘리먼트입니다. 여러분이 HTML문서에서 만드는 비슷한 내용이나 기능들을 하나의 블록을 만들어서 관리하기 위한 용기형태의 엘리먼트입니다.

DIV에 대하여 간단하게 알아볼까요? DIV는 기본적으로 블록형태의 엘리먼트입니다.다. HTML에서는 이른 블록 엘리먼트라고 칭하고 있습니다. 이 블록 엘리먼트에 대해서는 차후에 알아보도록 하겠습니다. DIV엘리먼트는 엘리먼트 내부에 또 다른 블록 엘리먼트를 추가할 수 있습니다. 하지만 SPAN은 SPAN안에 또 다른 블록 엘리먼트를 추가 할 수 없습니다. 반대로 DIV 엘리먼트를 HTML 문서에서 만들어 주면 div를 시작하기 전과 div가 끝나는 곳에 자연스럽게 줄바꿈을 해주게 됩니다. 그렇기 때문에 문서의 내용이 이어져 있는 하나의 라인에서는 사용할 수가 없습니다. 여러분이 원하는지 않는 줄바꿈을 해주기 때문이죠. 이런 사실들을 봐서는 블록 엘리먼트인 DIV가 인라인 엘리먼트인 SPAN보다 큰 구조를 가질 수 있다는 것을 짐작할 수 있습니다. 이런 DIV와 SPAN의 관계도 위에서 알아본 ID와 Class의 관계처럼 개념적이고, 사용용도에 따른 부분이며, 기능상으로 HTML문서를 구성하는데 문제가 되지는 않습니다.

다음강의에서 계속 됩니다..