HyunJun 기술 블로그

HTML의 Element와 Block, Inline, inline-block Elements, 주석 본문

HTML

HTML의 Element와 Block, Inline, inline-block Elements, 주석

공부 좋아 2023. 4. 27. 20:10
728x90
반응형

1. Element(요소)란?

HTML의 요소(Element)란 HTML 문서나 웹 페이지를 이루는 개별적인 요소를 의미합니다.

 

  • Element는 Start tag부터 end tag까지 모두를 의미합니다.
  • 예를 들어 <tagname>contents</tagname>과 같습니다.
  • 일부 HTML 요소에는 컨텐츠 자체가 없는 경우도 있는데 이러한 경우 end tag도 없습니다. ex) <br>
  • HTML의 요소는 아래와 같이 5가지의 내용이 있습니다.
    • <1. 시작 태그 2. 속성 이름="3. 속성 값">4. 내용</5. 종료 태그>

2. text

HTML은 용도에 따라 태그를 구분하여 페이지를 표현하지만, 태그를 작성하지 않아도 내용은 입력이 됩니다.

<html>
  <head> </head>
  <body>
    Hello HTML!
    a
    b
    c
  </body>
</html>

 

단순히 텍스트만으로 만든 내용은 아무런 태그를 가지지 않으며 줄바꿈을 한 칸의 띄어쓰기(space)로 인식합니다.

결과

또한, 속한 태그가 없기 때문에 선택적으로 스타일을 줄 수 없으며, 개발자 도구로 확인 시 스타일이 잡히지 않습니다.

하여 이러한 단순 텍스트는 지양하는 것이 좋습니다.

3. 블록 요소와 인라인 요소, inline-block

그렇다면 태그(요소)를 사용하기 전에, 요소에는 블록 요소와 인라인 요소가 존재합니다.

3-1. Block Element: div, p, h, ul, ol, form, ...

  • 좌, 우로 표현 가능한 최대의 가로 너비를 사용합니다.
  • width, height, margin, padding 등을 사용하여 블록의 크기가 변경 가능합니다.
  • 모든 인라인 요소를 포함할 수 있습니다.
  • 다른 블록 요소도 일부 포함 가능합니다.
  • 레이아웃을 나누는 용도로 사용합니다.

Div 태그

  • div 태그는 레이아웃 계층 분할(division) 하는 용도입니다.
  • 코드상에서 개행은 한 줄의 띄어쓰기만 적용됩니다.
<div>
  앞으로 가장 많이 사용하는 엘리먼트입니다. 이렇게 입력하면 어떻게 뜰까요?
  길게 길게 적어서 다음 줄까지 맞춰지도록 해볼까요?
</div>

<div>한번 확인해 보죠</div>
  • 코드 상에서 엔터(줄 바꿈)를 입력했지만, 하나의 div 내에서는 적용되지 않았고, 아래의 사진처럼 한 칸의 공백으로 인식합니다.
  • 또한 하나의 div마다 한 줄을 차지하는 것을 확인할 수 있습니다.
  • 마지막으로 크롬 개발자 도구로 확인 시 하나의 div가 표현 가능한 최대의 가로 넓이를 가지고 있는 것을 확인할 수 있습니다.

 

P 태그

  • p 태그는 실제 문단(paragraph)을 작성하는 용도로 사용됩니다.
  • p 태그는 위, 아래로 margin(여백)을 가집니다.
  • 코드상에서 개행은 한 줄의 띄어쓰기만 적용됩니다.
<p>
문단을 작성하는 엘리먼트입니다. 이 엘리먼트도 길게길게 적어볼까요?
줄바꿈이 될때까지
</p>

<p>한번 확인해 보죠</p>

 

역시 최대 가로 넓이를 가지고 있고, 위아래로 16씩 margin 값을 자동으로 가지고 있습니다.

 

3-2. 인라인 요소: span, a, img, ...

  • 컨텐츠 길이만큼의 사용 중인 영역만 표현 가능합니다.
  • 한 줄에 여러 인라인 요소를 배치 가능합니다.
  • height, width가 적용되지 않습니다.
  • 항상 블록 요소 안에 포함되어 있습니다.
  • 인라인 요소 안에 다른 인라인 요소가 포함될 수 있습니다.
  • 텍스트를 작성하는 요소로 적합합니다.

 

