HTML 한글 인코딩 문제
조회수 1974회
안녕하세요
현재 인턴 아르바이트로 HTML+CSS+JSP를 공부해가면서 실무를 하고 있는 학생입니다.
꽤 쉬운 문제인 것 같은데 막혀서 질문 드립니다.
오늘 제가 제작한 아이콘 여럿을 IcoMoon.io라는 사이트에서 하나의 폰트 파일로 만들어서 저희 회사 내부에서만 사용되는 회사 제품(보안/인증 서비스) 테스트 페이지에 적용 시키는 일을 하고 있었습니다.
IcoMoon.io는 아이콘 폰트를 제작해주면서 아이콘 잘 되는지 확인 하라는 목적에서 demo.html도 같이 줍니다.
아이콘의 개수가 꽤 되기 때문에 이 html 파일로 회사 타 개발자분들께서 아이콘을 쉽게 찾게 하려는 목적에서 한글을 몇 자 넣었습니다.
그런데 한글 문구가 "��ü ���� ������"와 같이 깨져서 나옵니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IcoMoon Demo</title>
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo-files/demo.css">
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="bgc1 clearfix">
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> clienticons <small class="fgc1">(Glyphs: 62, Grid Size: Unknown)</small></h1>
</div>
<div class="clearfix mhl ptl">
<!--이 곳에 코드 몇 번부터 몇 번 까지가 무슨 아이콘인지 설명을 적으려 했습니다 -->
<h1 class="mvm mtn fgc1"><span>e900~e90x</span>
<br><span style="font-size: 0.7em"> 자체 제작 아이콘</span></h1>
<!-- -->
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<i class="icon-group">
</i>
<span class="mls"> icon-group</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly="" value="e900" class="unit size1of2">
<!--아래의 value값으로는 기본값으로 네모가 들어가 있어서 ctrl+f로 찾아볼 수 있게 아이콘의 한글 이름을 적으려 했습니다 -->
<input type="text" maxlength="1" readonly="" value="표준" class="unitRight size1of2 talign-right">
<!-- -->
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly="" value="" class="liga unitRight">
</div>
</div>
<!--이후는 아이콘 개수 만큼 코드 내용 반복입니다 -->
</div>
<!--[if gt IE 8]><!-->
<div class="mhl clearfix mbl">
<h1>Font Test Drive</h1>
<label>
Font Size: <input id="fontSize" type="number" class="textbox0 mbm" min="8" value="48">
px
</label>
<input id="testText" type="text" class="phl size1of1 mvl" placeholder="Type some text to test..." value="">
<div id="testDrive" class="icomoon-liga" style="font-size: 48px;"> </div>
</div>
<!--<![endif]-->
<div class="bgc1 clearfix">
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
</div>
<script src="demo-files/demo.js"></script>
</body>
</html>
보시다시피 (제가 넣은 문구가 아니라 원래 있던 문구지만) 헤더에 <meta charset="UTF-8">도 포함이 되어 있고, 제가 해당 html파일을 껐다가 워드패드로 다시 열어봤을 때도 한글 문구가 살아있는데, 왜 웹브라우저에서는 깨져서 나오는지 모르겠습니다.
왜 안되는 걸까요?
오후 1시 26분 추가:
점심 먹고나서 계속 찾아보다가 (링크) 메모장으로 열어서 인코딩 방식을 UTF-8로 저장으로 바꿨더니 되네요...?
... 왜 되는 걸까요?
똑같은 문서에 똑같은 브라우저로 열었는데 저장방식이 달라지면 프로그래밍으로 볼 수 없는 영역에서 무슨 코드가 추가라도 되는건가요?
코드 내용이랑 파일 확장자만 봤을 땐 구분할 수 있는 방법이 아예 없는 건가요?
제가 업무처에서 준 JSP 소스들만 고쳐서 일을 해서 제가 맨땅에서부터 만든 웹사이트가 아직 없는데 원래 그러면 처음 소스 저장을 할 때 이 작업을 해줘야 하는 건가요?
댓글 입력