우리는 앞에서 CSS를 통하여 HTML 속의 엘리먼트들(h1, h2, p, img, 등)의 스타일을 꾸밀 수 있게 되었습니다. 복습해보자면 <p> 엘리먼트의 스타일은 다음과 같이 정해주었지요.
그런데 만약 '어떤 문단(<p>)은 이런 스타일로, 또다른 어떤 문단은 저런 스타일로..' 이렇게 서로 다르게 꾸미고 싶다면 어떻게 해야 할까요? 위와 같은 방법으로 CSS를 적용하면 모든 <p> 엘리먼트들에 똑같은 스타일이 적용되게 되므로 우리가 원하는 바를 이룰 수가 없습니다. 이런 상황에서 필요한 것이 class 속성입니다. <p> 엘리먼트에 서로 다른 class를 부여해놓으면 그 class 마다 별도의 스타일을 지정할 수 있게 됩니다. class 속성의 사용법은 다음과 같습니다.
먼저 HTML 부분입니다.
위의 h2, p 엘리먼트에는 "diary"라는 class가 붙어있고, 아래의 h2, p 엘리먼트에는 "poem"이라는 class가 붙어있습니다. 이제 위의 HTML에 간단한 스타일을 입혀보도록 합시다.
가장 위의 .diary는 "diary"라는 class를 갖는 모든 엘리먼트를 가리키고 그 아래의 p.diary는 <p> 엘리먼트들 중에 "diary"라는 class에 속하는 것들을 나타냅니다. 즉 .diary에 의해 diary class에 속하는 모든 엘리먼트들은 검은색 글씨를 갖게 되고 p.diary에 의해서 diary class에 속하는 <p> 엘리먼트들은 정렬이 되게 됩니다. 가장 아래의 .poem도 마찬가지 원리입니다. 따라서 poem class에 속하는 모든 엘리먼트들은 이택릭체이고 글자색이 올리브색이며 가운데 정렬이 되겠지요. class 속성을 어떻게 사용하면 되는지 조금 이해가 되시나요? (글을 급하게 정리하느라 설명이 많이 부족한거 같네요 ㅠ 다중 클래스나 상속, 우선순위 같은 개념에 대해 설명이 필요할 것 같은데... 나중에 기회가 되면 보충 설명을 올리도록 하겠습니다^^)
id 속성도 class와 거의 유사합니다. 다른점이 딱 하나 있는데 그것은 바로 하나의 id는 오직 단 하나의 엘리먼트에만 사용된다는 점입니다. id와 class의 관계를 쉽게 설명하자면, id는 어떤 대상을 가리키는 '이름'이고 class는 단어 그대로 그 대상의 '종류'를 나타냅니다. 따라서 어떤 하나의 엘리먼트는 단 하나의 id(이름)를 갖고 동시에 여러 class(종류)가 될 수 있습니다. 어떤 대상 A는 '재희'라는 이름을 가지면서 동시에 '사람'이고 '남자'이고 '학생'인 것과 마찬가지입니다.
위에서 class를 사용할 때 엘리먼트의 속성에 class="className"을 추가하고 CSS에서 그 class에 접근할 때 .className 이렇게 했었죠? id도 이와 거의 비슷합니다. 어떤 엘리먼트에 id를 부여하려면 속성에 id="idName"을 추가하고 CSS에서 그 id로 접근하려면 #idName 이렇게 하면 됩니다.
그런데 만약 '어떤 문단(<p>)은 이런 스타일로, 또다른 어떤 문단은 저런 스타일로..' 이렇게 서로 다르게 꾸미고 싶다면 어떻게 해야 할까요? 위와 같은 방법으로 CSS를 적용하면 모든 <p> 엘리먼트들에 똑같은 스타일이 적용되게 되므로 우리가 원하는 바를 이룰 수가 없습니다. 이런 상황에서 필요한 것이 class 속성입니다. <p> 엘리먼트에 서로 다른 class를 부여해놓으면 그 class 마다 별도의 스타일을 지정할 수 있게 됩니다. class 속성의 사용법은 다음과 같습니다.
위의 h2, p 엘리먼트에는 "diary"라는 class가 붙어있고, 아래의 h2, p 엘리먼트에는 "poem"이라는 class가 붙어있습니다. 이제 위의 HTML에 간단한 스타일을 입혀보도록 합시다.
가장 위의 .diary는 "diary"라는 class를 갖는 모든 엘리먼트를 가리키고 그 아래의 p.diary는 <p> 엘리먼트들 중에 "diary"라는 class에 속하는 것들을 나타냅니다. 즉 .diary에 의해 diary class에 속하는 모든 엘리먼트들은 검은색 글씨를 갖게 되고 p.diary에 의해서 diary class에 속하는 <p> 엘리먼트들은 정렬이 되게 됩니다. 가장 아래의 .poem도 마찬가지 원리입니다. 따라서 poem class에 속하는 모든 엘리먼트들은 이택릭체이고 글자색이 올리브색이며 가운데 정렬이 되겠지요. class 속성을 어떻게 사용하면 되는지 조금 이해가 되시나요? (글을 급하게 정리하느라 설명이 많이 부족한거 같네요 ㅠ 다중 클래스나 상속, 우선순위 같은 개념에 대해 설명이 필요할 것 같은데... 나중에 기회가 되면 보충 설명을 올리도록 하겠습니다^^)