span 태그

  • span 태그는 특정 문단(span, 폭)에 색을 준다든지 강조하기 위해 사용됩니다.
<span>
  안녕하세요.
  반갑습니다.
</span>
<span>가</span>
<span>나</span>
<span>다</span>

 

하나의 개행마다 한 칸의 공백으로 인식하며, 컨텐츠의 길이만큼만 사이즈를 차지하고 있습니다.

결과

 

 

3-3. inline-block

style에서 display 속성 변경으로, 컨텐츠만큼의 공간을 차지하는 Inline의 장점과

width, height 조절이 자유로운 Block의 장점을 합친 inline-block 요소로 설정이 가능합니다.

<div style="display: inline-block; width: 500px; height: 100px">인라인 블럭 속성을 가집니다.</div>
<div style="display: inline-block; width: 500px; height: 100px">인라인 블럭 속성을 가집니다.</div>
<div style="display: inline-block; width: 500px; height: 100px">인라인 블럭 속성을 가집니다.</div>

4. 포함 관계

  • span은 자식 요소로 div, p 태그를 포함할 수 없습니다.
  • 기본적으로 span 안 내용이 짧을 경우 해당 요소의 영역은 div, p 태그보다 작으므로, span 안에는 블록 요소를 넣지 않습니다.
  • 반대로, div와 p 태그는 span 태그를 포함할 수 있습니다.
  • p 태그는 div 태그를 포함할 수 없습니다.
  • p 태그는 기본적으로 문단을 입력하는 용도이므로, p 태그 안에는 레이아웃을 나누는 용도인 div 요소는 포함할 수 없습니다.
  • p 태그의 자식 요소로써는 span, a, strong 등과 같은 인라인 요소만 올 수 있습니다.
  • 문단 안에 문단을 넣으면 말이 안 되는 것처럼, 문단 안에 이미지를 넣는다는 말이 되는 것처럼 생각하면 쉽습니다.
<p><div>테스트</div></p>와 같은 형태가 있다면,
<div><p>테스트</p></div>와 같은 형태로 바꾸어야 합니다.
div 태그는 p 태그를 포함할 수 있습니다.

div 태그는 p 태그처럼 문자를 입력할 수 있지만 실제 용도는 HTML 문서의 영역 구분을 하기 위한 요소입니다.
각 영역의 용도를 구분하는 기능이므로 다른 블록 요소가 하위에 포함될 수 있습니다.

 

5. 연습

아래 HTML의 결과는 어떻게 될까요?

<div>
  <div>1</div>
  <span>2</span>
  <span>3</span>
  <div>
    <span>4</span>
    <div>5</div>
  </div>
</div>

 

 

 

 

<div>
  <p>
    <span>1</span>
    234
    <span>5</span>
    <p>6</p>
  </p>
  <div>7</div>
  <div>8</div>
</div>

 

하지만 위의 코드는 문법적으로 오류가 있습니다. p 태그(부모 요소)안에 p 태그(자식 요소)가 들어가 있기 때문입니다.

하지만 똑똑한 크롬은 p 태그의 자식 요소로 있던 p 태그를 바깥으로 꺼내어 줍니다.

6. 주석, Comment

<!-- -->안에 내용을 넣을 경우 주석으로 인식하며 브라우저가 읽지 않습니다. 단 개발자 도구에서는 보이므로 실제 배포되는 페이지(사이트)라면 주석을 제거해 주는 것이 좋습니다.

<!-- 주석, comment -->
<p>나는 p 태그</p>

개발자 도구

7. 결론

결론적으로, 단순 텍스트 정보일 경우 p 태그에 사용하고, 구역을 나누기 위한 용도일 경우 div 태그를 사용합니다.
또한, 특정 요소를 강조하고 싶은 경우 span 태그를 사용하는 것으로, 쓰이는 용도에 따라 구분해서 태그를 사용하여야 합니다.

728x90
반응형
'HTML' Related Articles more
Comments