Among Us - Crewmates
 

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

728x90

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 값 적용 불가
728x90
반응형