본문 바로가기
coding/html + css

[html] id / class 구분

by 씸플레이 2020. 2. 12.
728x90
반응형

안녕하세요. 플입니다.

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 주고 한 번에 잡는 게 편하거든요..

 


그럼 이만.

총총.

300x250
반응형

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

[css] 눈누 웹폰트 적용하기  (0) 2020.04.16
[css] 배경색 반반 무많이  (4) 2020.04.14
[html] figure 활용하기  (0) 2020.03.27
[css] 최우선 적용  (0) 2020.02.13
[html] id / class 구분  (0) 2020.02.12
[html] 의미 없는 문장 채우기  (0) 2020.02.10
[css] z-index  (6) 2020.01.02
[css] 레이어 설정  (0) 2020.01.01
[html] 뷰포트 설정하기  (10) 2019.12.23

댓글0