728x90
반응형
SMALL
1. inline 요소
- content 크기 만큼만 자리를 차지하는 요소
- width, height로 크기를 지정할 수 없음
- padding, margin으로 좌우에만 여백을 지정할 수 있음 (위, 아래는 안됨)
- 여러개의 인라인 요소가 있을때, 수평으로 쌓임(옆으로)
- 보통 Text를 작성할 때 사용
- 인라인 요소의 종류: span, img
1-1. <span> 태그
- 줄 단위로 영역이 설정
- inline 특징을 가지고 있음
- 텍스트에 대한 스타일 속성을 줄 때 사용
2. block 요소
- 라인을 모두 차지하는 요소
- 사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기 만큼 설정됨
- width, height로 크기를 지정할 수 있음
- padding, margin으로 상하좌우 여백을 지정할 수 있음
- 여러개의 블록 요소들이 있을때, 수직으로 쌓임 (한 줄에 하나의 블록 요소만 위치할 수 있음)
- 보통 레이아웃을 잡을때 자주 사용
- 블록 요소의 종류: p, h, ul, li, div...
2-1. <div> 태그
- 면 단위로 영역이 설정
- block 특징을 가지고 있음
- 웹사이트를 만들 때 주로 사용
3. Inline-Block 요소
- 인라인 요소처럼 너비와 높이가 내부 컨텐츠 크기만큼 설정됨
- 블록 요소처럼 width와 height로 너비와 높이를 설정할 수 있음
- 블록 요소처럼 padding과 margin으로 상하좌우 여백을 지정할 수 있음
- 인라인 요소처럼 여러개의 인라인블록 요소가 있을때, 수평으로 쌓임(옆으로)
- 인라인블록 요소를 생성하려면, css의 {display: "inline-block";}으로 스타일을 적용해야 함
✅ 예제로 적용해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디스플레이</title>
</head>
<body>
<h2>디스플레이</h2>
1. <span style="font-size: 30px; color: red;">span 태그 영역</span>입니다.
<div style="width: 600px; height: 300px; background-color: gold;">div 태그 영역</div>입니다.
</body>
</html>
📄 예제 HTML 파일
728x90
반응형
LIST
'Web > HTML' 카테고리의 다른 글
| [HTML] 시맨틱 태그(Semantic Tag) (0) | 2023.03.28 |
|---|---|
| [HTML] form 태그와 여러가지 태그 - input, label, textarea, button (0) | 2023.03.27 |
| [HTML] 아이프레임 만드는 법 - 웹사이트 내 웹사이트 삽입하기 (0) | 2023.03.27 |
| [HTML] 테이블 만드는 법 - 테이블 속성 설정하기 (1) | 2023.03.27 |
| [HTML] 책갈피 기능 만드는 법 - 페이지 내 이동하기 (0) | 2023.03.27 |
