Beautiful CSS
교육 카드 개설 현황
사이드바 1
사이드바 2
Meta Info:
ID와 Class로 태그에 이름짓기
이 게시물은 2016년 8월 8일 수정판입니다.
이야기에 앞서
웹 문서에는 다양한 태그들이 중복되어 여러번 사용됩니다. 이런 태그들 중 원하는 태그만 선택적으로 꾸미고 싶다면 당연히 이름이 필요합니다. 이 글에서는 태그의 이름으로 사용되는 ID와 Class를 통해 CSS에서 원하는 태그를 어떻게 치장하는지 알아봅니다.
ID와 Class를 사용하지 않고 태그 이름만으로 꾸며보기
태그에 이름을 짓기 전에, 왜 이름을 지어야 하는지 이유부터 알아봅시다. CSS는 아래 세가지를 구별하여 꾸밀 수 있습니다.
- 태그의 고유 이름으로 꾸밀 수 있습니다.
- 태그의 ID를 식별하여 꾸밀 수 있습니다.
- 태그의 Class를 식별하여 꾸밀 수 있습니다.
먼저, 태그의 고유 이름으로 꾸며보겠습니다. HTML 문서의 <body> 태그안에 아래와 같이 구문을 만들었습니다.
아래 코드는 HTML과 CSS 코드의 결과를 실시간으로 보여줍니다. Result 탭을 클릭하면 결과물을 볼 수 있으니 참고하면서 읽으시기 바랍니다.
여기에서 문단으로 사용된 <p> 태그의 고유이름인 p를 CSS에서 꾸며봅니다.
그러면 <p> 태그가 사용된 모든 요소의 글자색이 초록색으로 변합니다. 이처럼, 태그의 고유 이름을 꾸미는 것은 다소 위험할 수 있습니다. 어떤 문단의 글자색은 초록색으로 변하면 안되는데 <p> 태그가 사용된 문단은 전부 바뀌어 버리니까 말이죠. 그래서 태그 고유 이름을 꾸밀때는 반드시 서로 공유할 수 있는 공통된 속성만 선언하거나 혹은 아예 선언하지 않는 것이 좋습니다.
예를들어, 모든 문단의 글자 크기를 12px로 선언하는 것은 큰 문제가 없습니다. 어쨌든 본문의 글꼴 크기는 통일시켜 사용하기 때문이죠. p { font-size: 12px }
Class로 이름짓기
태그의 이름을 짓는데 가장 보편적으로 사용되는 것은 클래스(Class) 방식입니다. 백번 설명보다 한번 보는 것이 낫습니다. 아래 예문은 첫번째 문단에 클래스 이름을 지어주고, CSS에서 그 클래스 이름을 가진 태그를 꾸며주고 있습니다.
HTML에서 클래스 이름을 지어줄 때는, 태그 고유 이름 뒤에 class="클래스명"과 같이 적어주면 됩니다. CSS에서는 클래스 이름 앞에 마침표 . 부호를 붙여줍니다. 이제부터는 클래스 이름이 있기 때문에 CSS에서 굳이 태그 고유이름을 적어줄 필요는 없습니다. 그러면 결과적으로 클래스 이름이 선언된 첫번째 문단의 글자색만 초록색으로 바뀝니다. 이제부터는 원하는 태그에 이름을 붙여 선택적으로 꾸밀 수 있게 된 것이죠.
그리고, 한번 정의해 놓은 클래스 이름은 여러 태그에서 계속 불러 사용할 수 있습니다. 만일, 두번째 문단의 글자색도 초록색으로 표현하고자 한다면 해당 태그에도 동일한 클래스명을 붙여주면 됩니다.
<p class="green">첫번째 문장입니다.<p> <p class="green">두번째 문장입니다.<p>
ID로 이름짓기
ID도 Class와 똑같이 특정 태그에 이름을 짓고, CSS에서 꾸며주는 역할을 합니다. 한가지 다른 점은, 클래스 이름은 여러 태그에 중복해서 사용해도 되지만, 하나의 아이디 이름은 HTML 문서 안에서 중복해서 사용할 수 없습니다. 그래서 클래스보다는 사용빈도가 떨어지고, 특수한 목적에 의해 사용되는 경우가 많습니다.
HTML에서 아이디 이름을 지어줄 때는, 태그 고유 이름 뒤에 id="아이디명"과 같이 적어주면 됩니다. CSS에서는 아이디 이름 앞에 샾 # 부호를 붙여줍니다. HTML에서 아래 예문과 같이 클래스를 사용할때 처럼, 같은 이름을 중복으로 사용해서는 안됩니다.
- BAD
- <p id=”green”>첫번째 문장입니다.<p>
<p id=”green”>첫번째 문장입니다.<p>
쉽게 말하면, 클래스는 한번 정의해 놓은 이름을 아무 태그에서나 불러 사용할 수 있지만, 아이디로 지정한 이름은 오직 하나의 태그에서 한번만 불러서 사용할 수 있습니다. 처음에는 아이디를 언제 어떻게 사용하면 좋을지 잘 판단이 안 서므로, 클래스를 사용해서 이름을 짓고, 나중에 여러 자료를 통해 아이디의 효과적인 사용을 천천히 익혀나가면 됩니다.
아이디는 보통 다음과 같은 경우에 사용합니다. 설명을 들어도 직접 닥쳐보지 않고는 이해하기 힘듭니다. 그냥 그렇다고만 알고 넘어가면 됩니다.
- 1개의 HTML 문서 안에서 중복되지 않고 독자적인 스타일을 사용하는 태그에 사용. 예를들어, 사이트의 메인메뉴, 헤더, 푸터 따위.
- 앵커를 사용하여 문서 내의 특정 위치로 이동할 때.
- 자바스크립트나 프로그램에 의해 작동하는 독립적인 요소.