[HTML/CSS] Block 요소와 Inline 요소

Block 요소와 Inline 요소

<!-- Block 요소 -->
<p>Hello Elice</p>
<p>Hello Elice</p>
<p>Hello Elice</p>

<!-- Inline 요소 -->
<a>Bye Elice</a>
<a>Bye Elice</a>
<a>Bye Elice</a>

두 요소를 구분 짓는 세 가지 주요 특징

• 줄바꿈 현상
• 가로-세로
• 상-하 배치

Block 요소

Hello Elice
Hello Elice
Hello Elice

• y축 정렬 형태로 출력 (줄바꿈 현상 나타남)
• 공간을 만들 수 있고, 상하 배치 작업 가능
• 대표 예시) <h> 태그, <p> 태그

Inline 요소

Bye Elice Bye Elice Bye Elice

• x축 정렬 형태로 출력 (한 줄에 출력)
• 공간을 만들 수 없고, 상하 배치 작업 불가능
• 대표 예시) <a> 태그

 

Block 요소의 특징

<style>
    p {
        width: 200px;
        height: 200px;
        margin-top: 100px;
    }
</style>

• <p> 태그가 대표적
• <header> <div> <h1~h6>
• 줄바꿈 현상이 나타남
• width / height 값 사용 가능 -> 공간 만들기 가능
• margin / padding 값 사용 가능 -> 상하 배치 작업 가능 

 

Inline 요소의 특징

• <a> <span>
• 줄바꿈 현상 없음
• width / height 값 적용 불가
• margin / padding / bottom 값 적용 불가