HTML ID
ID 속성은 HTML 태그에 특정 아이디를 붙여서, CSS 효과를 개별적으로 줄 때 사용합니다. 태그 뒤에 id를 입력후, id 값을 적습니다. <h1> 태그에 tomato라는 id 값을 지정하려면 아래와 같이 작성합니다.
<h1 id = "tomato">이 뜻은 해당 태그 속성에 id값을 tomato라고 입력한 것입니다.
<h1 id="tomato">HTML ID 속성</h1>
<p>ID 속성은 태그 뒤에 한 칸 띄고 ID 와 ID 이름을 기입합니다.</p>
ID 선택자 지정
id 값을 입력한 태그에 디자인 효과를 주기 위해서는 CSS 기술이 필요합니다. <head> 태그 사이에서 id 값에 선택자를 지정합니다.
id 속성의 선택자는 샵(#)기호를 id 값 앞에 붙여서 호출합니다. id값이 tomato인 id를 불러올 경우 아래와 같이 작성합니다.
#tomato{ }이 뜻은 id값이 tomato인 선택자를 불러와서 중괄호 안에 있는 CSS 효과를 주라는 의미입니다. 그래서 <h1> 태그 뒤에 id = "tomato"라고 적혔으므로 디자인이 변경됩니다. 클래스와 달리 여러 태그에 중복해서 id값을 입력해서는 안됩니다.
#tomato {
border:4px solid silver;
font-size:30px;
color:blue;
background-color:wheat;
}ID 중복 불가
ID 속성은 class와 달리 중복 사용이 불가능합니다. 중복이 필요한 경우 클래스 요소를 사용해야 합니다.
중복을 하면 나중에 자바스크립트, jQuery 등을 함께 사용시 문제를 겪게 됩니다. CSS는 자바스크립트와 반드시 연계가 되기 때문입니다.
다른 프로그래밍 언어도 HTML id와 비슷한 id값이 존재합니다. 대부분 기능이 비슷하므로 아이디 값은 중복을 하지 않는다고 생각을 하는 것이 좋습니다.
#A {
color:red;
}
#B {
color:blue;
}
#C {
color:green;
}