본문 바로가기
Programming/HTML

[HTML] HTML 마크업 요소 (포맷팅&목록형)

by HoonSikE 2022. 3. 14.
반응형
SMALL
포맷팅 요소
● 포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것도 있다. ex) <b>, <strong>
Tag 명 설명
<abbr> 생략된 약어 표시하거나, Title 속성을 함께 사용한다.
<address> 연락처 정보 표시한다.
<blockquote> 긴 인용문구 표시, 좌우로 들여 쓰기가 된다.
<q> 짧은 이용 문구 표시, 좌우로 따옴표가 붙는다.
<cite> 웹 문서나 포스트에서 참고 내용을 표시한다.
<pre> 공백, 줄 바꿈 등 입력된 그대로 화면에 표시한다.
<code> 컴퓨터 인식을 위한 소스 코드이다.
<mark> 특정 문자열을 강조한다. 화면에는 하이라이팅 된다.
<hr> 구분선을 추가한다.
<b>, <strong> 굵은 글씨로 표시한다.
 * <strong> : 특정 문자열 강조 의미 추가
<del> 삭제된 텍스트를 정의한다.
<i>, <em> 이탤릭(기울게) 표시
 * <em> : 특정 문자열 강조 의미 추가
<ins> 삽입된 텍스트를 정의한다.
<big>, <small> 큰 글자, 작은 글자 표시
<sup>, <sub> 위 첨자, 아래 첨자 표시
<s>, <u> 취소선, 밑줄
● 글자 모양 Tag : 글자에 모양을 주어 의미와 형태를 부여
 
<p> <b> &lt;b&gt; Test</b> </p>
<p> <del> &lt;del&gt; Test</del> </p>
<p> <em> &lt;em&gt; Test</em> </p>
<p> <i> &lt;i&gt; Test</i> </p>
<p> <ins> &lt;ins&gt; Test</ins> 텍스트 삽입</p>
<p> <mark> &lt;mark&gt; Test</p>
<p> <small> &lt;samll&gt; Test</small> </p>
<p> <strong> &lt;strong&gt; Test</strong> </p>
<p> Test<sub>아래첨자</sub></p>
<p> Test<sup>위첨자</sup> </p>

● 결과 (<body> 내부에 입력)

<b> Test
<del> Test
<em> Test
<i> Test
<ins> Test 텍스트 삽입
<mark> Test
<samll> Test
<strong> Test
Test아래첨자
Test위첨자

● <pre> Tag 예시

<pre>
이렇게 특수문자를 쓰거나 &<>@1
     space를 5번 입력하거나
여기에는 어떤 내용을 써도 그대로 출력됩니다.
</pre>

● 결과 (<body> 내부에 입력)

이렇게 특수문자를 쓰거나 &<>@1
     space를 5번 입력하거나
여기에는 어떤 내용을 써도 그대로 출력됩니다.
목록형 요소
 - 목록 Tag는 하나 이상의 하위 Tag를 포함한다.
 - 목록 Tag는 각 항목을 들여 쓰기로 표현한다.
 - 번호 또는 심볼을 이용해서 목록을 표현한다.
tag명 설명
<ul>  - 번호 없는 목록을 표시한다.
 - 항목 앞에 심볼을 표시한다.
<ol>  - 번호 있는 목록을 표시한다.
 - 숫자, 알파벳, 로마 숫자 등으로 표시한다.
<li>  - 목록 항목 <ul>이나 <ol>tag 하위에서 사용한다.
<dl>  - 용어 정의와 설명에 대한 내용을 목록화해서 표시한다.
<dt>  - 용어 목록의 정의 부분을 나타낸다.
<dd>  - 용어 목록의 설명 부분을 나타낸다.
● <ul> Tag 추가 설명
 
<ul type= "">
     <li></li>
<ul>
속성 속성 값 설명
type disc  - 꽉 찬 원(기본값)
circle  - 빈 원
square  - 꽉찬 사각형
● <ol> Tag 추가 설명
 
<ol start="" type="" reversed>
 <li> </li>
</ol>
속성 속성 값 설명 
start 숫자  - 적용할 시작번호를 지정합니다.
 - start="시작번호"

type
  - 목록의 순번의 타입을 지정합니다.
 - type="속성 값"
1  - 숫자(기본값)
a  - 영문 소문자
A  - 영문 대문자
i  - 로마 숫자 소문자
I  - 로마 숫자 대문자
reversed    - 내림차순(역순)으로 출력합니다

● 목록형 Tag 소스코드

<ul>
    <li>Unordered List</li>
    <li style="list-style-type: circle;">circle</li>
    <li style="list-style-type: square;">square</li>
    <li style="list-style-type: disc;">disc</li>
</ul>
<hr>
<ol>
    <li>Ordered List1</li>
    <li>Ordered List2</li>
    <li>Ordered List3</li>
</ol>
<ol start="10" type="I" reversed>
    <li>Ordered List1</li>
    <li>Ordered List2</li>
    <li>Ordered List3</li>
</ol>
<hr>
<dl>
    <dt>Definition Term1</dt>
    <dd>Definition Details1</dd>
    <dt>Definition Term2</dt>
    <dd>Definition Details1</dd>
    <dd>Definition Details2</dd>
</dl>

● 결과 (<body> 내부에 입력)

  • Unordered List
  • circle
  • square
  • disc
  1. Ordered List1
  2. Ordered List2
  3. Ordered List3
  1. Ordered List1
  2. Ordered List2
  3. Ordered List3
Definition Term1
Definition Details1
Definition Term2
Definition Details1
Definition Details2

HTML List
 

HTML List

HTML 기본 문법!!! ●   기회는 준비된 자에게 찾아온다.

han-hoon.tistory.com

  

기회는 준비된 자에게 찾아온다.

 

반응형
LIST
저작자표시 비영리 변경금지

'Programming > HTML' 카테고리의 다른 글

[HTML] HTML 마크업 요소 (링크&iframe)  (0) 2022.03.14
[HTML] HTML 마크업 요소 (이미지)  (0) 2022.03.14
[HTML] HTML 마크업 요소 (Table)  (0) 2022.03.14
[HTML] HTML 기본  (0) 2022.03.14
[HTML] HTML의 특징  (0) 2022.03.13

관련글

댓글

티스토리툴바