01_글자 관련 태그
HTML 구조
1. head
head : 머리부를 나타냄 해당 이 문서의 각종 환경설정 정보, 제목, 설명 및 스크립트, 스타일시트의 링크 등을 설정. 화면에 출력되지 않음. meta, title, link, style, script,...
<!DOCTYPE html> <!-- HTML 문서 형식을 선언 : HTML5 형식임 -->
<html lang="ko"> <!--html의 시작과 끝을 표시해주는 태그
lang 속성은 이 문서가 어느나라 형식으로 되어있는지 표시 -->
<head>
<meta charset="UTF-8">
<!-- charset : 이 문서의 인코딩 방식을 정의-->
<meta name="generator" content="VScode" >
<!-- generator : 이 문서를 생성한 프로그램-->
<meta name="author" content="KH">
<!-- author : 이 문서를 작성한 저자-->
<meta name="keyword" content="글자, 태그">
<!-- keyword : 이 문서를 나타내는 키워드(=인스타그램의 태그)-->
<meta name="description" content="이 문서는 글자와 관련된 태그를 공부하는 페이지입니다.">
<!-- description : 이 문서에 대한 설명-->
<title>글자 관련 태그</title>
<!-- 이 문서의 제목을 나타냄.
마우스 오른쪽 - Open in browser를 열어보면, 브라우저의 탭 부분에 해당 내용이 반영됨.-->
</head> 2. body
body : 몸통부를 나타냄 화면에 출력해서 보여주는 모든 정보 / 내용들을 작성하는 구문 [관련태그] 1. 줄바꿈 태그 : br 2. 제목 태그 : h1 ~ h6 3. 구분선 태그 : hr 4. 문단 태그 : p, pre 5. 글자 관련 태그 b, strong / em, i(기울기) / mark(형광펜) / u(밑줄) / s, strike(취소선) small,big / abbr title="주석내용"(축약형) / sub,sup(첨자)
<body>
안녕하세요? <br> <!-- 줄바꿈 태그-->
반갑습니다.
<br><br>
안녕히 가세요. <br>
<!-- h관련 태그(h1 ~ h6)-->
<!-- h관련 태그는 가로 한 줄을 통으로 차지하기 때문에 줄바꿈 해줄 필요가 없음.-->
<h1>h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>
<h7>h7 태그가 있나?</h7> <!-- 존재하지 않는 태그를 사용 시 : 일반 글꼴로 나옴.-->
<hr> <!-- 가로로 구분선, 수평선을 긋는 태그 -->
<h3>문단을 나누는 태그</h3>
<p>
문단영역을 나누는 태그로는 p태그와 pre태그가 있음.<br>
단, p태그는 줄바꿈 입력을 별도의 태그로 지정해야 함. <br>
그리고, 공백은 한개의 공백만을 표시하기 때문에,
기호문구를 작성해야 함.
</p>
<pre>
pre태그는 여러 공백이 인식 가능하고,
줄바꿈 등을 포함하여 입력한 내용 그대로를 표현하는 태그임.
</pre>
<hr>
<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>
<strike> strike : 글자에 취소선을 넣어주는 태그</strike>
<br><br>
<small>small : 글자를 작게 표현해주는 태그</small>
<br><br>
<big> big : 글자를 크게 표현해주는 태그</big>
<br><br>
<abbr title="Internet Of Things"> IOT </abbr> 란, 각종 사물에 센서와 통신기능을 내장해 인터넷을 연결하는 기술이다.
<!--abbr(abbreviation) : 단어의 축약형, 머리글자로만 이루어진 단어를 정의할 때 쓰는 태그
마우스를 올리면, 주석으로 title의 내용이 나타남 -->
<br><br>
sub : 기본 글자에 <sub> 아래첨자 </sub>를 나타내는 태그
<br><br>
sup : 기본 글자에 <sup> 위첨자</sup>를 나타내는 태그
<hr>
<!-- html 응용문제 1-->
<h3> 글자 관련 태그 응용 </h3>
<p>
태그들은 항상 태그 내에서 중첩으로 사용 가능하다. <br>
<b>굵은 글자를</b> 사용할수도 있고, <br>
<em>기울이거나</em>, <br>
<s>취소선</s>을 넣는 등 다양하게 사용할 수 있다. <br>
<mark>형광펜을 넣어</mark> 글자를 강조할 수도 있다.
</p>
</body>
</html>
Author And Source
이 문제에 관하여(01_글자 관련 태그), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kojam9041/01글자-관련-태그저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
