div 태그의 특징 3가지 (HTML/CSS 내 레벨 확인)

안녕하세요.

이번 시간에는 div 태그의 특징 3가지를 알아보도록 하겠습니다.

오해도 생기고 헷갈리기 쉬운 내용들인데요. 문제도 풀어보시면서 내가 HTML/CSS를 어느 정도 알고 있는지도 확인해 보세요 :)

알고 있으신 내용이면 리마인드를 하실 수 있는 기회가 되고, 모르시는 내용이라면 꼭 숙지를 해주셨으면 좋겠습니다.

 

첫 번째, div 태그는 Inline level vs Block level 중 어떤 레벨의 태그에 속할까?

Block level입니다😄

 

Inline level과 Block level의 큰 차이점을 보면 Inline은 하나의 라인에 쭉 생성이 돼요.

하지만 Block level은 블록이 만들어지는데요. 여러 개의 <div></div>를 층층이 쌓게 되면, 블록들이 줄이 바뀌면서 층층이 쌓이게 되겠습니다.

다른 특징은 Block level은 width와 height의 속성이 부여가 되는데요. Inline level은 width와 height의 속성이 먹히지 않고요. (실제 확인)

Inline은 컨텐츠의 크기 만큼 width와 height를 차지하는데, block은 width는 부모의 크기 height은 컨텐츠의 크기만큼 차지하겠습니다.

---

두 번째, width와 height의 값을 부여하면 구체적으로 어떤 box의 크기가 증가할까?

content box의 크기입니다😀

html의 box 구조는 그림과 같습니다.

mdn(링크는 아래 참고)

div태그를 사용하게 되면 지금 보시는 box가 만들어지겠습니다. box는 margin-border-padding-content로 구성이 되겠습니다. 태그 사용 시 "그냥 box가 만들어지는구나"가 아니고, margin-border-padding-content로 구성이 되는 걸 구체적으로 인지를 해주셔야겠습니다.

width와 height 값을 부여하면 Content 영역의 크기가 부여되는데요. content 영역뿐만 아니라 margin-border-padding의 부여된 값의 따라서 box의 전체 크기가 결정이 되는 거예요.

width와 height의 크기를 box의 전체 크기로 오해를 하시면 안 되겠습니다.

 

---

세 번째, 배경을 부여하면 어떤 box의 배경이 부여가 될까?

content box와 패딩 범위입니다🚀

margin은 외부 여백을 위한 역할을 할 것인고, border인 테투리도 배경과 상관 없이 부여 되는 걸 보실 수 있겠습니다 :)

 

참고)

MDN: 링크