TIL: 3일차 "div태그의 이해"

mong-byte·2021년 4월 7일
0

<div>태그란?

HTML에서 자주 사용 되는 <div>태그는 쉽게 말해 전체 <body>태그의 본문을 분할하는 요소라 할 수 있다.
<div>태그 하나로는 아무 내용도 포함하지 않지만, 이 태그 안에 들어가는 내용을 <div>태그를 통해 CSS로 조정하는것이 가능하다.
이 경우, 각각의 <div>태그들을 구분하기 위해 class 혹은 id 값을 부여하여 구분한다.
기본적으로 CSS를 적용하지 않았을때, <div>태그는 "블록 레벨 요소"의 속성을 가지며, 이 경우, <div>태그의 블록 옆에는 또다른 <div>태그가 올 수 없다.
CSS를 적용 할 경우, flex속성을 통해 한줄에 여러 <div>를 배치 할 수 있고, 그림자 효과, 배경색등등 여러 속성을 적용 할 수 있다.

이처럼 문서의 본문을 나누고 조정하는데에 유용한 태그이지만, <div>태그를 큰 의미가 없는 장소에 남발하여 배치하면, 후에 문서를 수정하거나, 에러가 발생하여 보수가 필요해질 경우, 해당 태그가 무엇을 의미하는지 몰라서 수정하기가 힘들어지는 경우가 발생 할 수 있다.
<div>태그를 사용할때엔 너무 세세하게 나누어 복잡하게 만드는것보다, 전체적인 틀을 잡는것을 우선적으로 생각하는 접근 방식이 필요하다.

관심 있을 만한 포스트

0개의 댓글