[CSS]div 와 span , class 와 id 차이점이 무엇인가?

div 와 span ( non-semantic 태그 )

※ 시멘틱 태그 와 논시멘틱 태그의 차이점을 알고싶다면 ↓↓↓

2021/01/03 - [IT&컴퓨터공학/HTML&CSS] - [html5] 시멘틱 태그란?

[html5] 시멘틱 태그란?

 

• div : 줄바꿈이 자동으로 된다.
• span : 줄바꿈이 자동으로 되지 않는다.

 

 

왜 이러는 걸까 ? 

 

• div : block 요소 -> inline 요소와 텍스트를 모두 포함 , 안에 block 요소도 포함가능
• span : inline 요소 -> inline 요소와 텍스트를 모두 포함 ,  안에 block 요소는 포함할 수 없음

 

block 속성인 div 의 경우에는 박스형태로 영역 구간이 잡히면서 자동으로 개행이 되지만,

inline 속성인 span 의 경우에는 콘텐츠가 있는 부분까지만 영역으로 설정되기때문에 자동으로 개행이 되지않음

 

 

※ blcok, inline, inline-block 의 차이점을 알고싶다면 ↓↓↓

2021/01/03 - [IT&컴퓨터공학/HTML&CSS] - [CSS] display 속성 : inline , block , inline-block 차이점

 

class 와 id ( 선택자 )

공통점 : 특정 요소를 대상으로 스타일을 적용하기 위한 것. 즉 class 와 id를 이용하면 100개의 <p> 요소 중 특정한 <p> 요소에만 스타일을 적용할 수 있음.

 

차이점

• class : '복수'의 요소에 스타일을 적용. 중복이 가능하다. '.' 이용
• id : '유일'한 요소에 스타일을 적용. 따라서 중복되면 안된다. '#' 이용
• 우선순위는 id > class

 

참고 ) lktprogrammer.tistory.com/88