read : 웹페이지에서 글자가 깨져서 나오는 경우 : 기술 #web #charset #encoding #글자 #깨짐::공대여자홈

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

목록

작성자 공대여자

작성 : 2019-04-29 09:43 조회 : 1242
지남 1일간

2019-04-29 - 2019-04-29

좌표
첨부된 파일이 없습니다.

#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}}

내용이 너무 많습니다!

-

No	제목	작성자	날짜	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js) #기본형	공대여자	24-02-0602-06	16501
공지	유용한 리눅스(LINUX) 명령어 #linux #command	공대여자	11-03-0303-03	26901
공지	[공지] 기술 게시판 #etc #공지	mins01	05-06-2406-24	26750
19	enable3d 1 #web #3d	공대여자	24-06-1206-12	787
18	Web components 1 #web #components	공대여자	23-04-2104-21	585
17	web api Encoding API 1 #web #api #encoding	공대여자	23-04-2004-20	643
16	web worker multi CPU 100% test 2 #web #worker	공대여자	22-08-2508-25	512
15	URL 통합 진단 클리닉. 웹 사이트의 취약점을 체크해주는 툴 1 #web #validator	공대여자	22-08-1208-12	548
14	web screenshot Capture 1 #web #screenshot #capture	공대여자	22-05-1905-19	604
13	web music keyboard , 피아노, piano , 키보드 4 3 #web #music #keyboard #audio	공대여자	21-05-1905-19	602
12	아파치 성능향상 (아파치 2.x) 1 #아파치 #apache #web #server	공대여자	20-07-2907-29	637
11	웹페이지에서 글자가 깨져서 나오는 경우 #web #charset #encoding #글자 #깨짐	공대여자	19-04-2904-29	1243
10	sliding puzzle web game 3 2 #sliding #puzzle #game #web	공대여자	19-04-1804-18	683
9	시맨틱 웹 Semantic Web 에 맞춰서 글 적기 #시맨틱 #웹 #semantic #web	공대여자	19-03-0803-08	667
8	ui_toDraggable 이동 이벤트 제어 2 #javascript #move_scrip #ui #web	공대여자	18-12-1112-11	677
7	ui_MultipleInputBox 2 #input #ui #umltiple #web	공대여자	18-12-0612-06	643
6	websafe fonts , 폰트 정보 1 1 #css #font #safe #web	공대여자	18-12-0512-05	1044
5	UI SelectArea 2 #selectarea #ui #web	공대여자	18-11-1211-12	601