html div 태그

⭐ div 태그

div 태그는 혼자서 한 줄을 차지하는 block 속성의 태그로 division, 즉 영역을 구분하기 위한 태그다.
div태그만 단독으로 사용할시 p태그와 큰 차이가 없으며 주로 style과 여러 속성을 같이 사용하여 각 영역마다 다양한 스타일을 만들기 위해 사용한다.

매우 많이 사용되는 태그이므로 꼭 기억하는 것이 좋다!!

⭐ block / inline / inline-block

영역을 설정하여 화면에 출력했을 때 보여지는 형태 즉, display에는 3가지가 있다.

📌 block 속성

• 혼자서 한 줄을 차지한다.
• 연속적으로 배치하면 세로로 배치된다.
• style을 이용하여 너비(width), 높이(height)를 지정할 수 있다.
• 대표적으로 div태그를 사용하여 영역을 설정하면 그 영역은 기본적으로 block이 된다.

📌 inline 속성

• 한 줄에 여러 요소를 배치할 수 있다.
• 연속적으로 배치하면 가로로 배치된다.
• style을 이용하여 너비 및 높이를 지정해도 적용되지 않는다.
• 대표적으로 span을 이용하여 영역을 지정했을 경우 해당 영역은 inline속성을 갖게 된다. 높이/너비 지정이 불가하기 때문에 주로 글씨의 영역을 정해 폰트 크기 및 색상 등을 변경할 때 사용한다.

📌 inline-block 속성

• inline과 block의 특성을 합친 형태
• 한 줄에 여러 요소를 배치할 수 있고, 가로로 배치된다.
• inline과는 달리 너비 및 높이를 지정할 수 있으며 다양한 style을 적용할 수있다.
• div를 이용하여 style에  display: inline-block; 을 작성해주면 적용된다.

📌 예시

    <div style="background-color: palevioletred;">div영역1</div>
    <div style="background-color: palevioletred;">div영역2</div>
    <div style="background-color: palevioletred;">div영역3</div>
    <!-- div영역은 기본적으로 1줄을 차지한다 -->
    <br>

    <div style="background-color: skyblue; width: 100px; height: 100px; border: 1px solid grey;">div영역3</div>
    <div style="background-color: skyblue; width: 100px; height: 100px; border: 1px solid grey;">div영역4</div>
    <div style="background-color: skyblue; width: 100px; height: 100px; border: 1px solid grey;">div영역5</div>
    <!-- div영역은 block속성이므로 연속적으로 배치시 세로로 배치된다 -->
    <!-- div영역은 style을 이용해 높이/너비 설정이 가능하다 -->
    <br>

    <span style="background-color: lemonchiffon;">sapn영역1</span>
    <span style="background-color: lemonchiffon;">sapn영역2</span>
    <span style="background-color: lemonchiffon;">sapn영역3</span>
    <!-- span영역은 inline속성이므로 연속적으로 배치시 가로로 배치된다 -->
   <br>
   <br>

    <span style="background-color: aquamarine; border: 1px solid grey; width: 100px; height: 100px;">sapn영역4</span>
    <span style="background-color: aquamarine; border: 1px solid grey; width: 100px; height: 100px;">sapn영역5</span>
    <span style="background-color: aquamarine; border: 1px solid grey; width: 100px; height: 100px;">sapn영역6</span>
    <!-- style로 높이/너비를 설정해도 적용되지 않음 -->
    <br>
    <br>

   <style>
        div.inlineblock > div {
            display: inline-block;
        }
    </style>
	<!--원래 style은 head에 적어야 하지만 가독성을 위해 이번만 적어보았다...-->

    <div class="inlineblock">
        <div style="background-color: cornflowerblue; width: 100px; height: 100px; border: 1px solid grey;">inline-block영역1</div>
        <div style="background-color: cornflowerblue; width: 100px; height: 100px; border: 1px solid grey;">inline-block영역2</div>
        <div style="background-color: cornflowerblue; width: 100px; height: 100px; border: 1px solid grey;">inline-block영역3</div>
    </div>
    <!-- style의 display를 inline-block으로 설정 -->
    <!-- 가로로 배치되는 특성을 가지지만 style로 너비/높이를 지정할 수 있다 -->