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
반응형
'Front-End' 카테고리의 다른 글
[CSS] CSS 선택자 - Type / Class / ID (0) | 2023.02.27 |
---|---|
[CSS] CSS란 / CSS 구성 요소 / CSS 연동방식 (0) | 2023.02.27 |
[HTML] 구조를 잡을 때 사용하는 태그 (0) | 2023.02.27 |
[HTML] HTML 기본 태그 (0) | 2023.02.27 |
[WEB] 웹을 구성하는 요소 (0) | 2023.02.27 |