01 - 2 HTML 태그 요소 (블록 , 인라인 요소)

 

          앞서 알아본 간단한 태그들은 어떤 태그를 사용하느냐에 따라 줄바꿈이 일어나거나

          혹은 옆으로 나열되는 형태로 태그가 표현됩니다.

 

 

 

 

01 ) Block element  (블록 요소)

      블록요소의 특징은 해당 태그 작성 후 다음줄은 줄바꿈 처리가  됩니다.

      블록요소의 해당하는 태그들은 웹브라우저 화면의 가로너비 사이즈 만큼 한줄을 전부 차지하는 특징을 가지고 있습니        다.

 

<h1>나는 제목입니다1</h1>

    <h2>나는 제목입니다2</h2>

 

    <p>나는 텍스트 단락 태그입니다.</p>

 

    <ul>

        <li>목록입니다1</li>

        <li>목록입니다2</li>

        <li>목록입니다3</li>

    </ul>

 

    <div>

        <h2>제목입니다2</h2>

        <h3>제목입니다3</h3>

        <p>문단입니다</p>

    </div>

 

위에서 작성된 코드들은 블록요소의 형태를 가지고 있기 때문에

줄바꿈이 일어납니다.

 

 

2) Inline elemnet (인라인요소)

      인라인 요소의 특징은 해당줄에 줄바꿈이 일어나지않고 옆으로 나열되는 특징을 지니고 있습니다.

      인라인 요소는 같은 요소들끼리의 줄바꿈이 일어나지않습니다.

      인라인 요소는 해당 콘텐츠 내용만큼만 자리를 차지합니다.

 

    <span>인라인 요소에 해당하는 태그1</span>

    <span>인라인 요소에 해당하는 태그2</span>

    <span>인라인 요소에 해당하는 태그3</span>

    <img src="dog.png"/>

    <img src="leaf.jpg"/>

    <img src="logo.png"/>

 

위에서 작성된 코드들은 인라인 요소의 형태를 가지고 있기 때문에

줄바꿈이 일어나지 않는다는 특징을 가지고 있습니다.