글자 관련 태그 - HTML

2021/01/31 - [IT국비교육] - Index HTML

2021/01/28 - [IT국비교육/HTML] - HTML(Hyper Text Markup Language) 이란? - HTML

1. 문단 정리 관련 태그

문단 정리 관련 태그	기능
<br>	줄을 바꿈 연이어 코딩한 <br> 개수만큼 줄바꿈
<p>	한 행을 비움 연이어 코딩할 경우 1개만 인정 위아래 구분하기 위해서 사용
<pre> 문자열 </pre>	html문서 내 내가 쓴 그대로 출력하기 위해서 사용
<hr>	한 행을 차지하는 수평선 출력 · 속성 width=“선길이” size=“높이”(선 두께) align=“정렬위치” - left, center(default), right noshade : 그림자 적용 안함
<center> 문자열 </center>	가운데 정렬

 

2. 글자 관련 태그

화면에 출력되는 문자열을 컨트롤하는 태그입니다. 

글자의 형태, 크기, 글꼴 관련 태그	기능
<h[1,6]> 문자열 </h[1,6]>	문자열이 독자적으로 한 행을 차지(<br>) 자동으로 문자열이 두꺼워짐(<b>) 1이 제일 크고, 6이 제일 작음 제목으로 표현할 때 사용하는 태그
<font> 문자열 </font>	글꼴, 크기, 색상 들을 조절 · 속성 size=“글자크기” - [1,7], 숫자가 클수록 글자가 큼(default5 : 3) face=“글꼴명” color=“글색상”
<i> 문자열 </i>	문자열을 이탤릭체로 바꿈
<b> 문자열 </b>	문자열을 굵은 글씨로 바꿈
<sub> 문자열 </sub>	문자열을 아래 첨자로 바꿈
<sup> 문자열 </sup>	문자열을 윗 첨자로 바꿈
<u> 문자열 </u>	문자열에 밑줄을 그음
<s> 문자열 </s>	문자열 가운데 선을 그음

 

특수 문자 관련 태그	기능
 	공백(\t) 1개를 출력 연이어 사용한 만큼 계속 공백으로 인정
&lt;	문자 <를 출력(DB Query와 연관)
&gt;	문자 >를 출력(DB Query와 연관)
&quot;	문자 “를 출력
&amp;	문자 &를 출력

 

 

3. 목록 관련 태그

번호 없는 목록 만들기	설명	출력 형태
<ul type=“circle”>     <li>목록1</li>     ~     <li>목록n</li> </ul>	번호 없는 목록을 출력 자동으로 들여쓰기가 됨 · ul 태그 속성 type=“disk”(default)- ● type=“circle” - ◯ type=“square” - ■	◯목록1 ~ ◯목록n

 

번호 있는 목록 만들기	설명	출력 형태
<ol type=“A”>     <li>목록1</li>     ~     <li>목록n</li> </ol>	번호 있는 목록을 출력 자동으로 들여쓰기 됨 · ol 태그 속성 type=“1”(default) - 1, 2, 3 type=“a” - a, b, c type=“A” - A, B, C type=“ⅰ” - ⅰ, ⅱ, ⅲ	A.목록1 N,목록n

 

정의 목록 만들기	설명	출력 형태
<ol>    <li>제목1</li>    <ul>        <li>제목내용</li>        ~    </ul>    <li>제목2</li>    <ul>        <li>제목내용</li>        ~    </ul> </ol>	제목과 제목을 정의하는 제목내용 을 출력	1.제목1    ●제목내용    ~ 2.제목2    ●제목내용    ~

 

계층적인 목록 만들기	설명	출력 형태
<dl>     <dt>정의내용제목1</dt>         <dd>정의내용1</dd>         ~     <dt>정의내용제목2</dt>         <dd>정의내용2</dd>         ~     ~ </dl>	계층적인 목록을 출력	정의내용제목1     정의내용1     ~ 정의내용제목2     정의내용2     ~ ~

   
4. 정렬 관련 태그, 속성

화면에 출력되는 컨텐츠의 정렬(좌, 중, 우)을 align 속성을 통해 설정됩니다.
태그명에 따라 align 속성이 적용 않을 수도 있습니다.

⓵

<태그명 align=“정렬위치”> 컨텐츠 </태그명>

컨텐츠가 정렬위치 left, center, right 설정에 따라 정렬됩니다.

⓶

<center> 컨텐츠 </center>

컨텐츠가 중앙으로 정렬됩니다.

What is HTML What is basic Tag What is List Tag How to use List Tag