책 씹어먹는 즐거움

앞서, 요소 선택자(element selector)를 이용하여 CSS 규칙을 요소에 적용시켜 보았다. 하지만 이러한 요소 선택자는 해당 요소들을 가리지 않고 일괄적으로 모두 선택하는 문제가 있다. 

다음과 같이 0037_1.html 파일을 작성하여 실행해보자.

이것을 실행하면 다음과 같이 나타난다. 

요소 선택자로 <p> 요소를 선택하여 스타일을 적용했기 때문에, 4개의 <p> 요소 모두 동일한 스타일의 적용을 받는다.

하지만 우리는 동일한 요소들에게 각각 서로 다른 스타일을 적용하고 싶다. 어떻게 해야 하나?

이때, 각각의 요소를 고유하게 만들어주는 아이디(id) 속성을 이용하면 된다. 

아이디(id) 속성에 대해서는 0019 HyperText 링크를 제공하는 앵커(anchor)의 a요소 01 사용법 및 href 속성에서 <a> 요소를 이용하여 특정 아이디(id)를 가진 요소로 이동할 수 있다는 내용으로 다룬바 있다. 

아이디(id) 속성(attribute)은 HTML 요소에 고유한 아이디(id)를 부여하는 속성이다. 따라서 그 속성상 당연히 하나의 웹페이지에서 각각의 아이디(id)는 중복되지 말고 고유해야 한다. 아이디(id)가 하나의 웹페이지에서 중복되면 웹 표준 위반이다. 

이러한 아이디(id) 속성을 이용하여 요소(element)가 고유해지면 CSS는 이 고유한 요소(element)를 선택하여 꾸미거나 필요한 작업을 수행할 수 있게 된다.

CSS에서는 특정 아이디(id)의 요소를 선택하기 위해서는 해쉬(#) 문자를 아이디(id) 속성값 앞에 붙여 해당 아이디(id)를 가진 요소를 선택하는 선택자를 만들 수 있다.

이제 다음과 같이 수정해서 0037_2.html보자. 

처음 작성한 0037.html 파일과 달리 각각의 <p> 블록에 아이디(id) 속성들이 주어졌고, 이러한 아이디(id)를 가진 요소를 선택하기 위하여 CSS에서는 #first, #second, #third, #fourth로 각각의 아이디(id) 속성을 가진 요소들에게 개별적으로 스타일을 적용하고 있다.

실행해보면 다음과 같이 동일했던 <p> 블록들이 각자 서로 다른 <p> 블록들로 나타난다.

아이디(id) 속성은 모든 HTML 요소에 사용할 수 있는 전역속성(global attribute)이다. 아이디(id)의 속성값은 최소 1개의 문자가 있어야 하며 스페이스나 탭 등의 공백(whitespace)은 허용되지 않는다. 이 때, 아이디(id)의 속성값은 대소문자를 가리므로 선택자를 작성할 때 주의해야 한다. 

2019. 1. 2일 아이디(id) 속성값에 대하여 다음과 같은 내용을 추가함. 

HTML 5 이후로 아이디(id) 속성값은 은 상기와 같은 규칙으로 바뀌었다고 W3C 튜토리얼에서 확인했으나 실제 아이디(id)를 숫자로 시작하거나 하이픈, 밑줄, 콜론, 마침표가 아닌 특수 문자를 쓸 경우 아이디(id) 속성이 작동하지 않는 것을 확인하고 아래와 같은 HTML 4.01 기준이 여전히 작동하고 있는 것을 확인함

다음은 아이디(id)의 속성값이 잘못 기입된 사례이다. 

아이디(id)와 비슷한 것으로 클래스(class)가 있다. 아이디(id)는 오직 하나의 고유한(unique) 요소를 식별하기 위하여 부여하는 속성이라면 클래스는 다양한 요소들을 묶어서 특정한 클래스(class)로 만들기 위한 속성이다. 클래스(class)에 대해서는 다음에 알아보도록 하자.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0037 HTML 요소의 아이디(id) 속성과 CSS의 아이디(id) 선택.apkg

2019/01/02 1:19 AM 아이디(id) 속성값 작성 규칙 수정 및 Ankilog 파일 수정