목표: charset은 왜 쓰는거죠?
요약
- 인코딩(Encoding)과 관련있음
안녕하세요 냥장판 입니다
HTML문을 살펴보면 상단에 아래와 같은 구문이 작성된 걸
아주 얼핏 보셨을거에요
그냥 무심코 지나쳤던 charset 의 소중함을 알려드릴게요!
1. 인코딩(Encoding)과 관련있음
인코딩은 내가 작성한 구문을 컴퓨터가 해석할 수 있게 변환 해주는거에요.
자세한 설명은 아래를 참고하시고요.
2019/11/28 - [놀고있네/i18n] - [Characters] 글자가 깨져요
[Characters] 글자가 깨져요
목표: 글자가 깨지는 이유를 알아보자 요약 문제는 인코딩(encoding) 표준화된 인코딩 방법: Unicode 웹서핑 또는 문서를 열었을 때, 외계 문자를 본적 있을 것이다. 갑자기 컴터가 암에 걸린건가 싶고 바이러스..
miaow-miaow.tistory.com
HTML문도 마찬가지에요
내가 작성한 HTML문서를 웹 브라우저에서 실행하잖아요?
이 웹 브라우저가 내가 작성한걸 해석할 수 있도록
인코딩을 사용해서 변환 하는거에요!
그동안 HTML을 웹에서 실행할 때 문제가 없었는데요??
문제를 발견하지 못한 이유는
어떤 웹 브라우저를 사용했냐에 따라 달라요!!
브라우저(Chrome, Edge, Firefox)별로 charset을 설정하지 않았을 때 출력되는 화면이에요
그래서 charset이 없었는데
크롬에서만 HTML을 실행했다면
문제를 파악하지 못 할 수도 있어요!
브라우저마다 기본으로 제공하는 인코딩 방식, 폰트 등이 다르거든요
style="display:inline-block;width:740px;height:200px"
data-ad-client="ca-pub-9512983930357661"
data-ad-slot="5785466884">
2. 차이를 보고싶어요
우선 아래와 같은 HTML을 작성했어요.
<!DOCTYPE html>
<html>
<head>
<title>Character set witout charset</title>
</head>
<body>
<h2>Character Sets without charset</h2>
<p>Can you see these Turkish?</p>
<ol>
<li>bir</li>
<li>iki</li>
<li>üç</li>
<li>dört</li>
<li>beş</li>
</ol>
<p><a href="Testcharset_utf8.html">UTF-8 이 적용된 페이지로 가기</a></p>
<p><a href="Testcharset_euc-kr.html">EUC-KR 이 적용된 페이지로 가기</a></p>
</body>
</html>
중간에 리스트로 작성된 건 터키언어에서 사용하는 알파벳입니다.
각 브라우저에서 실행했을 때
UTF-8이 적용된 페이지로 가보죠
<!DOCTYPE html>
<html>
<head>
<title>Character set with charset</title>
<meta charset="UTF-8">
</head>
<body>
<h2>Character Sets with UTF-8</h2>
<p>You can use UTF-8 to count in Turkish:</p>
<ol>
<li>bir</li>
<li>iki</li>
<li>üç</li>
<li>dört</li>
<li>beş</li>
</ol>
</body>
</html>
안 깨지고 잘 나오는것을 확인할 수 있어요.
그럼 EUC-KR로 했을 때!
이건 한국에서 한 때 사용했던 인코딩 방법인데
지금은 거의 안쓰고 있어요. 쓰지마세요!!
<!DOCTYPE html>
<html>
<head>
<title>Character set with charset</title>
<meta charset="EUC-KR">
</head>
<body>
<h2>Character Sets with EUC-KR</h2>
<p>You don't use EUC-KR to count in Turkish:</p>
<ol>
<li>bir</li>
<li>iki</li>
<li>üç</li>
<li>dört</li>
<li>beş</li>
</ol>
</body>
</html>
무참히 깨집니다
charset을 사용할 때는 무조건 UTF-8로 사용해주세요
그래야지 글자가 안깨져요.
그럼 이만!
data-ad-client="ca-pub-9512983930357661"
data-ad-slot="6440073001"
data-ad-format="auto"
data-full-width-responsive="true">
'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글
| [CSS] CSS를 사용하는 이유 (6) | 2020.01.20 |
|---|---|
| [HTML] display 요소(p, div, span)의 차이점 (6) | 2020.01.17 |
| [HTML] Link 태그 사용하기 - 새창에서 페이지 열기 (10) | 2020.01.15 |
| [HTML, Chrome] 크롬에서 HTML 작업하기 - 개발자도구 (6) | 2020.01.14 |
| [HTML] Link 태그 사용하기 - 맨위로 이동 (7) | 2020.01.11 |
댓글