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}}
    -
목록형 📅 달력형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
enable3d
1
#web #3d
Web components
1
#web #components
web api Encoding API
1
#web #api #encoding
web worker multi CPU 100% test
2
#web #worker
URL 통합 진단 클리닉. 웹 사이트의 취약점을 체크해주는 툴
1
#web #validator
web screenshot Capture
1
#web #screenshot #capture
web music keyboard , 피아노, piano , 키보드
4 3
#web #music #keyboard #audio
아파치 성능향상 (아파치 2.x)
1
#아파치 #apache #web #server
웹페이지에서 글자가 깨져서 나오는 경우
#web #charset #encoding #글자 #깨짐
sliding puzzle web game
3 2
#sliding #puzzle #game #web
시맨틱 웹 Semantic Web 에 맞춰서 글 적기
#시맨틱 #웹 #semantic #web
ui_toDraggable 이동 이벤트 제어
2
#javascript #move_scrip #ui #web
ui_MultipleInputBox
2
#input #ui #umltiple #web
websafe fonts , 폰트 정보
1 1
#css #font #safe #web
UI SelectArea
2
#selectarea #ui #web
tag