이번 포스팅에는 HTML에서 블록 레벨 요소와 인라인 요소로 구분되는 태그들을 정리해봤습니다.
저번 포스팅에서 다뤘던 HTML 텍스트 태그에 대해 궁금하신분은 아래를 읽어보시면 좋습니다!
HTML 기초 2편 - 텍스트 태그
이번 포스팅에서는 저번에 이어서 프론트엔드에서 사용되는 HTML에서 텍스트를 표시하는데 사용되는 태그를 정리해봤습니다. 저번에 작성한 HTML의 구조와 이론에 대한 포스팅이 궁금하신분은
mlngwandev.tistory.com
블록 요소 (Block Level Element)
- 콘텐츠 자신이 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
종류
앞에서 살펴봤던 태그들 중에 블록 요소로 분류되는 태그들이 존재한다.
그래도 간단하게 설명해보자면,
p (문단) 태그
- 문단 요소를 나타내는 태그이자 가장 많이 사용되는 텍스트 태그이다.
- 하나의 p태그는 하나의 문단을 표현한다.
h (제목) 태그
- 제목 요소를 나타내는 태그이다.
- 1부터 6까지 숫자와 함께 사용하고 숫자가 커질수록 크기는 작아진다. (숫자와 크기가 반비례)
hr (수평선) 태그
- 수평선을 표시하는 태그이다.
다른 태그들...
이 외에도 블록 요소로 분류되는 태그들이 많다!
만약 다른 블록 레벨 요소 태그들이 궁금하다면 아래에서 찾아보길 바란다.
블록 레벨 요소 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서
developer.mozilla.org
인라인 요소 (Inline Element)
- 콘텐츠 자신에게 필요한만큼 공간을 차지한다.
종류
Strong (텍스트 굵게) 태그
- 감싸고 있는 콘텐츠를 굵게 표시하는 태그이다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<strong>Strong 태그 확인</strong>
</body>
</html>
결과
감싸져 있는 콘텐츠 (텍스트)가 굵게 표시되는 것을 알수있다.
em (이탤릭체) 태그
- 감싸고 있는 콘텐츠를 기울여 이탤릭체로 표시하는 태그이다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<em>이탤릭체 태그 확인</em>
</body>
</html>
결과
감싸져 있는 콘텐츠 (텍스트)가 기울어져 있다는 것을 알수있다.
mark (형광펜) 태그
- 감싸고 있는 콘텐츠에 형광펜 표시를 더하는 태그이다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<mark>mark 태그 확인</mark>
</body>
</html>
결과
감싸져 있는 콘텐츠 (텍스트)가 노란색으로 형광펜 표시가 더해져 있는 것을 알수있다.
다른 태그들...
이 외에도 인라인 요소로 분류되는 태그는 많다!
만약 다른 인라인 요소 태그들이 궁금하다면 아래에서 찾아보길 바란다.
인라인 요소 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.
developer.mozilla.org
블록 요소 / 인라인 요소의 공간 차지 확인하기
위 내용만 보면 감이 잘 안올것이다.
따라서 아래 예시를 통해 이해해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>블록 레벨 요소 확인</h1>
<p>블록 레벨 요소 확인을 위한 요소입니다.</p>
<strong>인라인 레벨 요소 확인</strong>
<em>인라인 레벨 요소 확인2</em>
</body>
</html>
위와 같이 코드를 입력하고 웹 브라우저에서 개발자 도구를 통해 이해가 가능하다.
개발자 도구를 통해 확인하는 블록 레벨 요소
위와 같이 블록 레벨 요소는 자신이 속한 공간 전체를 차지한다.
개발자 도구를 통해 확인하는 인라인 요소
위와 같이 인라인 요소는 자신이 필요한 공간만큼만 차지한다.
블록 요소 / 인라인 요소로 분류되는 태그들과 그 특징에 대해 알아보았습니다.
다음 편에는 이미지 태그와 컨테이너 태그에 대해 알아보겠습니다.
'Frontend > HTML' 카테고리의 다른 글
| HTML 기초 6편 - 링크 태그(a 태그)와 목록 태그 (0) | 2023.07.09 |
|---|---|
| HTML 기초 5편 - 전역 속성 (0) | 2023.07.08 |
| HTML 기초 4편 - 이미지 태그와 컨테이너 태그 (0) | 2023.07.07 |
| HTML 기초 2편 - 텍스트 태그 (0) | 2023.07.03 |
| HTML 기초 1편 - HTML 구조와 이론 (0) | 2023.06.27 |
