더보기
HTML의 글자 관련 태그를 알아보자
프리뷰어(Previewer) 단축키 : ctrl + q + (1초 후에) s (맥북 동일)
HTML의 주석 단축키: <!--
글자 관련 태그(정리 ver.)
태그 | 내용 |
<!DOCTYPE html> | html 문서 형식 선언 |
<html></html> | html 문서의 시작과 끝을 표시해 주는 태그 |
<head></head> | 문서와 관련된 환경설정 등을 기술하며 화면에 보이지 않음 |
<meta> | 환경 설정 기술 |
<meta charset="UTF-8"> | 이 문서의 인코딩 방식을 정의 |
<meta name="generator" content="VScode"> | 이 문서를 생성한 프로그램 |
<meta name="author" content="user01"> | 이 문서의 저자 |
<meta name="keyword" content="글자, 태그"> | 이 문서를 나타내는 키워드 |
<meta name="description" content="이 문서는 글자와~"> | 이 문서에 대한 설명 |
<title></title> | 이 문서의 제목을 나타냄 <head> 영역에 기술 |
<body></body> | 문서의 몸체부를 나타내며 화면에 출력해서 보여 주는 모든 정보, 내용들을 작성하는 구문 |
<hr> | 가로 구분선, 수평선을 긋는 태그 |
<h1> ~ <h6> | 문단을 나누는 태그(1: 글자 크기 큼 ~ 6. 글자 크기 작음) |
<p></p> | 문단을 나누는 태그 줄바꿈 입력을 별도 태그로 지정해야 함: <br> 2개 이상의 공백 입력을 별도 태그로 지정해야 함: |
<pre></pre> | 문단을 나누는 태그 줄 바꿈 입력이 그대로 적용됨 2개 이상의 공백 입력이 그대로 적용됨 |
<b></b> <strong></strong> |
굵은 글씨 |
<em></em> <i></i> |
기울임 글씨 |
<mark></mark> | 형광펜 효과 |
<s></s> <strike></strike> 👉🏻 html5에서 정식 지원하는 태그 아님 |
취소선 |
<u></u> | 밑줄 |
<small></small> | 글자를 작게 표현 |
<big></big> 👉🏻 html5에서 정식 지원하는 태그 아님 | 글자를 크게 표현 |
<abbr title="Internet Of Things">IOT</abbr> | 마우스 커서를 가져다 대면 title 속성값이 보여 줌 |
<sub></sub> | 아래 첨자 |
<sup></sup> | 윗첨자 |
글자 관련 태그(코드 ver.)
<!DOCTYPE html> <!-- HTML 문서 형식 선언: HTML5이라는 걸 알려 주기 위한 태그 -->
<html lang="ko"> <!-- html 문서의 시작과 끝을 표시해 주는 태그
lang 속성은 이 문서가 어느 나라 언어로 되어 있는지 표시 -->
<!--
<head> 머리부를 나타냄:
해당 이 문서의 각종 정보와 제목, 설명 및 스크립트, 스타일시트의 링크를 선언하는 구문
(즉, 눈에 안 보이는 환경설정을 담당하는 부분)
<title>, <link>, <Style>, <script>, <meta>
-->
<head>
<meta charset="UTF-8"> <!-- charsset: 이 문서의 인코딩 방식을 정의 -->
<meta name="generator" content="VScode"> <!-- generator: 이 문서를 생성한 프로그램 -->
<meta name="author" content="kimuser"> <!-- author: 이 문서의 저자 -->
<meta name="keyword" content="글자, 태그"> <!-- keyword: 이 문서를 나타내는 키워드 -->
<meta name="description" content="이 문서는 글자와 관련된 태그들을 공부하는 페이지입니다.">
<!-- description: 이 문서에 대한 설명-->
<title>글자 관련 태그</title> <!-- 이 문서의 제목을 나타냄 -->
</head>
<!--
<body> 몸체부를 나타냄:
화면에 출력해서 보여 주는 모든 정보 / 내용들을 작성하는 구문
-->
<body>
안녕하세요 *^ㅁ^* <br> <!-- 줄바꿈 태그-->
반갑습니다 ^0^~!!
<br><br>
안녕히 가세요 ㅠ3ㅠ...
<!-- h 관련 태그 (h1 ~ h6): 보통 제목을 나타낼 때 사용함 -->
<h1>이거는 h1 태그입니다.</h1>
<h2>요거는 h2 태그입니다.</h2>
<h3>이게 바로 h3 태그다.</h3>
<h4>I am a h4 tag. thank you.</h4>
<h5>wo de mingzi 태그 h5. zaizien.</h5>
<h6>쪼꼬미 h6 태그 거의 안 보임 ;;</h6>
<h7>h7 태그가 있나??</h7> <!-- 존재하지 않는 태그 사용 시: 일반 글꼴 -->
<hr> <!-- 가로로 구분선, 수평선은 긋는 태그-->
<h3>문단을 나누는 태그</h3>
<p>
문단 영역을 나누는 태그로는 p 태그와 pre 태그가 있다
단, p 태그는 줄바꿈 입력을 별도의 태그로 지정해야 한다. <br>
그리고 공백은 한 개의 공백만을 표시하기 때문에 기호 문구를 작성해야 한다.
</p>
<pre>
pre 태그는 여러 공백이 인식 가능하고
줄 바꿈 등을 포함하여 입력한 내용 그대로를 표현하는 태그
</pre>
<hr>
<h3> 그 밖의 글자를 다루는 태그들</h3>
일반 글꼴(태그로 감싸지 않은 텍스트)
<br><br>
<b> b: bold의 약자, 글자를 굵게 표시하는 태그 </b>
<br><br>
<strong>strong: 글자를 굵게 표시하는 태그(b와 역할 동일)</strong>
<br><br>
<em>em: emphasize의 약자, 글자를 기울여서 표시하는 태그</em>
<br><br>
<i>i: italic의 약자, 글자를 기울여서 표시하는 태그(em과 역할 동일)</i>
<br><br>
<mark>mark: 형광펜 효과</mark> 를 주는 태그
<br><br>
<u>u: under의 약자, 글자에 밑줄이 그어지는 태그</u>
<br><br>
<s>s: strikethough의 약자, 글자에 취소선을 넣어 주는 태그</s>
<br><br>
<!-- 적용에 문제는 없지만 html5에서 정식 지원하는 태그가 아니므로 빨간색으로 뜸-->
<strike>strike: 글자에 취소선을 넣어 주는 태그</strike>
<br><br>
<small> small: 글자를 작게 표현해 주는 태그</small>
<br><br>
<!-- 적용에 문제는 없지만 html5에서 정식 지원하는 태그가 아니므로 빨간색으로 뜸-->
<big>big: 글자를 크게 표현해 주는 태그</big>
<br><br>
<abbr title ="Internet Of Things">IOT</abbr>란 각종 사물에 센서와 통신기능을 내장해 인터넷에 연결하는 기술이다.
<!-- abbr: 단어의 축약형(abbreviation)이나 머리 글자로만 된 단어 (acronym)을 정의할 때 쓰는 태그
마우스 커서를 가져다 대면 title 속성값이 보여짐-->
<br><br>
sub: 기본 글자에 <sub> 아래 첨자</sub>를 나타내는 태그
sup: 기본 글자에 <sup>윗 첨자</sup>를 나타내는 태그
<br><br>
<hr>
<!-- html 응용문제1 -->
<h3>글자 관련 태그 응용</h3>
<p>
태그들은 해당 태그 내에서 중첩으로 사용 가능하다.
<b>굵은</b>글자를 사용할 수도 있고, <i>기울이거나, </i><s>취소선</s>을 넣는 등 다양하게 사용할 수 있다.<br>
<mark>형광펜</mark>을 넣어 글자를 강조할 수 있다.
</p>
</body>
</html>
html 응용문제1
<!-- html 응용문제1 -->
<h3>글자 관련 태그 응용</h3>
<p>
태그들은 해당 태그 내에서 중첩으로 사용 가능하다.
<b>굵은</b>글자를 사용할 수도 있고, <i>기울이거나, </i><s>취소선</s>을 넣는 등 다양하게 사용할 수 있다.<br>
<mark>형광펜</mark>을 넣어 글자를 강조할 수 있다.
</p>