10. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 특수 문자
안녕하세요. 언제나 휴일, 언휴예요.
HTML에서는 < 와 >는 태그를 표현할 때 사용하죠. 그러면 실제 화면에 < 나 >를 표현하려면 어떻게 해야 할까요?
HTML 문서에 표현하기 위해 약속한 복잡한 표현을 사용해야 하는 특수 문자들이 있어요. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 문자일 수 있죠. 하지만 이러한 특수 문자를 암기하지는 않더라도 필요할 때 찾아서 쓸 수는 있어야 겠죠.
먼저 �나  처럼 표현하면 특수 문자를 확인할 수 있어요. 이는 약속한 코드값으로 문자를 확인하는 것이예요. 이를 HTML 문서 작성에 사용하면 코드값에 따른 문자를 확인할 수 있겠죠.
다음은 코드 00에서 코드 249까지 문자를 확인하기 위한 HTML 문서의 내용입니다.
<!DOCTYPE html>
<html>
<head>
<title> 특수 문자</title>
<meta charset="utf-8" />
</head>
<body>
<p>00 � 01  02  03  04  05  06  07  08  09 	</p>
<p>10 11  12  13 14  15  16  17  18  19 </p>
<p>20  21  22  23  24  25  26  27  28  29 </p>
<p>30  31  32   33 ! 34 " 35 # 36 $ 37 % 38  39 '</p>
<p>40 ( 41 ) 42 * 43 + 44 , 45 - 46 . 47 / 48  49 1</p>
<p>50 2 51 3 52 4 53 5 54 6 55 7 56 8 57 9 58  59 ;</p>
<p>60 < 61 = 62 > 63 ? 64 @ 65 A 66 B 67 C 68  69 E</p>
<p>70 F 71 G 72 H 73 I 74 J 75 K 76 L 77 M 78  79 O</p>
<p>80 P 81 Q 82 R 83 S 84 T 85 U 86 V 87 W 88  89 Y</p>
<p>90 Z 91 [ 92 \ 93 ] 94 ^ 95 _ 96 ` 97 a 98  99 c</p>
<p>100 d 101 e 102 f 103 g 104 h 105 i 106 j 107 k 108 l 109 m</p>
<p>110 n 111 o 112 p 113 g 114 r 115 s 116 j 117 u 118 v 119 w</p>
<p>120 x 121 y 122 z 123 g 124 | 125 } 126 j 127  128 € 129 </p>
<p>130 ‚ 131 ƒ 132 „ 133 g 134 † 135 ‡ 136 j 137 ‰ 138 Š 139 ‹</p>
<p>140 Œ 141  142 Ž 143 g 144  145 ‘ 146 j 147 “ 148 ” 149 •</p>
<p>150 – 151 — 152 ˜ 153 g 154 š 155 › 156 j 157  158 ž 159 Ÿ</p>
<p>160   161 ¡ 162 ¢ 163 g 164 ¤ 165 ¥ 166 j 167 § 168 ¨ 169 ©</p>
<p>170 ª 171 « 172 ¬ 173 g 174 ® 175 ¯ 176 j 177 ± 178 ² 179 ³</p>
<p>180 ´ 181 µ 182 ¶ 183 g 184 ¸ 185 ¹ 186 j 187 » 188 ¼ 189 ½</p>
<p>190 ¾ 191 ¿ 192 À 193 g 194 Â 195 Ã 196 j 197 Å 198 Æ 199 Ç</p>
<p>200 È 201 É 202 Ê 203 Ë 204 Ì 205 Í 206 Î 207 Ï 208 Ð 209 Ñ</p>
<p>210 Ò 211 Ó 212 Ô 213 Ë 214 Ö 215 × 216 Î 217 Ù 218 Ú 219 Û</p>
<p>220 Ü 221 Ý 222 Þ 223 Ë 224 à 225 á 226 Î 227 ã 228 ä 229 å</p>
<p>230 æ 231 ç 232 è 233 Ë 234 ê 235 ë 236 Î 237 í 238 î 239 ï</p>
<p>240 ð 241 ñ 242 ò 243 Ë 244 ô 245 õ 246 Î 247 ÷ 248 ø 249 ù</p>
</body>
</html>
이를 브라우저에서 실행하였을 때 모습입니다. 일부 코드값은 대응하는 문자가 화면에 나타나지 않는 것도 있어요.
다음은 자주 사용하는 특수 문자를 표현하는 escape 표현을 HTML 문서로 작성한 내용이예요.
<!DOCTYPE html>
<html>
<head>
<title> 특수 문자</title>
<meta charset="utf-8" />
</head>
<body>
<p>작다 < 크다></p>
<p>레퍼런스 &</p>
<p>큰 따옴표 "</p>
<p>저작권 표시 ©</p>
<p>무역 상표 ™</p>
<p>등록 상표 ®</p>
<p>원 ₩</p>
</body>
</html>
다음은 이를 브라우저에서 보았을 때의 화면입니다.
앞으로 프로그래밍 관련 글은 새롭게 개설한 언제나 휴일 전용 사이트에서 만나보세요.
2017년 1월 1일까지 이 곳의 프로그래밍 자료는 http://ehpub.co.kr 로 옮길 예정입니다.
'언어 자료구조 알고리즘 > HTML5' 카테고리의 다른 글
| [HTML5] 9. time 태그로 날짜와 시각 정보를 표시하는 습관을 기릅시다. (1) | 2016.05.09 |
|---|---|
| [HTML5] 8. 굵게 표시하는 태그 <strong>은 강조 <b>는 그냥 굵게 (0) | 2016.05.07 |
| [HTML5] 7. mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자. (0) | 2016.05.07 |
| [HTML5] 6. 안전한 구조를 위해 br 태그에 종료를 표시하자. (0) | 2016.05.05 |
| [HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용! (0) | 2016.05.05 |
| [HTML5] 4. 주석으로 가독성을 높이자. (0) | 2016.05.05 |
| [HTML5] 3. 글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정 (0) | 2016.05.04 |
| [HTML5] 2. 간단해진 HTML 문서 형식 선언 <!DOCTYPE html> (0) | 2016.05.04 |
| [HTML5] 1. 첫 번째 만드는 HTML 문서, "Hello, HTML" (0) | 2016.05.04 |
| [HTML5] 이미지 (0) | 2016.04.09 |