박스 모델을 이해하고 적용하는 개발자와 그렇지 않은 개발자는 코드 퀄리티에서 엄청난 차이가 납니다 !!! 백엔드를 개발하거나 다른쪽 프로그래밍을 공부 할 때에도 박스 모델을 이용하는게 굉장히 도움이 됩니다. 서비스를 어떻게 로지컬하게 세분화해서 나눌 수 있을지 생각하면서 개발하는, 마이크로 서비스가 가능하게 되는것입니다.
< 현업에서 일하는 선배의 팁 : 모든지 나누어 보세요 !! >
이번 시간에는 html 의 태그(Tag)들에 대해서 공부해보겠습니다 🔥
태그의 구분
html 에는 무수히 많은 태그들이 존재합니다. 하지만 딱 2가지로 분류가 가능합니다 !!
분류법을 보기전에, 간단한 스토리를 통해 이해를 해보겠습니다 📖
이사를 갈 때, 모든 아이템들을 한 상자에 담으면 이사할 때는 편하지만 이사를 가서 짐을 풀고 다시 정리를 할 때 정말 힘듭니다. 어디에다가 어떤 물건들을 넣을지 어디로 가져가야 할 지 막막하실 수 있습니다.
그래서 우리는 이사를 할 때 상자안에 아이템을 같은 것들끼리 분류해서 넣어두게 됩니다. 방마다 물건들을 분류해서 커다란 상자에 넣어두기도 하고, 스터디 룸 안에서도 옷장, 서랍장, 책장 등등 상자를 각각 만들 수 있고 서랍장이라 해도 첫번째 서랍, 두번째 서랍, 세번째 서랍 ,,,,, 이렇게 나눠서 담으면 조금 더 편하게 아이템을 정리 할 수 있습니다. 또한 레이블링이 쉽다는 장점이 있습니다.
그래서 우리는 박스 모델을 이용해서 태그들을 관리하게 되는 것입니다.
그런데 이렇게 많은 태그들이 있어도 딱 2종류 - 박스가 되는 태그이거나, 아이템이 되는 태그 둘 중에 하나로 구분이 가능합니다.
사용자에게 직접 보여지는 아이템, 아이템을 잘 정리 할 수 있게 섹셔닝을 도와주는 보이지 않는 박스가 있습니다. 보이지 않는 박스는 당연히 css를 이용해서 스타일링이 가능합니다. 하지만 기본적으로 html 에서는 사용자에게 보여지지 않습니다. 구체적으로 어떤 것들이 있는지 한번 보겠습니다 !!
[출처] : 드림코딩 by 엘리
사용자에게 직접 보여지는 아이템들도 2가지로 나눌 수 있는데요,
Block Level 인지 Inline Level 인지에 따라 배치가 조금 달라집니다.
Block 레벨의 요소들은 한줄에 하나 !! 가 들어가게 되고
Inline 레벨의 요소들은 공간이 허용하는 한, 바로 옆에 배치가 가능합니다.
직접 실습을 통해 여러가지 태그들을 확인해보겠습니다 🥸
기본기를 확실히 합시다 !!
