1️⃣ 제목요소
h1의 h는 heading 이라는 의미를 가지고 있습니다. h1이 가장 높은 레벨, h6가 가장 낮은 레벨
<h1> ~ <h6> 코드 출력 예제
❗️ 특징
- <h1> 태그는 제목을 작성하는게 좋습니다.
- 웹 브라우저의 목차를 만드는 작업을 수행할 수 있습니다.(스크린리더에서 목차 순서대로 읽음)
- 웹 접근성이 높은 페이지를 제작하기 위해 제목 단계를 건너뛰지 않는 것이 좋습니다.
- 글씨 크기를 위해 사용하지 않습니다. 이유는 브라우저 별 스타일링이 다릅니다.(폰트 사이즈는 css를 이용하여 사용)
- 페이지 당 하나의 <h1> 만 사용하는 것을 권장합니다.
✏️ 웹 브라우저에서 권장하는 작성 방법
🚫 주의사항
스크린 리더가 사용하는 탐색 기법은 제목에서 제목으로 뛰어넘으며 페이지 콘텐츠를 빠르게 파악하기 때문에
스크린리더의 혼란을 방지하기 위해 <h1> ~ <h6> 순서대로 작성해야합니다.2️⃣ 본문요소
<p><br><blockqute>/<q><pre><figure>/<figcaption><hr><addr>/<address>/<cite>/<bdo>에 대해 알아보겠습니다.
✅ p 태그
p태그는 하나의 문단을 나타내는 요소입니다. 문서는 인접 블록과의 여백으로 구분합니다.
html에서 문단은 블록 레벨 요소이며 이미지나 입력폼 등 서로 관련있는 콘텐츠별로 묶습니다.
브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리됩니다.
✅ br 태그
<br>태그는 줄바꿈을 생성하는 태그입니다.
🚫 주의사항
문단 사이의 여백을 위해 <br> 태그를 사용하면 안됩니다.
블록 요소로 감싼 후 CSS의 margin 속성으로 여백을 조절하는 것이 좋습니다.
✅ 목록 태그
1️⃣ <ul> 태그
<ul>태그는 순서가 없는 목록 태그입니다.
<li>와 함께 사용됩니다.
2️⃣ <ol> 태그
<ol>태그는 정렬된 목록 태그입니다.
<li>와 함께 사용됩니다.
<ol>에서 사용할 수 있는 여러가지 타입
문법
<ol type="타입명">
</ol>| 타입명 | 설명 |
|---|---|
| "a" | 소문자 알파벳 |
| "A" | 대문자 알파벳 |
| "i" | 소문자 로마 숫자 |
| "I" | 대문자 로마 숫자 |
| "1" | 디폴트 값 |
출력예시
✅ 경로 설정
링크를 거는
<a>태그나<img>태그 등을 사용할때 경로를 지정하게 됩니다.
경로는 세가지로 구분할 수 있습니다.
| 종류 | 설명 |
|---|---|
| 상대경로 | 현재 파일(웹페이지)의 소속 폴더가 기준입니다. |
| 예)./경로 | |
| 절대경로 | 동일한 위치를 기준으로 상대를 찾습니다. |
| 예) /파일명 | |
| 외부경로 | 외부에서 불러오는 방법입니다. |
| 예) http:// |
✅ 이미지 태그
이미지를 불러올 때 사용하는 태그입니다.
같이 사용되는 특성은src와alt가 있습니다.
src는 필수로 사용되어야 하며, 이미지소스의 경로를 지정합니다.
alt는 필수는 아니지만 스크린 리더가 읽어 사용자에게 전달해주며 오류로 이미지가 안 보일 경우 텍스트로 표시하게 됩니다.
