HTML(HyperText Markup Language)은 웹문서를 작성하기 위한 마크업 언어이다. HTML 문서의 구조와 기초 태그들을 정리했다. 참고로, HTML 문서에서 주석 처리를 하기 위해서는 '<!--', '-->' 사이에 내용을 입력하면 된다.
<!--
HTML 주석
--><!DOCTYPE html> <!-- HTML 독타입 정의 -->
<html><!-- HTML 문서 시작 -->
<head><!-- head 태그는 웹브라우저에서 보이지 않는 요소들을 담는다. -->
<title>HTML 연습</title><!-- title 태그는 제목 표시줄에 표시되는 내용이다. -->
</head>
<body><!-- body 태그는 웹브라우저에서 실제로 보이는 부분이다. -->
<h1 title="글 제목1">글 제목1</h1><!-- h+숫자 태그는 글의 제목을 나타내는 태그이다. -->
<h2 title="글 제목2">글 제목2</h2><!-- h+숫자 태그의 title 속성은 툴팁에 표시하는 내용이다. -->
<h3 title="글 제목3">글 제목3</h3><!-- h+숫자의 숫자가 클수록 하위의 제목이며 글자 크기가 작아진다. -->
<hr> <!-- 수평선. 닫는 태그가 없다. -->
<h4 title="글 제목4">글 제목4</h4>
<h5 title="글 제목5">글 제목5</h5>
<h6 title="글 제목6">글 제목6</h6>
<!-- pre 태그나 p 태그는 글 내용을 담는 태그이다. -->
<pre>글 내용입니다.
<pre> 태그 내에 엔터를 치면 웹브라우저에서도 엔터를 쳐서 나옵니다.
</pre>
<p>글 내용입니다.
<p> 태그 내에 엔터를 쳐도 웹브라우저에서는 한 줄로 표시됩니다. <p> 태그 내에서 개행하기
위해서는 <br> 태그를 넣어주면 됩니다.<br>이렇게 말입니다.
</p>
<h1>각종 글자 효과를 위한 태그들</h1>
<p>
<b><b></b>는 굵은 글씨</b><br>
<strong><strong></strong>는 굵은 글씨</strong><br>
<i><i></i>는 기울임 꼴(이탤릭체)</i><br>
<u><u></u>는 밑줄</u><br>
<ins><ins></ins>는 밑줄</ins><br>
<big><big></big>는 큰 글자</big><br>
<small><small></small>는 작은 글자</small><br>
<ins><ins></ins>는 밑줄</ins><br>
<del><del></del>는 취소선</del><br>
<sup></sup>는 <sup>위 첨자</sup><br>
<sub></sub>는 <sub>아래 첨자</sub><br>
<mark><mark></mark>는 형광펜</markl><br>
</p>
</body>
</html><!-- HTML 문서 끝 -->HTML 문서는 프로그래밍 언어들과 달리 메모장으로 작성 후, HTML 문서로 저장(확장자는 .htm 또는. html)하면 컴파일 없이 웹브라우저(크롬, 엣지, 파이어폭스, 웨일 등)에서 변경 사항을 바로 확인할 수 있다.
위 코드는 웹브라우저에서 다음과 같이 보인다.
글 제목1
글 제목2
글 제목3
글 제목4
글 제목5
글 제목6
글 내용입니다.
<pre> 태그 내에 엔터를 치면 웹브라우저에서도 엔터를 쳐서 나옵니다.
글 내용입니다. <p> 태그 내에 엔터를 쳐도 웹브라우저에서는 한 줄로 표시됩니다. <p> 태그 내에서 개행하기 위해서는 <br> 태그를 넣어주면 됩니다.
이렇게 말입니다.
각종 글자 효과를 위한 태그들
<b></b>는 굵은 글씨
<strong></strong>는 굵은 글씨
<i></i>는 기울임 꼴(이탤릭체)
<u></u>는 밑줄
<big></big>는 큰 글자
<small></small>는 작은 글자
<ins></ins>는 밑줄
<sup></sup>는 위 첨자
<sub></sub>는 아래 첨자
'🕸웹 > HTML' 카테고리의 다른 글
| [20210614] HTML5 시맨틱 태그 (0) | 2021.06.14 |
|---|---|
| [20210614] HTML 기초2 (0) | 2021.06.14 |
