본문 바로가기

coding/html

[html] id / class 구분

안녕하세요. 플입니다.

id와 class 속성은 어떤 점이 다를까요?

 


 1.  id

<div id="header">
</div>


<div id="footer">
</div>

 

id 속성은 

identifier의 약자인데 '식별자'라는 뜻입니다.

 

식별을 위해서는 동일한 이름이 여러 개가 있으면 안 되겠죠.

그래서 id는 동일 이름이 한 html문서당 한 개만 사용하는 것을 권장합니다.

 

똑같은 이름을 여러 번 쓴다고 오류가 나는 것은 아니지만

나중에 본인이 짠 코드를 보기 어려워질 수 있습니다.

 

보통은 headerfooter에 id를 주로 쓰고

경우에 따라서 container에도 id값을 주기도 합니다.

 

 


 2.  class

<ul class="gnb">
   <li></li>
   <li></li>
   <li></li>
</ul>

 

classid 이외의 요소에 스타일을 주고 싶을 때 주로 사용합니다.

예를 들어 gnb 같은 부분이 있겠죠.

 

또 선택자로 잡기 힘든 여러 군데 퍼져있는 요소에

동일한 스타일을 줄 때 같은 class명으로 묶어주기도 합니다.

 

뭐가 이렇게 복잡해... 하시다면

header와 footer 이외에는 class를 사용하시고,

익숙해지시면 자신만의 규칙을 만들어보는 것을 권장합니다.

 

선택자로 잡는 것보다 class 주고 한 번에 잡는 게 편하거든요..

 


그럼 이만.

총총.

'coding > html' 카테고리의 다른 글

[html] a태그를 이용한 스크롤다운  (0) 2020.05.01
[html] figure 활용하기  (0) 2020.03.27
[html] id / class 구분  (0) 2020.02.12
[html] 의미 없는 문장 채우기  (0) 2020.02.10
[html] 뷰포트 설정하기  (10) 2019.12.23
[html] 태블릿 사이즈 설정하기  (0) 2019.12.13