[HTML] 블록 요소(block element)와 인라인 요소(inline element)

블록 요소 vs 인라인 요소

• 블록 요소 : 블록 요소는 요소가 페이지 좌우너비 전체를 차지하는 하나의 ‘블록’이라고 볼 수 있다.
  • ex. <p>, <h1>-<h6>, <ol>, <ul>, <li>, <blockquote>, <div> 등
    
• 인라인 요소 : 인라인 요소는 필요한 만큼의 너비만 차지하는 요소이다. in-line 말 그대로 행 자체이기보다는 행의 내부에 (다른 요소들과) 있다.
  • ex. <a>, 텍스트 포매팅 요소(<b>, <i> 등), <abbr>, <map>, <img>, <span> 등
    
• 블록 요소는 블록과 인라인 요소 모두를 담을 수 있지만, 인라인 요소 안에는 블록 요소가 담길 수 없다!

  ---

<div>와 <span>

• <div> 태그 : 페이지의 컨텐츠를 나누거나('div'ide) 그룹핑하는데 사용되는, 마치 컨테이너와 같은 역할을 하는 요소로 대표적인 블록 요소이다.

• <span> 태그 : 제목이나 본문 요소 등 안에서 텍스트의 일부를 선택하는 태그. 선택할 부분을 <span> 태그 안에 넣으면 된다. 대표적인 인라인 요소.

• ex.

  <div style="background-color:PaleGoldenRod">
  <h1>Div element</h1>
  <p>This is an div element. Div divides and groups these contents.</p>
  </div>
  
  <div>
  <h1> &lt;span&gt; inside div</h2>
  <p><p>I want to change only
  <span style="color:LightPink">
  This Part</span> of the code.</p></p>
  </div>

  

  ---

<div> 요소 스타일 활용하기

• margin:auto; : div 요소의 너비가 (스타일에 의해) 페이지 너비보다 좁다면, div 요소를 자동적으로 중앙으로 정렬해준다.
• display: inline-block; : 다른 요소의 위아래로 쌓이는 대신, 인라인 요소처럼 페이지의 여백을 채우는 식으로 작동한다.
• float : inline-block의 효과와 유사하게, float를 이용해서 여러 개의 div 요소가 양옆으로 서로 정렬되도록 할 수 있다.
  
• ex :

  Div {
       width: 40%;
       float:left;
       margin: 10px;
      }

  
  
• 이외에도 CSS의 display:flex 혹은 display:grid 를 이용하여 더 간편하게 div를 이용한 레이아웃을 설정할 수 있다. (https://webdesignerdepot.com/when-pages-are-not-paper-the-designers-guide-to-layout-code/ 참고 시 div style을 웹 레이아웃에 활용하는 방법을 더 알 수 있음)