목차
- 제목 <h?></h?>
- 개행 <br>
- 페이지에 수평선 구분 <hr>
- 단락 구분 <p> 또는 <pre>
4-1. <p> </p>
4-2. <pre> </pre>
4-3. <p>와 <pre> 비교 예시 - 글자 형태 관련 태그
5-1. 글자 강조 <b> </b> 또는 <strong> </strong>
5-2. 글자 기울임 <i> </i> 또는 <em> </em>
5-3. 인용문구 <blockquote> </blockquote> 또는 <q> </q>
5-4. 형광펜 <mark> </mark>
5-5. 밑줄 <u> </u>
5-6. 작은 글씨 <small> </small>
5-7. 아래 첨자 <sub> </sub> 와 위 첨자 <sup> </sup>
5-8. 취소선 <s> </s>
5-9. 툴팁 출력 <abbr> </abbr>
5-10. 참고한 웹 문서 표시 <cite> </cite>
❗ .html 문서 최상단에 HTML5 문서 형식 선언한다.
<!DOCTYPE html>
<html lang="ko>
<head>
<meta charset="UTF-8">
<title>1_글자관련태그</title>
</head>
<body>
내용
</body>
</html><!DOCTYPE html>
- HTML5 문서 형식 선언에 해당한다.
<html lang="ko"> </html>
- HTML 문서의 내용을 정의한다.
- lang 속성은 페이지가 어떤 언어로 되어있는지 속성값을 통해 표기한다. 이는 검색 엔진으로 하여금 이 페이지에 접근할 때 참조하도록 정보를 제공하는 것이다.
<head> </head>
- 문서 제목과 스크립트, 스타일 시트의 링크 또는 선언을 포함하는 문서의 일반적인 정보(메타데이터)를 정의한다.
<meta charset="UTF-8">
- 문자 인코딩 선언한다.
<title>1_글자관련태그</title>
- 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서 제목에 대해 정의한다.
<body> </body>
- HTML 문서의 내용(content)을 정의한다.
1. 제목 <h?></h?>
<body>
<h3><hn> : 제목을 입력할 때 사용하는 태그</h3>
<h1>h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>
</body>
- 제목을 입력할 때 사용하는 태그이다.
- h태그 뒤 숫자로 구분되며, <h1>에서 <h6>에 이르기까지 폰트 크기가 각각 지정돼 있다.
❗ 출력 텍스트로서 <태그> 표시하고자 할 때는 다음과 같이 쓴다: <태그>
2. 개행 <br>
<body>
<h3><br> : 줄 바꿈 태그</h3>
br 태그는<br>
줄을 바꾸는 태그
</body>
- 문장 개행에 사용된다.
3. 페이지에 수평선 구분 <hr>
<body>
<h3><hr> : 줄 바꾸면서 수평선 넣는 태그</h3>
<hr />
</body>
- <hr> 또는 <hr />로 작성할 수 있다. 후자의 경우 스스로 여닫는 모양새이다.
- 개행과 동시에 페이지에 가로 밑줄을 삽입해 구분하는 데 쓰인다.
4. 단락 구분 <p> 또는 <pre>
4-1. <p> </p>
<body>
<h3><p> : 단락을 구분하는 태그</h3>
<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>
<p>세 번째 단락입니다.</p>
첫 번째 단락입니다.<br>
두 번째 단락입니다.<br>
세 번째 단락입니다.
</body>
- <p> 태그는 단락을 구분할 때 쓰인다.
- 위 예시에서 일반 개행 처리할 때 사용되는 <br> 태그와 비교했을 때 단락간 여백이 뚜렷한 차이를 보이고 있다.
- 이렇듯 <p> 태그는 한 개의 단락을 만들 때 쓸 수 있다.
- 한 개의 공백만을 허용하므로 <p> 태그 안에서 줄 바꿈이 필요할 시 별도 태그 작성이 요구된다.
4-2. <pre> </pre>
- 띄어쓰기, 들여쓰기, 개행 등이 입력된 그대로 출력된다는 특징이 있다.
4-3. <p>와 <pre> 비교 예시
<body>
<h3>문단을 나누는 태그(p, pre)</h3>
문단 영역을 나누는 태그로는 p태그와 pre태그가 있다
<p>
p태그는 문단 영역을 나누는 태그이지만
한 개의 공백만을 표시하며
줄 바꿈 입력을 별도의 태그로 지정해 주어야 한다.
</p>
<pre>
pre태그는 여러 칸 띄우기
혹은 줄 바꿈 등을 포함하여
입력한 내용 그대로 표현하는 태그이다.
</pre>
</body>
5. 글자 형태 관련 태그
5-1. 글자 강조 <b> </b> 또는 <strong> </strong>
- <b>는 단순 스타일 변경에 한정된다.
- <strong>은 실제로 중요한 내용이라는 의미까지 내포하고 있어 스크린 리더 통해 읽힐 경우 음성에서도 강조된다.
5-2. 글자 기울임 <i> </i> 또는 <em> </em>
- <i>는 글자 스타일을 기울이는 것이 전부이다.
- 반면 <em>은 emphasized의 약어로서 강조를 의미한다.
- 따라서 스크린 리더를 사용하는 경우 두 태그 결과간에 차이를 보인다.
5-3. 인용문구 <blockquote> </blockquote> 또는 <q> </q>
<body>
<blockquote cite="https://www.naver.com">
<blockquote> : 인용문구를 나타내는 태그<br>
- cite 속성 : 어디서 인용문구를 가져왔는지 인용된 사이트 주소를 작성<br>
직접 표시되지는 않지만 검색 엔진에는 노출됨
</blockquote>
<q><q> : 인용 문구를 나타내는 태그 -- 작성하지 않은 큰따옴표가 나타남</q>
</body>
- <blockquote>는 다른 사이트의 글을 인용한 경우 쓴다.
- 시작태그 내에 cite 속성을 쓸 수 있다. cite 속성은 인용한 사이트 주소를 속성값으로 갖는다.
- 자동 들여쓰기가 돼 다른 텍스트와 구별이 가능하다.
- <q> 역시 다른 사이트의 글을 인용한 경우에 사용된다.
- 입력한 인용문구가 큰따옴표("")로 감싸진 채 표시된다.
5-4. 형광펜 <mark> </mark>
- 형광펜으로 칠한듯 배경부분이 노란색으로 강조된다.
5-5. 밑줄 <u> </u>
- <u>는 지정한 범위에 대해 밑줄을 적용한다.
- 이는 페이지 전체에 수평줄을 표시하는 <hr> 태그와 차이점이다.
5-6. 작은 글씨 <small> </small>
- 기본 문자보다 작은 글씨로 표현된다.
- 부가 정보 표현 시 자주 쓰인다.
5-7. 아래 첨자 <sub> </sub> 와 위 첨자 <sup> </sup>
- 설정한 내부문자에 대해 아래 첨자 또는 위 첨자로 출력한다.
5-8. 취소선 <s> </s>
- 글자 가운데에 밑줄, 즉 취소선을 넣을 때 쓴다.
5-9. 툴팁 출력 <abbr> </abbr>
<body>
<abbr title="Internet of Things">IoT</abbr>란 각종 사물에
센서와 통신 기능을 내장해 인터넷에 연결하는 기술이다<br>
</body>
- 시작태그에서 title 속성 통해 풀네임 혹은 보여줄 내용을 명시하고, 이에 대한 약어를 내부문자로 작성한다.
- 약어에 대해 마우스 오버 시 툴팁 형태로 출력된다.
5-10. 참고한 웹 문서 표시 <cite> </cite>
<body>
<p>
참고 사이트 : <cite>https://www.naver.com</cite>
</p>
</body>
- 참고한 웹 문서를 이탤릭체로 나타내는 태그이다.
'Frontend > HTML' 카테고리의 다른 글
| [HTML5] 멀티미디어 태그 | img | audio | video (0) | 2022.02.09 |
|---|---|
| [HTML5] 영역 분할 태그 | div | span | iframe | 시맨틱 (0) | 2022.02.09 |
| [HTML5] 테이블 태그 | table | rowspan | colspan | thead (0) | 2022.02.08 |
| [HTML5] 목록 태그 | li | ul | ol | dl (0) | 2022.02.08 |
| [HTML5] 웹 | 웹 표준 | HTML 개요 (0) | 2022.02.08 |
