HTML 문서를 만들게 되면 주로 작업하는 공간은 <body> 태그 사이이다. 실질적으로 보이는 부분이기 때문이다.
현재 우리는 HTML5로 작성된 웹페이지들을 보고 있다.
<h1>~<h6>
HTML에서 텍스트 혹은 이미지를 제목의 의미로 사용하고 싶을 때 사용한다.
<h1>은 대제목 <h2>는 소제목 순서로 <h6>까지 순차적으로 중요도가 낮아진다.
<h1>의 경우 HTML을 대표하는 제목의 역할을 하기 때문에 해당 문서에서 1번만 사용할 것을 권장한다.
그 외의 요소들은 HTML 구조에 따라 중복으로 사용할 수 있을 것이다. 하지만 순서를 건너뛰는 것은 권장하지 않는다.
그렇게 한다면 구조적으로 맞지 않기 때문이다. 마치 챕터를 건너뛰는 책은 없듯이.
<P>
문단은 <p>태그를 사용해서 나타낸다. 문단이라는 의미를 가지고 있기 때문에 <div>나 <h1> 같은 요소를 포함 할 수 없다.
그리고 같은 <p> 태그 역시 중첩 할 수 없다. 다만 인라인 속성의 요소는 사용 가능하다.
좀 더 쉽게 이해하려면 블록 레벨과 인라인 레벨을 짚고 넘어갈 필요가 있다.
블록 레벨과 인라인 레벨
웹 페이지에서 글씨, 이미지, 버튼 같은 것들이 화면에 어떻게 배치되는지 결정하는 규칙이 있다.
이 규칙에 따라 HTML 요소는 "블록 레벨 요소" 와 "인라인 요소" 두 가지로 나뉘게 된다.
블록 레벨 요소
블록이라는 말처럼 한줄을 통째로 차지하는 요소를 말한다. 블록 레벨 요소는 자동으로 줄이 바뀌며 위아래 여백이 생긴다.
<p>문장이 길지 않아도 블록레벨은</p>
<p>새로운 줄을 만듭니다.</p>
대표적인 블록 레벨 요소는
<p>
<div>
<h1> ~ <h6>
<ul>, <ol>, <li>
<table>
<form>
인라인 레벨 요소
인라인 레벨은 줄 안에서 작동하는 요소를 말한다. 필요한 만큼만 공간을 차지하고 줄을 바꾸지 않는다.
<span>인라인 레벨은 블록레벨과 달리</span>
<span>새로운 줄을 만들지 않습니다.</span>
대표적인 인라인 레벨 요소는
<span>
<a>
<strong>
<b>
<em>
<i>
<img>
<button>
'Coding > HTML & CSS' 카테고리의 다른 글
| HTML - 정의형 목록 (0) | 2025.02.20 |
|---|---|
| HTML- 순서형 비순서형 요소 (0) | 2025.02.19 |
| HTML - anchor 요소 (2) | 2025.02.18 |
| HTML - 이미지와 피겨 요소 (0) | 2025.02.18 |
| HTML (2) | 2025.02.12 |