웹페이지의 구성요소는 여러가지가 있지만 그중에 가장 많이 사용되는것은 당연 텍스트이다.
텍스트의 형식은 제목이나 부제목 다른 인물의 말이나 글을 이용하는것이 될수도 있다.
그러한 글들을 구분하기 위해서는 여러가지 태그들이 사용되는데 그에 대한 주요 태그들은 다음과같다.
텍스트 태그
hn 태그 : 제목이나 주제를 나타내는 텍스트에 사용된다.
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
h는 heading을 의미하며 n은 중요도를 나타낸다. 중요도는 1 ~ 6가지 정의되어 있고 숫자가 낮을수록 중요도가 큰것을 의미한다.
주의사항
hn태그로 작성된 텍스트는 검색엔진에서 키워드로 인식된다. 검색엔진은 hn태그를 검색시에 1~6까지 차레대로 검색하게되는데 만약 중간에 건너뛰고 hn태그사용시 그이후에 것들은 검색하지 않는다 예를들어서 특정 홈페이지에서 1,2,3,5,6의 중요도를 가진 hn태그를 사용했을경우 4가빠져있기때문에 검색엔진은 1 2 3이후에 5,6을 검색하지 않는다는 의미이다. 그렇기에 빼먹지 말고 순차적으로 작성하도록 하여야한다.p :
p 태그 : 하나의 문단을 작성할때 사용되는 태그이다.
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
사실상 HTML에서는 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기때문에 p태그를 많이 사용한다.
br 태그 : 줄바꿈 할때사용
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
HTML은 모든 명령이나 지시를 태그로 해야하기때문에 줄바꿈할때도 br태그를 사용하여야한다.
blockquote 태그 : 어떠한 출처에서 글을 인용한단위로 텍스트를 작성할때사용한다.
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
인용글을 묶어서 표현할때 사용되며 사용시에 글이 들여쓰기가된다. 만약에 출처가 확실한 인용문이 있을경우 cite로 출처를 확실히 명시해야한다.(저작권 관련문제인가?)
주의사항
blockquote는 최소 한개의 p태그를 가지고 있어야한다.그래서 p태그 내용에 blockquote태그는 포함할수 없다(왜 그런지도 모르겠고 실제로 blockquote에 p태그를 사용하지 않거나 p태그에 blockquote를 사용해도 문제가 없었다. 이해가 안감.)
q 태그 : 작은 인용문을 작성할때 사용된다. 사용법자체는 blockquote와 별차이가 없다.
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
작은 인용문을 작성할때 사용되며 사용하면 해당 글귀에 쌍따옴표가 붙게된다(이럴꺼면 그냥 쌍따옴표를 붙이면되지 왜 이런식으로 처리되는걸까..? 정말 앱개발자로써는 이해하기 힘든 신기한 웹의 세계이지만 모든것은 이유가 있고 내가 그 이유를 모를뿐이다..)
ins 태그 :추가텍스트를 나타낼 경우 사용 되며 사용시 밑줄이 표기됨
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
del 태그 : 삭제된 텍스트를 나타낼경우 사용되며 사용시 취소선이 표기됨.
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
sub 태그 : 글짜의 아래에 표기된다. (아래첨자)
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
sup 태그 : 글짜의 위에 표기된다.(위첨자)
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
작성한 코드 공유 !
<!-- DTD 형식정의 Document Type Definititon 웹 브라우저가 처리할 HTML문서가 어떤 문서형식을 따라야하는지 정의
HTML5등장 이후부터 다른 형식을 정의할 필요가 없어졌기 때문에 항상 똑같이 정의됨.
-->
<!DOCTYPE html>
<!-- 요소는 <태그명(시작태그) 속성 ="속성값1,속성값2">컨텐츠</태그명(종료태그)> -->
<!-- HTML 태그는 부모,자식,형제라는 개념이 존재한다.
이는 프로그램언어의 상속과는 다르다.
상위 태그를 부모라 칭하고 하위 태그를 자식이라 칭한다.
상위 태그 동일선상에 존재하는 태그들은 형제관계라고 표현한다.
상황에 따라 조상과 후손관까지 설명한다고 하는데 그냥 가볍게 알고 넘어만가자
-->
<html lang="ko">
<!-- 해드는 Html의 속성정의 -->
<head>
<!-- 인코딩 유형 -->
<meta charset="UTF-8">
<!-- 이전 브라우저 최신 엔진으로 랜더링 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 화면을 어떻게 처리할지에 대한 속성 정의 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 타이틀 정의 타이틀을 중복되면 안되고 HTML문서에 꼭하나의 타이틀이 있어야함
구글이나 네이버 검색엔진에서는 HTML문서를 타이틀로 찾기 때문에 하나의 웹사이트에 중복된 타이틀을 가지고 있다면
신뢰가 낮은 싸이트로 생각함.
-->
<title>My First Web Page!</title>
<body>
<!-- 웹 페이지에 표할 내용을 적습니다. -->
<!-- P태그는 사용할때마다 자동으로 줄바꿈처리된다. 이런 태그를 "블럭 요소라칭함"
반대로 a,span처럼 공간이 부족할때만 줄바꿈 처리가되는 태그는 인라인요소라 칭한다.한다.
-->
<p>나의 첫 웹 페이지</p>
<!-- hn 태그 제목이나 주제를 나타내는 텍스트를 표현할때 사용된다.
h : heading을 의미하고 n은 숫자 중요도를 나타낸다.
n : 상기에서 말하였듯 중요도를 나타내며 1 ~ 6의 중요도를 가진다. 1이면 큰수.
참고 사항 : hn태그로 작성된 택스트는 검색엔진에서 키워드로 인식된다. 따라서 검색엔진 최적화(SEO, Search Engine Optimization)를 위해 본문의 핵심이 되는 내용이나
주제를 잘선택해서 작성해야함.
-->
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
<!-- P태그는 문단을 작성할때 많이 사용됨.
HTML에서 제목이나 주제를 나타내는 택스트가 아니면 대부분 본문이기에 p태그를 자주 사용.
-->
<p>하나의 문단을 작성할 때는 p 태그를 사용합니다.</p>
<p>
안녕하세요. <br> <!--br 태그는 줄바꿈 할떄 사용된다.-->
공부하기 좋은 날 입니다.
</p>
<!-- 어떠한 출처에서 인용한 문단 단위의 텍스트를 작성할때 사용되며 문서 전체가 들여쓰기 된다.
출처가 확실한 인용문은 cite속성으로 출처 경로를 명시해야한다. (도대체 왜일까? 저작권관련인것인가..?)
주의사항 blockqute태그는 무조껀 단하나의 p태그를 포함되야한다. 그렇기 때문에 p태그 내용에 blockqute내용이 포함될수 없음을 주의하라고
책에 나와있는데.. 이해가 안간다 심지어. blockqute에 p태그를 포함 안해도 또는 p태그에 blockqute를 포함해도 문제 없이 동작한다. (chrome에서)
-->
<blockquote cite="https://ko.wikipedia.org/wiki/HTML">
<p>
하이퍼 텍스트 마크업 업어(Hyper text Markup Language, HTML, 문화어: 초본문표식달 <br>
기언어, 하이퍼본문표달기식언어)는 웹페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, <br>
단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 박의 항목으로 <br>
구조적 문서를 만들 수 있는 방법을 제공한다.</p>
</p>
</blockquote>
<p>차세대 웹기술지원센터의 데이터에 따르면
<!-- q태그는 문단안에 텍스트 단위의 짧은 인용문을 작성할떄 사용할 수 있는 태그이다. 사용한 콘텐츠는 큰따옴표로 묶입니다.
아니 그냥 큰따옴표를 쓰면되는거 아닌가.?
-->
<q cite ="https://koreahtml5.kr/front/stats/browser/browserUseStats.do">
2021년 대한민국에서 가장 점유율이 높은 웹 브라우저는 구글의 크롬입니다.</q>
</p>
<!--
ins 태그는 새로이 추가된 텍스트를 의미하고 사용시 글에 밑줄이 생성된다.
del 태그는 삭제된 텍스트를 의미하고 사용시에 취소선이 생성된다.
-->
<ins>추가 텍스트</ins> <br>
<del>삭제 텍스트</del>
<p>세일 기간을 맞이하여 온라인 가으이 수강권을 할인된 금액(정가<del>36,000원</del> <ins>20,000원</ins>)에 판매합니다.</p><br>
<!--
sub 글자가 아래에 표기
sup 글자가 위에 표기
-->
<p>글<sub>아래 첨자</sub></p>
<p>글<sup>위 첨자</sup></p>
<br>
<p>공기의 원소 기호는 H<sub>2</sub>0</p>
<p>4<sup>2</sup>은 16입니다.</p>
</body>
</head>
</html>