1. 제목
<h>태그
-
제목과 소제목 및 단락을 기술하는 개념
-
가장 큰
<h1>태그부터 가장 작은<h6>태그가 있다. -
태그의 중요도도 ~6으로 갈수록 낮아짐
-
h1태그의 경우 검색엔진최적화(SEO)에 중요한 요소이므로 꼭 사용하되
가장 중요한 큰제목(대주제)이므로 각 페이지에서 한 번만 사용하는 것이 좋습니다. -
h태그를 전부 사용할 필요는 없지만 검색엔진이 문서를 분석할때
h2태그도 추출하므로 중요한 키워드를 포함시키는 것이 좋다. -
h태그의 위 아래로는 약간의 여백이 자동으로 삽입됩니다.
✍🏻입력
<h1>h1의 크기입니다!</h1>
<h2>h2의 크기입니다!</h2>
<h3>h3의 크기입니다!</h3>
<h4>h4의 크기입니다!</h4>
<h5>h5의 크기입니다!</h5>
<h6>h6의 크기입니다!</h6>💻출력
h1의 크기입니다!
h2의 크기입니다!
h3의 크기입니다!
h4의 크기입니다!
h5의 크기입니다!
h6의 크기입니다!
2. 본문
<p>태그
- p태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰입니다.
- p태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입됩니다.
<br>태그
- 줄 바꿈을 해주는 태그
- 기본적으로 HTML코드는 가독성 향상을 위해
코드상에서 엔터로 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지않습니다. - 그래서 줄바꿈을 하려면 직접 줄 바꿈을 한다는 br태그를 사용해야 합니다.
- br태그는 닫는태그가 없는 빈 태그입니다.
<hr>태그
- 수평 가로 구분선을 만들어주는 태그
- 단락을 나눌 때나 내용상의 구분을 표현하고자 할 때 사용
<pre>태그
- 띄어쓰기나 줄바꿈이 화면에 직접 적용되지않는 HTML코드를
작성한 텍스트 서식 그대로 표현해주는 태그 - pre 태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현됩니다.
<q>태그
- 짧은 잉용구 q태그는 앞뒤에 자동으로 큰따옴표가 붙습니다.
<blockquote>태그
- 길이가 긴 인용문은 blockquote태그고 표현하며
인용 부분을 별도의 단락으로 구분하여 나타냅니다.
<figure>태그
-
figure 태그는 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는
독립적인 콘텐츠를 정의할 때 사용합니다. -
figure 요소의 콘텐츠는 문서의 내용과는 연관성을 가지지만, 해당 콘텐츠의 위치가 문서의 주요 흐름과는 독립적이어서 제거해도 문서의 흐름에 영향을 주어서는 안 됩니다.
-
figure 태그는 HTML5에서 새롭게 추가된 요소입니다.
<figcaption>태그
-
figcaption 태그는 figure 요소에 대한 설명을 정의할 때 사용합니다.
-
figcaption 요소는 figure 요소의 첫 번째 자식 요소이거나 마지막 자식 요소로만 위치할 수 있습니다.
-
figure 요소에서 한번만 사용할 수 있습니다.
-
figcaption 태그는 HTML5에서 새롭게 추가된 요소입니다.
✍🏻예제
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>
3. 포맷팅
텍스트에 다양한 효과를 주는 태그
<b>, <strong>태그 : 강조효과
- b태그는 단순히 화면의 텍스트를 굵게 표현해줌
- strong 태그는 텍스트를 굵게 표현해주면서 그 내용이 중요하다는 의미도 함께 포함
<i>, <em>태그 : 이탤릭체
-
i태그는 단순히 화면의 텍스트를 이탤릭체로 표현해 줍니다.
-
em태그는 텍스트를 이탤릭체로 변환해주면서 그 내용이 중요하다는 의미도 함께 포함
📌검색엔진은 strong태그나 em태그를 사용하여 강조된 텍스트를 더 중요하게 인식합니다.
<mark>태그 : 하이라이팅(highlighting) 효과✍🏻예제
<p><mark>"이 부분"</mark>만 하이라이팅하고 싶어요.</p>"이 부분"만 하이라이팅하고 싶어요.
<del>태그 : 삭제(delete) 효과 / 텍스트 중앙에 가로줄✍🏻예제
<p><del>"이 부분"</del>을 지운 것처럼 하고 싶어요.</p>
"이 부분"을 지운 것처럼 하고 싶어요.
<ins>태그 : 삽입 효과 (insert) / 텍스트 밑에 가로줄✍🏻예제
<p><ins>"밑줄 친 부분"</ins>에 들어갈 알맞은 말을 고르세요.</p>"밑줄 친 부분"에 들어갈 알맞은 말을 고르세요.
<code>태그
- 컴퓨터 코드(code)의 일부분을 나타낼 때 사용
- 컴퓨터 코드 : XML 요소의 이름이나 파일 이름, 컴퓨터 프로그램의 코드,
컴퓨터가 인식할 수 있는 문자열 등
✍🏻예제<code>System.out.println(var);</code>
System.out.println(var);
<kbd>태그 : 키보드(keyboard) 입력을 나타낼 때 사용✍🏻예제
<p> <kbd>ALT</kbd>키와 <kbd>F4</kbd>키를 동시에 누르면 포커스를 가지고 있는 윈도우를 곧바로 닫을 수 있습니다. </p>ALT키와 F4키를 동시에 누르면 포커스를 가지고 있는 윈도우를 곧바로 닫을 수 있습니다.
<sup>, <sub>태그 : 위첨자 / sub아래첨자 효과✍🏻예제
<p>X<sup>2</sup> + Y<sup>3</sup> = Z</p> <p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>X2 + Y3 = Z
물을 나타내는 화학식은 H2O 입니다.
4. a태그와 하이퍼링크
-
a태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는
하이퍼링크(hyperlink)를 정의할 때 사용 -
a태그는 링크의 목적지를 가리키는 href 속성을 가져야하며,
만약 없다면 다른 속성들도 사용할 수 없습니다. -
링크된 페이지는 보통 브라우저의 현재 윈도우에 표시되며,
이것은 target 속성으로 변경할 수 있습니다. -
링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가지게 됩니다.
-
아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue)
-
방문했던 링크(visited link) : 밑줄, 보라색(purple)
-
활성화된(현재 마우스가 클릭하고 있는) 링크(active link) : 밑줄, 빨간색(red)
-
📌a태그의 taget속성
| 속성값 | 설명 |
|---|---|
| _blank | 링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈 |
| _self | 링크된 문서를 링크가 위치한 현재 프레임에서 오픈 (기본값 생략가능) |
| parent | 링크된 문서를 현재 프레임의 부모 프레임에서 오픈 |
| top | 링크된 문서를 현재 윈도우 전체에서 오픈 |
| 프레임 이름 | 링크된 문서를 명시된 프레임에서 오픈 |
5. 엔티티(Entity)
- HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 *문자셋을
엔티티(entity)라고 합니다.
✍🏻문법
&엔티티이름;
또는
&#엔티티숫자;
✍🏻예제
<p> <p>태그는 두 번째로 큰 제목을 나타내는 태그입니다.</p>
<p><p>태그는 단락을 나타내는 태그입니다.</p>
태그는 두 번째로 큰 제목을 나타내는 태그입니다.
<p>태그는 단락을 나타내는 태그입니다.
- 위 예제처럼
<p>의 경우 p태그로 인식되어 브라우저상에 보여지지 않는다.- 이럴때 태그를 온전히 보여질 수 있도록 사용하는것이 엔티티
- 엔티티(entity)의 이름은 대소문자를 구분합니다.
대표적인 엔티티
| 문자 | 이름 | 16진수 숫자 | 설명 |
|---|---|---|---|
|   | 줄 바꿈 없는 공백 | |
| < | < | < | 보다 작은 |
| > | > | > | 보다 큰 |
| & | & | & | AND 기호 |
| " | " | " | 큰따옴표 |
| ' | ' | ' | 작은따옴표 |
이외에도 악센트나 심볼특수문자(수학 용어, 그리스 문자, 국제 통화 등) 다양하게 제공
6. 문자셋
- 문자셋이란 하나의 언어권에서 사용하는 언어를 표현하기 위한 모든 문자(활자)의 모임
- 웹 브라우저가 HTML 문서를 정확하게 나타내기 위해서는
해당 문서가 어떠한 문자셋으로 저장되었는지를 알아야 합니다.
따라서 HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를
<head>태그 내의<meta>태그에 명시합니다.
✍🏻예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>문자셋의 종류
현재 사용되는 대표적인 문자셋(character set)
1. ASCII
가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는
127개의 영문자와 숫자로 이루어져 있습니다.
2. ANSI
윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.
3. ISO-8859-1
256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다.
4. ✅UTF-8
세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는
HTML5의 기본 문자셋입니다.
📌 출처
