[HTML] div 태그와 span태그, class속성과 id속성
2020. 7. 11. 20:50ㆍFront-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 |