[HTML] 태그 정리

1_글자태그

 

<hn> : 제목을 입력할 때 사용하는 태그

<h3>&lt;hn&gt; : 제목을 입력할 때 사용하는 태그</h3>
<h1>h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>

<hr> : 줄 바꾸면서 수평선 넣는 태그

 

<br> : 줄 바꿈 태그

 

<p> : 단락을 구문하는 태그

 

문단을 나누는 태그

문단 영역을 나누는 태그로는 p태그와 pre태그가 있다.

 

p태그는 문단 영역을 나누는 태그 이지만 한 개의 공백만 표시하며

줄 바꿈 입력을 별도의 태그로 지정해주어야 한다.

<pre> pre 태그는 여러 칸          띄우기
혹은 줄 바꿈 등을 포함하여
입력한 내용 그대로 표현하는 태그이다. </pre>

 

그 밖의 텍스트를 다루는 태그들

 

<b> : 글자를 굵게 표시하는 태그

<strong> : 글자를 굵게 표시하는 태그

 

*** 웹 접근성 ***
b는 단순한 스타일만 변경한다면
strong은 실제로 중요한 내용이라는 의미를 담고 있어       
스크린 리더를 사용하는 경우 음성에서도 강조가 됨
em(emphasized) 역시 강조를 의미하여
스크린 리더를 사용하는 경우 차이가 있음   

<i> : 글자를 기울이는 태그

<em> : 글자를 기울이는 태그

 

<blockquote> : 인용문구를 나타내는 태그

<blockquote cite="https://www.naver.com">
	- cite 속성 : 인용된 사이트 주소를 작성
	직접 표시되지는 않지만 검색 엔진에는 노출됨
</blockquote>

 

<q> : 인용문구를 나타내는 태그

<mark> : 형광펜 효과를 나타내는 태그

<u> : 글자에 밑줄을 긋는 태그

<small> : 글자를 작게 표시하는 태그

<sub> : 기본 글자에 아래 첨자를 나타내는 태그

 

<sup> : 위 첨자를 나타내는 태그

<s> : 글자에 취소선을 넣는 태그

<abbr> : 마우스 오버 시 툴팁 형태로 출력하는 태그

 <abbr title="Internet of Things">IoT</abbr>란 
 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술이다.

<cite> : 참고한 웹문서를 이텔릭체로 나타내는 태그

    <p>
        참고사이트 : <cite>https://www.naver.com</cite>
    </p>

 

---

2_목록관련태그

<ul> : 순서 없는 목록 태그

<li> : 리스트 요소 등록

• html5
• css3
• javaScript

 

<ol> : 순서 있는 목록 태그

순서 있는 목록 태그의 숫자는 속성을 이용하여 변경할 수 있음

기본 값은 숫자로 되어 있으며, 1부터 시작함

영문 소문자로 표기 : type 속성의 속성 값을 소문자 "a"로 설정

영문 대문자로 표기 : type 속성의 속성 값을 대문자 "A"로 설정

로마 숫자 소문자로 표기 : type 속성의 속성 값을 소문자 "i"로 설정

로마 숫자 대문자로 표기 : type 속성의 속성 값을 대문자 "I"로 설정

시작 값 변경하기 : 시작 번호를 5부터 시작

<ol TYPE="1" start="5">
	<li>html5</li>
	<li>css3</li>
	<li>javaScript</li>  
</ol>

역순으로 항목 표기하기

: reversed 속성을 이용하여 역순으로 항목 번호를 표시할 수 있음

<ol TYPE="1" reversed="reversed">
	<li>html5</li>
	<li>css3</li>
	<li>javaScript</li>  
</ol>

 

<dl> : 정의 목록 태그

<dt> : 목록의 제목을 적는 태그

<dd> : 목록에 대한 설명을 적는 태그

 

---