티스토리 뷰

무니만 '개발'/Front-End

HTML 파일 한글이 깨지는 경우 (HTML 파일 인코딩 설정)

무늬개발 2018. 5. 13. 17:28

HTML 파일을 직접 작성을 하다보면, 한글이 깨지는 경우가 종종 발생한다. 주로 툴에서는 자동으로 설정을 시켜놓을 수 있는데, 아직 환경 세팅을 하지 않고, 새로운 페이지를 이용하는 경우에는 당황을 할 수 있다. 대부분 인코딩이 잘 못 되어서 발생이다. 


먼저, 현재의 characterSet을 확인해보자.

브라우저 개발자 도구의 console을 통하여 document.characterSet를 확인하면 된다.

아래 예시는 한글이 깨지지 않는 naver.com의 document.characterSet는 UTF-8임을 위의 방법을 통하여 알 수 있다.



인코딩을 설정하는 법은 HTML을 작성 시, <head>에 <meta charset = "" > 키워드를 통하여 명시해주면 된다. <head>는 브라우저에 해당 페이지 정보를 전달하는 부분이며, 이곳에 인코딩을 utf-8로 설정함을 해준다. (다른 인코딩이 필요하다면 charset의 value 값만 변경해 주면 된다.)

  <head>

    <meta charset = "utf-8">

    ... (중략) ...

  </head> 


실제 naver의 html에서 설정된 모습을 확인할 수 있다.


인코딩 방식과 종류를 상세히 알고 싶다면 아래 잘 정리된 사이트를 확인해보면 된다.

- https://www.delmadang.com/community/bbs_view.asp?bbsNo=3&indx=453819

- https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%9E%90_%EC%9D%B8%EC%BD%94%EB%94%A9


저작자표시 비영리 변경금지

'무니만 '개발' > Front-End' 카테고리의 다른 글

HTML과 Markup Language  (0) 2018.05.13
Fast Campus, [입문] 프론트엔드 개발 시작하기 CAMP 온라인 과정 시작  (0) 2018.05.10