[HTML] block line 태그 5개를 일렬로 나열하면 어떻게 될까?

개발언어/HTML, CSS

Roxylife 2022. 7. 27. 15:15

먼저 block line vs inline 요소에 대해서 알게 되면, 우리가 궁금한 점을 해결할 수 있다.

inline 요소에 해당하는 tag 중에 <span>

<div>다음 span은 <span class="highlight">인라인 요소</span>로,
영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</div>

다음 span은 인라인 요소로, 영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.

block line 요소에 해당하는 tag 중에 <p>

<div>다음 p는 <p class="highlight">블록 레벨 요소</p>로,
영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.

다음 p는

블록 레벨 요소

로, 영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.

이처럼, inline 요소는 줄바꿈을 강제하지 않지만, block line 요소는 줄바꿈을 유발하도록 합니다.

그럼, block line 태그가 5개가 있다고 하면,어떻게 될까?

앞에 예시를 활용한다면,

다음 p는

블록 레벨 요소

로, 영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.

이런 현상이 나타날 것이다.

일단 HTML로만 이렇게 나타나겠지만, CSS로 수정을 해서 원하는 스타일로 바꿀 수가 있다.