[HTML5] 10. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 특수 문자

안녕하세요. 언제나 휴일, 언휴예요.

HTML에서는 < 와 >는 태그를 표현할 때 사용하죠. 그러면 실제 화면에 < 나 >를 표현하려면 어떻게 해야 할까요?

HTML 문서에 표현하기 위해 약속한 복잡한 표현을 사용해야 하는 특수 문자들이 있어요. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 문자일 수 있죠. 하지만 이러한 특수 문자를 암기하지는 않더라도 필요할 때 찾아서 쓸 수는 있어야 겠죠.

먼저 &#00;나 &#07; 처럼 표현하면 특수 문자를 확인할 수 있어요. 이는 약속한 코드값으로 문자를 확인하는 것이예요. 이를 HTML 문서 작성에 사용하면 코드값에 따른 문자를 확인할 수 있겠죠.

다음은 코드 00에서 코드 249까지 문자를 확인하기 위한 HTML 문서의 내용입니다.

<!DOCTYPE html>
<html>
<head>
    <title> 특수 문자</title>
    <meta charset="utf-8" />
</head>
<body>
    <p>00 &#00; 01 &#01; 02 &#02; 03 &#03; 04 &#04; 05 &#05; 06 &#06; 07 &#07; 08 &#08; 09 &#09;</p>
    <p>10 &#10; 11 &#11; 12 &#12; 13 &#13; 14 &#14; 15 &#15; 16 &#16; 17 &#17; 18 &#08; 19 &#19;</p>
    <p>20 &#20; 21 &#21; 22 &#22; 23 &#23; 24 &#24; 25 &#25; 26 &#26; 27 &#27; 28 &#08; 29 &#29;</p>
    <p>30 &#30; 31 &#31; 32 &#32; 33 &#33; 34 &#34; 35 &#35; 36 &#36; 37 &#37; 38 &#08; 39 &#39;</p>
    <p>40 &#40; 41 &#41; 42 &#42; 43 &#43; 44 &#44; 45 &#45; 46 &#46; 47 &#47; 48 &#08; 49 &#49;</p>
    <p>50 &#50; 51 &#51; 52 &#52; 53 &#53; 54 &#54; 55 &#55; 56 &#56; 57 &#57; 58 &#08; 59 &#59;</p>
    <p>60 &#60; 61 &#61; 62 &#62; 63 &#63; 64 &#64; 65 &#65; 66 &#66; 67 &#67; 68 &#08; 69 &#69;</p>
    <p>70 &#70; 71 &#71; 72 &#72; 73 &#73; 74 &#74; 75 &#75; 76 &#76; 77 &#77; 78 &#08; 79 &#79;</p>
    <p>80 &#80; 81 &#81; 82 &#82; 83 &#83; 84 &#84; 85 &#85; 86 &#86; 87 &#87; 88 &#08; 89 &#89;</p>
    <p>90 &#90; 91 &#91; 92 &#92; 93 &#93; 94 &#94; 95 &#95; 96 &#96; 97 &#97; 98 &#08; 99 &#99;</p>

    <p>100 &#100; 101 &#101; 102 &#102; 103 &#103; 104 &#104; 105 &#105; 106 &#106; 107 &#107; 108 &#108; 109 &#109;</p>
    <p>110 &#110; 111 &#111; 112 &#112; 113 &#103; 114 &#114; 115 &#115; 116 &#106; 117 &#117; 118 &#118; 119 &#119;</p>
    <p>120 &#120; 121 &#121; 122 &#122; 123 &#103; 124 &#124; 125 &#125; 126 &#106; 127 &#127; 128 &#128; 129 &#129;</p>
    <p>130 &#130; 131 &#131; 132 &#132; 133 &#103; 134 &#134; 135 &#135; 136 &#106; 137 &#137; 138 &#138; 139 &#139;</p>
    <p>140 &#140; 141 &#141; 142 &#142; 143 &#103; 144 &#144; 145 &#145; 146 &#106; 147 &#147; 148 &#148; 149 &#149;</p>
    <p>150 &#150; 151 &#151; 152 &#152; 153 &#103; 154 &#154; 155 &#155; 156 &#106; 157 &#157; 158 &#158; 159 &#159;</p>
    <p>160 &#160; 161 &#161; 162 &#162; 163 &#103; 164 &#164; 165 &#165; 166 &#106; 167 &#167; 168 &#168; 169 &#169;</p>
    <p>170 &#170; 171 &#171; 172 &#172; 173 &#103; 174 &#174; 175 &#175; 176 &#106; 177 &#177; 178 &#178; 179 &#179;</p>
    <p>180 &#180; 181 &#181; 182 &#182; 183 &#103; 184 &#184; 185 &#185; 186 &#106; 187 &#187; 188 &#188; 189 &#189;</p>
    <p>190 &#190; 191 &#191; 192 &#192; 193 &#103; 194 &#194; 195 &#195; 196 &#106; 197 &#197; 198 &#198; 199 &#199;</p>

    <p>200 &#200; 201 &#201; 202 &#202; 203 &#203; 204 &#204; 205 &#205; 206 &#206; 207 &#207; 208 &#208; 209 &#209;</p>
    <p>210 &#210; 211 &#211; 212 &#212; 213 &#203; 214 &#214; 215 &#215; 216 &#206; 217 &#217; 218 &#218; 219 &#219;</p>
    <p>220 &#220; 221 &#221; 222 &#222; 223 &#203; 224 &#224; 225 &#225; 226 &#206; 227 &#227; 228 &#228; 229 &#229;</p>
    <p>230 &#230; 231 &#231; 232 &#232; 233 &#203; 234 &#234; 235 &#235; 236 &#206; 237 &#237; 238 &#238; 239 &#239;</p>
    <p>240 &#240; 241 &#241; 242 &#242; 243 &#203; 244 &#244; 245 &#245; 246 &#206; 247 &#247; 248 &#248; 249 &#249;</p>
</body>
</html>

이를 브라우저에서 실행하였을 때 모습입니다. 일부 코드값은 대응하는 문자가 화면에 나타나지 않는 것도 있어요.

웹 브라우저 화면

다음은 자주 사용하는 특수 문자를 표현하는 escape 표현을 HTML 문서로 작성한 내용이예요.

<!DOCTYPE html>
<html>
<head>
    <title> 특수 문자</title>
    <meta charset="utf-8" />
</head>
<body>
    <p>작다 &lt;  크다&gt;</p>
    <p>레퍼런스 &amp;</p>
    <p>큰 따옴표 &quot;</p>
    <p>저작권 표시 &copy;</p>
    <p>무역 상표 &trade;</p>
    <p>등록 상표 &reg;</p>
    <p>원 &#8361;</p>    
</body>
</html>
웹 브라우저 화면