[HTML/CSS] div, span, id, calss

HTML/CSS 공부
개발 언어 : HTML/CSS
개발 환경 : Visual studio Code

[HTML/CSS] div와 span, id와 class의 차이는?

무작정 blog 나 Youtube 를 보면 따라하면서 느꼇던 의문인데 그냥 따라하기만 하다가 확실히 정리해두려고 한다.

우선 레이아웃의 요소들을 보면

• width, height : box 모델의 너비와 높이
• display : 화면에 요소가 어떻게 보일지 결정하는 요소
• border : box 모델의 테두리
• margin : box 모델의 마진(요소간 여백)
• padding : border와 content 사이의 여백
• border-radius : box 모델의 모서리를 둥글게 처리

block level, inline level

박스 모델은 크게 2가지, 블록 레벨과 인라인 레벨로 나뉜다.

• block-level : 혼자 한 줄을 차지하는 요소(너비는 고정)
• inline-level : 줄을 차지하지 않고 화면에 표시되는 content영역 만큼만 차지

그룹화 요소 div와 span

• div
  • div는 블록(block) 요소이며, 인라인(inline) 요소와 텍스트를 포함하고 다시 블록 레벨 요소를 포함할 수 있다.
• span
  • span은 인라인(inline) 요소와 텍스트를 포함하지만 블록 레벨 요소를 포함 할 수 없다.

선택자 id와 class

id와 class 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것이다.

• id
  • identification: 신분, 신분증명서 의 약어로서 유일성, 즉, 문서 안에 단 하나만 존재해야한다.
  • #기호를 사용한다.
• class
  • 문서 안에 복수의 요소에 스타일을 적용하는 경우에 사용한다.
  • .기호를 사용한다.

그림을 보면 div1영역에서 span들은 줄바꿈을 하지 않고 표시된다. 반면에 div1영역 밖의 span은 줄바꿈을하고 표시된다.

class는 JAVA나 C++다른 언어에서 하나의 객체로 생각하듯이 HTML/CSS에서도 하나의 객체로 생각하면 될 것 같다.