Hogwarts
HTML Basic 6
Entities, Symbols, Emojis, Charset, URL Encode, XHTML
28. HTML Entities 👩💻
1. HTML Entities
HTML 을 사용할 때 Character Entities를 사용하는 데는 2가지 이유가 존재한다. 첫 번째는 HTML 의 < 나 >, 연속된 공백과
같은 허용되지 않거나 HTML 코드와 혼동될 수 있는 예약어(reserved characters)를 대체하기 위함이고, 두 번째는 유니코드를 직접 사용하는
대신 Character Entities 를 이용해 Symbol을 표현하기 위함이다.
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| non-breaking space | |||
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| ” | double quotation mark | " | " |
| ’ | single quotation mark(apostrophe) | ' | ' |
| © | COPYRIGHT | © | © |
| ® | REGISTERED TRADEMARK | ® | ® |
| ∂ | PARTIAL DIFFERENTIAL | ∂ | ∂ |
| ∅ | EMPTY SETS | ∅ | ∅ |
| ∏ | N-ARY PRODUCT | ∏ | ∏ |
| ∑ | N-ARY SUMMATION | ∑ | ∑ |
Entity Name 은 약어이기 때문에 기억하기 쉽지만 모든 브라우저에서 지원하지 않을 수 있다. 반면 Entity Number 는 기본적으로
UTF-8문자셋을 이용하고, 이 코드 번호는 ASCII 의 10진법의 확장형이기 때문에 모든 브라우저에서 지원한다(참고로 UTF-8 은 128 ~ 159 번은 사용하지 않는다).
2. Combining Diacritical Marks
Extended Grapheme Clusters 를 지원하는 것 같다. 다음 예제를 보면 이해가 쉬울 것이다.
| Mark | Character | Construct | Result |
|---|---|---|---|
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
29. HTML Symbols 👩💻
HTML Entities 에서 소개한 것 외에 많이 사용되는 Symbol 을 좀 더 소개한다.
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| Α | GREEK CAPITAL LETTER ALPHA | Α | Α |
| Β | GREEK CAPITAL LETTER BETA | Β | Β |
| Γ | GREEK CAPITAL LETTER GAMMA | Γ | Γ |
| Δ | GREEK CAPITAL LETTER DELTA | Δ | Δ |
| Ε | GREEK CAPITAL LETTER EPSILON | Ε | Ε |
| Ζ | GREEK CAPITAL LETTER ZETA | Ζ | Ζ |
| € | EURO SIGN | € | € |
| ™ | TRADEMARK | ™ | ™ |
| ← | LEFTWARDS ARROW | ← | ← |
| ↑ | UPWARDS ARROW | ↑ | ↑ |
| → | RIGHTWARDS ARROW | → | → |
| ↓ | DOWNWARDS ARROW | ↓ | ↓ |
| ♠ | BLACK SPADE SUIT | ♠ | ♠ |
| ♣ | BLACK CLUB SUIT | ♣ | ♣ |
| ♥ | BLACK HEART SUIT | ♥ | ♥ |
| ♦ | BLACK DIAMOND SUIT | ♦ | ♦ |
30. HTML Emojis 👩💻
UTF-8 Emojis를 사용하려면 제대로 표현되도록 document 의 character set 을 지정해주어야한다.
<meta charset="UTF-8">
최신 브라우저는 미지정 시
UTF-8을 default character set 으로 설정한다.
See the Pen HTML Character Entities by SB Park (@sbpark88) on CodePen.
31. HTML URL Encode 👩💻
1. Uniform Resource Locator
URL은 w3schools.com 또는 192.68.20.50과 같은 주소를 표현하며 다음과 같이 구성되어진다.
https://www.w3schools.com/html/default.asp
- scheme : protocol 을 나타내며 웹에서는 주로 http 또는 https 를 사용하며 위 경우
https에 해당한다. - prefix : domain prefix 로 http 또는 https 의 default prefix 는 위에서 볼 수 있듯이
www이다. - domain : 웹 서버의 고유 주소를 나타내며 위 경우
w3schools.com에 해당한다. - port : host 의 포트 번호를 정의하며, http 는 80, https 는 443 을 default 로 사용한다. 위 경우 생략되었으나
443을 기본값으로 사용한다. - path : 서버상의 경로를 가리킨다. 생략시 서버의 root 를 의미한다. 위 경우
/html이다. - filename : 서버의 document 또는 resource 를 가리킨다. 위 경우
default.asp이다.
2. Common URL Schemes
| Scheme | Short for | Used for |
|---|---|---|
| http | HyperText Transfer Protocol | Common web pages. Not encrypted |
| https | Secure HyperText Transfer Protocol | Secure web pages. Encrypted |
| ftp | File Transfer Protocol | Downloading or uploading files |
| file | A file on your computer |
3. URL Encoding
URL 은 오직 ASCII character-set만 표현할 수 있다. 따라서 ASCII character-set 이외의 문자는 전송을 위해 ASCII 가
인식할 수 있으나 ASCII 에 포함되지 않는 방식으로 변경해야한다. 따라서 다음 규칙을 갖는다.
ASCII가 아닌 문자는%[hexadecimal]로 변환한다.- URL 은 공백을 포함할 수 없다.
+도는%20으로 변환한다.
See the Pen Untitled by SB Park (@sbpark88) on CodePen.
32. XHTML 👩💻
1. What is XHTML?
EXtensible HyperText Markup Language은 XML 기반의 더 엄격한 HTML버전이다. XML application으로 정의된 HTML 로
주요 브라우저는 모두 이를 지원한다.
XHTML 은 XML 과 같은 다른 포맷과 함께 작업할 수 있도록 HTML 을 보다 확장 가능하고 유연하게 만들기 위해 개발되었다. 그리고 브라우저는 HTML 을 느슨하게 다룸으로 일부 오류가 있어도 이를 무시하고 정상적으로 렌더링한다. 반면, XHTML XML 포맷과의 호환을 위해 오류를 더 엄격하게 다룬다.
다음은 XHTML 의 특징이다.
<!DOCTYPE>을 반드시 작성해야한다.<html xmlns="http://www.w3.org/1999/xhtml">과 같이<html>element 에xmlns(XML Name Space)를 반드시 작성해야한다.<html>,<head>,<title>,<body>모두 반드시 작성해야한다.element는 반드시 닫혀야한다(closed).element는 반드시 열린 순서의 역순으로(LIFO) 닫혀 완벽하게nested구조를 취해야한다.element는 반드시소문자로 작성해야한다.attribute name은 반드시소문자로 작성해야한다.attribute value는 반드시"로 감싸야한다.attribute value는 반드시작성해야한다.
2. Requirements of XHTML.
<!DOCTYPE><html xmlns=""><html>,<head>,<title>,<body>
위 3가지의 기본 의무조건을 반드시 작성해야한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>
3. Elements Must Always be Closed
- Correct
<p>This is a paragraph</p>
<p>This is another paragraph</p>
- Wrong
<p>This is a paragraph
<p>This is another paragraph
4. Empty Elements Must Always be Closed
XHTML 은 <br>, <hr>과 같이 종료 태크가 없는 Empty Elements 역시 공백 + / 를 이용해 반드시 닫아줘야한다.
- Correct
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
- Wrong
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
5. Elements Must be Properly Nested
- Correct
<b><i>Some text</i></b>
- Wrong
<b><i>Some text</b></i>
6. Elements Must be in Lowercase
- Correct
<body>
<p>This is a paragraph</p>
</body>
- Wrong
<BODY>
<P>This is a paragraph</P>
</BODY>
7. Attribute Names Must be in Lowercase
- Correct
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
- Wrong
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
8. Attribute Values Must be Quoted
- Correct
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
- Wrong
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
9. XHTML Attribute Minimization is Forbidden
- Correct
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />
- Wrong
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />
Reference
- “HTML Tutorial.” W3Schools. accessed Jan. 27, 2023, W3Schools-HTML.