[CSS] div와 span, id와 class는 무엇이 다른가요?

[CSS] div와 span, id와 class는 무엇이 다른가요?

개인적으로 근무하는 곳 홈페이지 개편을 하기 위해 html과 css를 다시 정리하고 있습니다. 궁금한 내용들을 인터넷으로 검색하면서 정리하는 내용들을 이 곳에 함께 정리하려고 합니다. 검색해서 오신 분들에게는 좋은 정보를 제공하고, 저 자신에게는 다음에 참고할 자료를 정리하는 의미로 기록을 남깁니다. 누군가에게 조금이나마 도움이 되었으면 좋겠습니다.

1. 그룹화 요소 (div와 span)

div 요소는 블록(block) 레벨 요소이며 인라인(inline) 요소와 텍스트를 포함하고 다시금 블록 레벨 요소를 포함할 수 있습니다. 한편 span 요소는 인라인(inline) 요소이며 인라인 요소와 텍스트를 포함하지만 블록 레벨 요소를 포함할 수는 없습니다. 따라서 div 요소는 블록 레벨 요소, span 요소는 인라인 요소나 텍스트의 그룹화를 위해 사용합니다.

• div : 블록(block) 요소
  
• span : 인라인(inine) 요소
  

앞의 그림을 보면 div와 div는 줄 바꿈이 생기고, span과 span 사이에는 줄 바꿈이 생기지 않는 것을 볼 수 있습니다. div는 전체적인 레이아웃을 잡을 때, span은 텍스트 스타일 등 특정 부분에 스타일을 지정할 때 사용할 수 있습니다.

2. id와 class

id 선택자와 class 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것입니다. 예를 들어 id와 class를 사용하면 모든 <p>요소가 아닌 특정한 <p>요소에만 스타일을 적용할 수 있습니다.

id 선택자와 class 선택자의 차이는 문서 안의 '복수'의 요소에 스타일을 적용하는 것인가 아니면 '유일'한 요소에 스타일을 적용하는 것인가입니다. 결론적으로 말하면 id는 '유일'한 요소에 적용, class는 '복수'의 요소에 적용할 수 있습니다.

• id : '유일'한 요소에 스타일을 적용
• class : '복수'의 요소에 스타일을 적용

id 선택자

id 선택자는 문서 안에 있는 단 하나의 요소에 스타일을 적용하는 경우에 사용합니다. 선택자에 샤프(#)와 id명(임의의 이름)을 붙여 식별합니다.

class 선택자

class 선택자는 문서 안 복수의 요소에 스타일을 적용하는 경우에 사용합니다. 요소명에 피리어드(.)와 class명(임의의 이름)을 붙여 구별합니다.

id와 class의 차이점을 다시 정리해보면..

• 하나의 id는 한 문서에서 한 번만 사용이 가능합니다.
• 하나의 class는 한 문서에서 여러 번 사용이 가능합니다.
• id의 속성이 class의 속성보다 우선 순위가 높습니다.
• 따라서 id의 속성은 해당 요소에 부여된 class 속성에 관계 없이 작동합니다.