카테고리 없음
HTML5 글자관련태그
mi-ni
2024. 1. 12. 17:45
<!DOCTYPE html>
HTML 문서 형식 선언 : HTML5 형식 이라는 걸 알려주기 위한 태그
<html lang ="ko">
html 문서의 시작, 끝을 표시해주는 태그
lang 속성은 이 페이지가 어느 나라 언어로 되어있는지를 표시한다
<head>
머리부를 나타냄 : 해당 문서의 각종 정보와 제목, 설명 및 스크립트, 스타일시트 내용들을 작성
<meta>, <title>, <link>, <style>, <script>
<head>
<meta charset="UTP-8"> <!--종료태그 없음-->
<meta name="generator" content="VScode"> <!--generator : 이 문서를 생성한 프로그램-->
<meta name="author" content="hm"> <!-- author : 이 문서의 저자 -->
<meta name="description" content="이 문서는 글자관련 태그들을 공부하는 문서입니다.">
<title>글자관련태그</title>
</head>
<body>
몸체부를 나타냄 : 화면상에 출력해서 보여주고자 하는 모든 정보 / 내용 들을 작성하는 부분
<!-- h관련 태그 (h1~h6)-->
<h1>h1 태그 입니다.</h1>
<h2>h2 태그 입니다.</h2>
<h3>h3 태그 입니다.</h3>
<h4>h4 태그 입니다.</h4>
<h5>h5 태그 입니다.</h5>
<h6>h6 태그 입니다.</h6>
<hr> <!-- 수평선 넣는 태그-->
<h3>문단을 나누는 태그 : p, pre </h3>
<p>문단 영역을 나누는 태그로는 p태그와 pre 태그가 있다.
p태그는 줄바꿈을 하고자 한다면 별도의 태그를 작성해야됨. <br>
그리고 .........공백은 한개의 공백만을 표시하기 때문에
별도의 기호 문구를 기술해야됨.
</p>
<pre>
pre 태그는 시작태그에서 부터 종료 태그까지 입력된 내용을 그대로 표현하는 태그
줄 바꿈 이라던가 여러개의 공백을 바로 인식함
</pre>
<h3>그 밖에 글자를 다루는 태그들</h3>
일반글꼴(태그로 감싸지 않는 텍스트)
<br><br>
<b>b: 글자를 굵게 표시하는 태그</b>
<br><br>
<strong>strong : 글자를 굵게 표시하는 태그 + 스크린리더</strong>
<!-- 웹접근성 시각장애인 스크린리더 보다 더 강조하여 -->
<br><br>
<em>em: 글자를 기울여서 보여주는 태그</em>
<br><br>
<i>i : 글자를 기울여서 표시하는 태그</i>
<br><br>
<mark>mark : 형광펜</mark> 효과를 주는 태그
<br><br>
<u>u : 글자에 밑줄이 그어지는 태그</u>
<br><br>
<s>s : 글자에 취소선 넣어주는 태그</s>
<br><br>
<small>small : 글자를 작게 표현해주는 태그 </small>
<br><br>
기본글자에 <sub>sub : 아래첨자</sub>를 나타내는 태그와
<sup>sup : 윗첨자</sup>를 나타내는 태그
<br><br>
<abbr title="Internet of Things">IOT</abbr>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술이다.
<br><br>
<hr>
<h3>글자 관련 태그 응용(태그들을 중첩해서 사용 가능)</h3>
<p>
태그들 중첩으로 사용 가능
<b><em>굵게, 기울여서</em></b> 표현 가능하고,
<s><mark>취소선, 형광펜</mark></s>을 넣어 글자를 강조할 수 있음!
</p>
