개블리셔
[html기본요소] 문단태그(+ br태그, 특수문자 태그) 본문
문단이라함은 문장들이 모여 만들어지는 것이며 문맥에 따라 문단을 나눌 수 있다.
문단태그는 html에서 가장 기초되는 태그 요소들이며 블록요소이고 문단을 표현하는 요소이다.
p태그
p태그는 텍스트를 작성하기 위해 필요한 문단태그 중 하나이다.
텍스트를 작성하기 위핸 블록요소의 태그이기때문에, 블록요소임에도 불구하고 다른 블록요소를 보함할 수 없다.
하지만 그 밖의 블록요소 특징은 전부 갖고있기 때문에, 줄바꿈이나 넓이 및 높이를 조절 할 수 있다.
<p>안녕하세요? 개블리셔 블로그입니다.</p>p태그는 블록요소이기 때문에 줄바꿈이 가능한데, 어떠한 사람들은 그것을 남용하여 줄바꿈을 하기위해 p태그를 남발하는 경우가 있다.
<p>안녕하세요?</p>
<p>개블리셔 블로그입니다.</p>
<!-- 권장하지 않는 사용 방법 -->p태그의 의미는 텍스트박스로, 위와 같이 작성했을때 웹표준에 어긋나게된다.
장식적 및 스타일적으로 꾸며주기를 원한다면 웹표준에 맞는 다른 태그를 찾아서 사용해야 한다.
pre태그
pre태그는 형식화된 텍스트를 나타내는 태그이다. 처음 학습할때에는 p태그와 pre태그를 많이 헷갈려 한다.
pre태그 같은 경우, 띄어쓰기, 엔터, 들여쓰기 등 코드에 입력한 그대로를 웹 브라우저에 노출시켜준다.
하지만 스크린리더기나 점자 출력기에서는 pre태그의 형식에 대해 제대로 지킬 수 없으며 잘 못 읽혀지기때문에 pre태그 작성시 독특한 포맷을 가진 텍스트일때만 사용해야 한다.
<pre>
이리오너라
업고 놀자.
</pre>
br태그
인라인 태그 중 하나인 br태그는 스스로 닫는 태그이며 줄 바꿈 요소이다. 즉 ENTER와 같은 기능을 한다.
이전에는 많이 쓰이는 태그 중 하나였지만, 코드 줄은 최대한 짧은 것이 가장 좋기 때문에 많이 쓰이지는 않는다.
br태그는 부득이하게 줄바꿈이 필요한 부분이 아니라면 스타일로 해결하는 것이 가장 좋다.
<p>
안녕하세요?<br />
개블리셔 블로그입니다.
</p>
특수문자
특수문자, 즉 이스케이프 문자는 말 그대로 특수 기호를 나타내는 문자들이다.
키보드에 있는 특수문자를 사용해도 되긴 하지만, 사용했을 경우 태그로 오인하여 문제가 발생하는 경우가 많기때문에 코드로 특수문자를 나타낼 수 있다.
<p>이번 잡지의 컨셉은 <모던함>으로....</p>
<!-- 잘못된 사용 방법 -->위와같이 <꺾은 괄호>를 키보드에 있는 특수문자로 입력할 경우 태그로 오인하여 오류가 생긴다.
그렇기때문에 특수문자는 코드로 입력해주는 것이 가장 좋다.
또한 띄어쓰기 같은 경우, 코드상에서 한칸만 인지하는데 특수문자 띄어쓰기를 사용했을 때 여러번 띄어쓰기가 가능하다
<p>이번 잡지의 컨셉은 <모던함>으로....</p>
<!-- 올바른 사용 방법 -->
| 표현문자 | 숫자표현 | 문자표현 | 설명 |
| - | �- | - | 사용하지 않음 |
| space | 	 | - | 수평탭 |
| space | | - | 줄 삽입 |
| - | - | - | 사용하지 않음 |
| space |   | - | 여백 |
| ! | ! | - | 느낌표 |
| " | " | " | 따옴표 |
| # | # | - | 숫자기호 |
| $ | $ | - | 달러 |
| % | % | - | 백분율 기호 |
| & | & | & | Ampersand |
| ' | ' | - | 작은 따옴표 |
| ( | ( | - | 왼쪽 괄호 |
| ) | ) | - | 오른쪽 괄호 |
| * | * | - | 아스트릭 |
| + | + | - | 더하기 기호 |
| , | , | - | 쉼표 |
| - | - | - | Hyphen |
| . | . | - | 마침표 |
| / | / | - | Solidus (slash) |
| 0 - 9 | 0-9 | - | 0부터 9까지 |
| : | : | - | 콜론 |
| ; | ; | - | 세미콜론 |
| < | < | < | 보다 작은 |
| = | = | - | 등호 |
| > | > | > | 보다 큰 |
| ? | ? | - | 물음표 |
| @ | @ | - | Commercial at |
| A - Z | A-Z | - | A부터 Z까지 |
| [ | [ | - | 왼쪽 대괄호 |
| \ | \ | - | 역슬래쉬 |
| ] | ] | - | 오른쪽 대괄호 |
| ^ | ^ | - | 탈자부호 |
| _ | _ | - | 수평선 |
| ` | ` | - | Acute accent |
| a - z | a-z | - | a부터 z까지 |
| { | { | - | 왼쪽 중괄호 |
| | | | | - | 수직선 |
| } | } | - | 오른쪽 중괄호 |
| ~ | ~ | - | 꼬리표 |
| - | -Ÿ | - | 사용하지 않음 |
|   | | Non-breaking space | |
| ¡ | ¡ | ¡ | 거꾸로된 느낌표 |
| ￠ | ¢ | ¢ | 센트 기호 |
| ￡ | £ | £ | 파운드 |
| ¤ | ¤ | ¤ | 현재 환율 |
| ￥ | ¥ | ¥ | 엔 |
| | | ¦ | ¦ | 끊어진 수직선 |
| § | § | § | 섹션 기호 |
| ¨ | ¨ | ¨ | 움라우트 |
| ⓒ | © | © | 저작권 |
| ª | ª | ª | Feminine ordinal |
| ≪ | « | « | 왼쪽 꺾인 괄호 |
| ￢ | ¬ | ¬ | 부정 |
| | ­ | ­ | Soft hyphen |
| ? | ® | ® | 등록상표 |
| &hibar; | ¯ | ¯ | Macron accent |
| ° | ° | ° | Degree sign |
| ± | ± | ± | Plus or minus |
| ² | ² | ² | Superscript two |
| ³ | ³ | ³ | Superscript three |
| ´ | ´ | ´ | Acute accent |
| μ | µ | µ | Micro sign (Mu) |
| ¶ | ¶ | ¶ | 문단기호 |
| · | · | · | Middle dot |
| ¸ | ¸ | ¸ | Cedilla |
| ¹ | ¹ | ¹ | Superscript one |
| º | º | º | Masculine ordinal |
| ≫ | » | » | 오른쪽 꺾인 괄호 |
| ¼ | ¼ | ¼ | 4분의 1 |
| ½ | ½ | ½ | 2분의 1 |
| ¾ | ¾ | ¾ | 4분의 3 |
| ¿ | ¿ | ¿ | 거꾸로된 물음표 |
| A | À | À | Capital A, grave accent |
| A | Á | Á | Capital A, acute accent |
| A | Â | Â | Capital A, circumflex accent |
| A | Ã | Ã | Capital A, tilde |
| A | Ä | Ä | Capital A, dieresis or umlaut mark |
| A | Å | Å | Capital A, ring (Angstrom) |
| Æ | Æ | Æ | Capital AE diphthong (ligature) |
| C | Ç | Ç | Capital C, cedilla |
| E | È | È | Capital E, grave accent |
| E | É | É | Capital E, acute accent |
| E | Ê | Ê | Capital E, circumflex accent |
| E | Ë | Ë | Capital E, dieresis or umlaut mark |
| I | Ì | Ì | Capital I, grave accent |
| I | Í | Í | Capital I, acute accent |
| I | Î | Î | Capital I, circumflex accent |
| I | Ï | Ï | Capital I, dieresis or umlaut mark |
| Ð | Ð | Ð | Capital Eth, Icelandic |
| N | Ñ | Ñ | Capital N, tilde |
| O | Ò | Ò | Capital O, grave accent |
| O | Ó | Ó | Capital O, acute accent |
| O | Ô | Ô | Capital O, circumflex accent |
| O | Õ | Õ | Capital O, tilde |
| O | Ö | Ö | Capital O, dieresis or umlaut mark |
| × | × | × | Multiply sign |
| Ø | Ø | Ø | width="130"Capital O, slash |
| U | Ù | Ù | Capital U, grave accent |
| U | Ú | Ú | Capital U, acute accent |
| U | Û | Û | Capital U, circumflex accent |
| U | Ü | Ü | Capital U, dieresis or umlaut mark |
| Y | Ý | Ý | Capital Y, acute accent |
| Þ | Þ | Þ | Capital Thorn, Icelandic |
| ß | ß | ß | Small sharp s, German (sz ligature) |
| a | à | à | Small a, grave accent |
| a | á | á | Small a, acute accent |
| a | â | â | Small a, circumflex accent |
| a | ã | ã | Small a, tilde |
| a | ä | ä | Small a, dieresis or umlaut mark |
| a | å | å | Small a, ring |
| æ | æ | æ | Small ae diphthong (ligature) |
| c | ç | ç | Small c, cedilla |
| e | è | è | Small e, grave accent |
| e | é | é | Small e, acute accent |
| e | ê | ê | Small e, circumflex accent |
| e | ë | ë | Small e, dieresis or umlaut mark |
| i | ì | ì | Small i, grave accent |
| i | í | í | Small i, acute accent |
| i | î | î | Small i, circumflex accent |
| i | ï | ï | Small i, dieresis or umlaut mark |
| ð | ð | ð | Small eth, Icelandic |
| n | ñ | ñ | Small n, tilde |
| o | ò | ò | Small o, grave accent |
| o | ó | ó | Small o, acute accent |
| o | ô | ô | Small o, circumflex accent |
| o | õ | õ | Small o, tilde |
| o | ö | ö | Small o, dieresis or umlaut mark |
| ÷ | ÷ | ÷ | Division sign |
| ø | ø | ø | Small o, slash |
| u | ù | ù | Small u, grave accent |
| u | ú | ú | Small u, acute accent |
| u | û | û | Small u, circumflex accent |
| u | ü | ü | Small u, dieresis or umlaut mark |
| y | ý | ý | Small y, acute accent |
| þ | þ | þ | Small thorn, Icelandic |
| y | ÿ | ÿ | Small y, dieresis or umlaut mark |
참조 : kor.pe.kr/util/4/charmap2.htm
'FE > HTML' 카테고리의 다른 글
| [html기본요소] 제목요소(Headline) (0) | 2020.12.22 |
|---|---|
| [html기본요소] 블록요소와 인라인요소 (0) | 2020.12.22 |
| [html기본요소] head의 역할 (0) | 2020.12.22 |
| [html] Doctype (0) | 2020.12.15 |
| 웹표준이란? (1) | 2020.12.15 |
Comments