logo image
메인
기술
HOME
기술

웹페이지에서 글자가 깨져서 나오는 경우

목록
#web #charset #encoding #글자 #깨짐

웹 페이지에서 글자가 깨져서 나오는 경우


체크포인트

  • 알림
    • Encoding, Charset , Character Set 은 같은 의미로 봐도 된다.
  • Web page file 확인
    • .php, .html 의 파일 인코딩을 체크.
      • 텍스트 에디터(or IDE) 등에서 파일의 인코딩이 올바르게 설정되어있는지 확인.
        • 적혀있는 글자가 안 깨지는 상태에서의 인코딩 값을 확인해야한다.
      • 한글의 경우 UTF-8(Unicode 기반) , CP949(MS949), EUC-KR(KSC5601) 정도로 되어있으며, UTF-8과 나머지 2개는 호환이 안된다!!!!
        • CP949는 EUC-KR의 확장형(상위호환)이다.
  • Response header 내용 확인
    • 브라우저의 디버깅 툴의 Network 항목에서 확인할 수 있다.
      • 해당 페이지의 URL 통신 부분을 확인하면 된다.
    • Content-Type: text/html; charset=UTF-8 처럼 보인다.
      • charset=UTF-8 이 부분이 없을 수도 있다.
      • charset=UTF-8 이 부분이 있다면 브라우저는 이 페이지를 지정된 charset 으로 처리한다.
      • web page의 encodig 과 지정된 charset 이 다르면, 글자가 깨인다!
  • Meta tag 확인
    • <meta charset="utf-8">  //html 5 
      <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" /> //html 5 이전
    • Response header 에 charset 내용이 없을 경우 meta tag에 지정된 charset 을 확인하여 쓴다.
    • web page의 encodig 과 지정된 charset 이 다르면, 글자가 깨인다!
    • meta tag는 response header의 선언보다 우선순위가 낮다.
  • 웹 브라우저의 인코딩 확인
    • 브라우저에서 인코딩을 임의로 설정한 경우 그 설정 값으로 페이지가 보이게 된다.
      • 보통은 자동으로 되어있으며, 자동으로 인코딩을 처리한다. 
      • 자동으로 해서도 깨진다면, response header나 meta tag를 설정하라.
    • 즉, web page의 encodig 과 브라우저에 지정된 인코딩이 다르면 글자가 깨진다.
    • 우선순위 낮음
  • DBMS의 charset 확인
    • DBMS는 기본적으로 하나의 charset을 가진다.
      • 특이한 경우로 MySQL은 DBMS, DATABASE, TABLE, COLUMN 각각에 charset 을 가질 수 있다.
    • DB Client는 DBMS의 charset 과 같아야한다!
      • 아니면 깨진다.(or 깨질 수 있다. 이상 동작 할 수도 있다.)
      • DB client는 PHP같은 프로그램 언어가 될 수도 있고, SQLyog 같은 DB 관리 프로그램일 수도 있다.
        • 즉, DBMS에 접속하는 것을 의미
    • web page의 encodig 과 DBMS의 charset 이 다르면, 글자가 깨인다!
      • Response header charset 과 DBMS의 charset 이 다르면, 글자가 깨인다!
      • Meta tag charset 과 DBMS의 charset 이 다르면, 글자가 깨인다!
      • 브라우저의 인코딩 과 DBMS의 charset 이 다르면, 글자가 깨인다!
  • Font(글꼴) 지원 확인
    • Font의 체크 우선순위가 가능 낮다!
      • 보통은 unicode 기준으로 되어있으며, 대부분의 "글자"는 보이인다.
    • Font의 버전에 따라 지원 글자의 수가 달라 안보이는 글자가 있을 수 있다.
      • emoji, 한자(한중일 별 특이 한자) 등에 지원이 다를 수 있다.
    • HTML은 사용 할 Font가 지정이 가능하며, 그 Font에서 지원 안하는 경우를 위해 대체 Font도 지정이 가능하다.
    • 입력 charset 이 unocde가 아니라도 내부에서 자동으로 unicode 기준으로 변경되어 보여지므로 charset과는 큰 관련이 없다.

요약

  • Web page file 의 encoding 확인
  • Response header 의 Content-Type: text/html; charset=UTF-8  확인
    • Meta tag의 charset="utf-8" 확인
    • 웹 브라우저의 인코딩 확인
  • DBMS의 charset 확인
위 목록에 모든 설정이 같은 값을 가져야 내용이 올바르게 보인다.

목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
tag
제목 작성자 날짜
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
#기본형
공대여자
유용한 리눅스(LINUX) 명령어
#linux #command
공대여자
[공지] 기술 게시판
#etc #공지
mins01
ui_FilePreview 2
#ui #preview #file
공대여자
[펌] [단독] 카셰어링 회사 쏘카의 퇴사율이 70%를 넘어선 이유 1
#쏘카 #퇴사율
공대여자
구글 어날리틱스 코드
#google #analytics
공대여자
유튜브 저작권 없는 음악 및 효과음. 오디오 라이브러리 2
#유튜브 #저작권 #없는 #음악 #및 #효과음 #오디오 #라이브러리
공대여자
행정안전부에서 제공하는 도로명검색 API 1
#도로명 #주소 #api
공대여자
하이퍼레저 패브릭 3
#하이퍼레저 #패브릭 #블록체인
공대여자
ui_AppearBox 2
#ui #appearbox
공대여자
js TimerChain 2
#javascript #settimeout #timer
공대여자
https://github.com/daneden/animate.css 2
#animate #css
공대여자
Uncaught TypeError: document.querySelectorAll(...).map is not a function
#javascript #not #a #function #map
공대여자
css transform: perspective(320px) rotateX(52deg); 1
#transform #perspective #rotatex
공대여자
game tetris 5
#game #tetris
공대여자
웹페이지에서 글자가 깨져서 나오는 경우
#web #charset #encoding #글자 #깨짐
공대여자
grlf grlg grid-layout-flex grid-layout-grid grid-layout-float 1
#grid #layout #flex #css #float
공대여자
Transistor 게임 무료 배포 2019-05-02 까지. 1
#free #game #epic #transistor
공대여자
tag