[HTML] div 태그와 span태그, class속성과 id속성

2020. 7. 11. 20:50Front-End/HTML

- <div> Tag

 - div 태그는 웹 페이지의 전체적인 레이아웃을 설정할 때 주로 사용

 - 블록(block) 형태로 사용

 

- <span> Tag

  - span 태그는 웹 페이지의 일부분을 설정할 때 주로 사용

  - 인라인(inline) 형태로 사용

 - 해당 태그의 내용을 웹 페이지의 출력 결과이며 웹 페이지 상에서는 두 개의 태그의 차이점이 없어 보임

 - 확인을 위해서는 크롬에서 개발자 도구에 접속하면 해당 내용을 찍어보면 차이점을 확인이 가능

 - div 태그를 확인했을 때는 문장이 짧아도 다른 영역까지의 폭을 차지하고 있는 상태

 - span 태그를 확인했을 때에는 문장에 폭에 따라 문장 내용까지만 폭을 차지하고 있는 상태

 

- 속성 class와 id

 - HTML 태그에는 속성에는 class와 id로 주로 설정이 된다.

  - class : 복수적인 요소에서 주로 사용, 피리어드(.) 사용

               class 값은 한 문서에서 여러번 사용이 가능

   ex) .class, .wrap, .inner

  - id : 유일한 요소에서 주로 사용, 샤프(#) 사용

           하나의 id값은 문서에서 한 번만 사용이 가능

            class 속성보다 id의 속성이 우선순위가 더 높음

   ex) #btn, #text, #submit

'Front-End > HTML' 카테고리의 다른 글

[HTML] META 태그  (0) 2020.08.23
[HTML] HTML 레이아웃 구조  (0) 2020.07.11
[HTML] HTML 정의  (0) 2020.07.11