아무개의 취미생활
일반적으로 태그는 여는 태그와 닫는 태그가 함께 쓰입니다. 그리고, 태그를 사용하여 텍스트, 이미지, 멀티미디어 콘텐츠를 HTML 문서로 나타내는 것을 마크업(Markup)한다고 합니다.
이 이유로 하이퍼텍스트(Hypertext)를 마크업하는 언어라는 의미의 HTML(Hyper Text Markup Language)이란 이름이 지어졌습니다. 이번에는 HTML에서 쓰이는 태그에 대해 알아보고 주석 및 특수문자 입력하는 방법에 대해 알아보겠습니다.
1. HTML 기본 구조
다음은 HTML의 기본 형식입니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html>는 HTML5 문서 규격인 HTML 문서임을 표시하는 태그입니다.
<html>과 </html>은 HTML 문서에는 반드시 들어가는 태그로 이 태그 안에 모든 내용이 들어가야 합니다.
<head>와 </head> 그리고, <body>와 </body>는 <html> 태그안에 기본적으로 들어가는 태그입니다.
<body>와 </body> 태그 안에 있는 내용이 HTML 문서에서 실제 웹브라우저에 표시될 내용입니다.
2. Heading Content 태그
제목을 표시할 때 사용하는 태그이며 <h1> ~ <h6> 까지 있습니다. <h1>으로 표시되는 제목이 가장 크고 굵은 글씨로 표시되며 <h6>로 갈수록 글씨 크기가 작아집니다.
글씨 크기의 기준은 <h4>입니다.
<hgroup> ~ </hgroup>은 제목을 그룹화할 때 사용하는 태그 (제목을 한 묶음에 그룹화)로
한 섹션의 대제목과 소제목.부제가 같은 경우 제목을 그룹화할 때 사용합니다.
비주얼 스튜디오 코드를 실행하고 다음과 같이 코드를 작성합니다.
<!DOCTYPE html>
코드를 작성하고 저장한 후 저장된 파일을 실행하면 웹브라우저에 다음과 같이 출력됩니다.
h1 제목1 (크기 200 %)
h2 제목1 (크기 150 %)
h1 제목2 (크기 200 %)
h2 제목2 (크기 150 %)
h3 제목 (크기 120 %)
h4 제목 (크기 100 %)
h5 제목 (크기 80 %)
h6 제목 (크기 70 %)
<hgroup>으로 묶은 h1과 h2가 그룹으로 묶여서 출력되었습니다. 그리고, h1의 글씨 크기가 가장 크며 h6으로 갈수록 글씨 크기가 작아지는 것을 보실 수 있습니다.
2. p 태그
여러 줄의 문장을 하나의 단락으로 묶을 경우나 사용합니다. p태그를 사용하면 단락과 단락 사이의 줄 바꿈과 여백을 동시에 표시합니다.
<p>, </p> 사이에 하나로 묶을 내용을 입력하여 사용합니다.
3. br 태그 : 줄 바꿈 태그
br 태그는 <br>을 입력하여 줄 바꿈을 할 때 사용합니다. 그리고, br 태그는 시작 태그만 있고 닫힘 태그는 없는 것에 주의하셔야 합니다.
기본적으로 브라우저에 구현되는 문장은 줄 바꿈을 하고 있지 않으므로 글을 입력할 때 줄 바꿈이 필요한 부분에 <br> 태그를 삽입하여야 합니다.
종료 태그가 없는 태그들이 몇가지 있는데 그런 태그들은 <meta>, <br>, <col>, <hr>, <source>, <img> 등이 있습니다.
4. hr 태그 : 수평선 태그
HTML 페이지에서 주제별로 구분을 주고자 하는 경우 hr 태그를 사용하여 가로로 줄을 그어 구분할 때 사용합니다.
5. 주석처리
HTML에서 주석처리를 할 경우에는 <--! 와 --> 사이에 주석 내용을 입력합니다. 주석 처리된 내용은 웹브라우저에는 나타나지 않으며 원본 파일에서만 확인 가능합니다.
[디스플레이]
6. 특수문자
HTML에서 특수 문자(기호)를 입력할 때는 엔티티 코드(Entity Code)를 사용합니다. 아래표를 보시면 첫 번째 빈 줄을 입력할 때 엔티티 코드 를 입력하여 공백을 표시합니다.
| 화면 출력 | 설 명 | Entity Code |
| non-breaking space (공백) | | |
| < | less than | < |
| > | greater than | > |
| & | ampersand | & |
| " | quotation mark | " |
더 많은 엔티티 코드에 대한 정보는 http://entitycode.com에서 확인하실 수 있습니다.
7. 예제를 통해 확인
비주얼 스튜디오 코드의 코드 창에 다음과 같이 입력합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- 주석 내용 입력 -->
안녕하세요~!<br>
<br>
<p> < " 아무개의 취미생활에 오신 것을 환영합니다 " > <br></p>
<hr>
</body>
</html>
코드를 입력하고 저장한 후 저장된 파일을 실행하면 다음과 같이 웹브라우저에 출력됩니다.
'Web Programming > HTML & CSS' 카테고리의 다른 글
| HTML 문서에 <img> 태그로 이미지 띄우기 (0) | 2021.11.25 |
|---|---|
| font - 구글 웹폰트 사이트에 올라온 폰트 사용하는 방법 (0) | 2021.04.14 |
| mediaquery (0) | 2021.04.13 |
| animation (0) | 2021.04.12 |
| transition (0) | 2021.04.06 |
