한글깨짐현상 질문입니다.
본문
CSS 드롭다운메뉴 를 가져와 적용해보니 한글이 깨지네요
어디를 수정해야하나요
http://poseidonscuba.co.kr/menu3.php
<!doctype html>
<html lang='ko'>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>메뉴</title>
<style>
body {
font-family: "Malgun Gothic";
margin: 0px;
padding: 50px;
background: #ffffff;
}
.menu {
position: relative;
height: 44px;
background: #2b2f3a;
width: auto;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
font-family: Malgun Gothic, sans-serif;
}
.menu > ul {
position: relative;
display: block;
text-align:center;
background: #2b2f3a;
width: 100%;
z-index: 500;
}
.menu:after, .menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.menu.align-right > ul > li {
float: right;
}
.menu.align-center ul {
text-align: center;
}
.menu.align-center ul ul {
text-align: left;
}
.menu > ul > li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
.menu > ul > #menu-button {
display: none;
}
.menu ul li a {
display: block;
font-family: Malgun Gothic, sans-serif;
text-decoration: none;
}
.menu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
.menu > ul > li.sub > a {
padding-right: 32px;
}
.menu > ul > li:hover > a {
color: #ffffff;
}
.menu li.sub::after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
}
.menu > ul > li.sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
.menu > ul > li:hover::after {
border-top-color: #ffffff;
}
.menu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
.menu ul ul ul {
top: 37px;
padding-left: 5px;
}
.menu ul ul li {
position: relative;
}
.menu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
.menu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
opacity: 1;
}
.menu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
.menu.align-right ul ul li:hover > ul {
left: auto;
right: 170px;
top: 0;
opacity: 1;
padding-right: 5px;
}
.menu ul ul li a {
width: 130px;
border-bottom: 1px solid #eeeeee;
padding: 10px 20px;
font-size: 12px;
color: #9ea2a5;
background: #ffffff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.menu.align-right ul ul li a {
text-align: right;
}
.menu ul ul li:hover > a {
background: #f2f2f2;
color: #8c9195;
}
.menu ul ul li:last-child > a, .menu ul ul li.last > a {
border-bottom: 0;
}
.menu > ul > li > ul::after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #ffffff;
position: absolute;
top: -12px;
left: 30px;
}
.menu.align-right > ul > li > ul::after {
left: auto;
right: 30px;
}
.menu ul ul li.sub::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
.menu.align-right ul ul li.sub::after {
border-left-color: transparent;
border-right-color: #9ea2a5;
right: auto;
left: 10px;
}
.menu ul ul li.sub:hover::after {
border-left-color: #ffffff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.menu.align-right ul ul li.sub:hover::after {
border-right-color: #ffffff;
border-left-color: transparent;
left: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class='menu'>
<ul>
<li>
<a href='#'>홈</a>
</li>
<li>
<a href='#'>About Us</a>
</li>
<li class='active sub'>
<a href='#'>Tutorials</a>
<ul>
<li class='sub'>
<a href='#'>HTML</a>
<ul>
<li>
<a href='#'>HTML Basic</a>
</li>
<li class='last'>
<a href='#'>HTML Advanced</a>
</li>
</ul>
</li>
<li class='sub'>
<a href='#'>CSS Tutorials</a>
<ul>
<li>
<a href='#'>CSS Basic</a>
</li>
<li class='last'>
<a href='#'>CSS Advanced</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Demos</a>
</li>
<li class='last'>
<a href='#'>Downloads</a>
</li>
</ul>
</div>
답변 8
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
에서 content=\"text/html; charset=utf-8\" 를
content=\"text/html;\" charset=\"utf-8\"
으로 변경하십시오
content 와 charset 은 대등한 속성입니다. 종속적으로 표현하면 안됩니다.
파일을 저장할때 utf-8로 저장했는지 확인하시고
상단에
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
를
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
이렇게 고쳐보세요
여기에 올리신 소스를 그대로 복사해서 붙여넣기 해보세요
원본파일을 별도로 보관한 후
1. 에디터를 이용하여 파일 저장 시 utf8로 저장 후 업로드하여 보십시오~
2. 또는 redutf8.exe 등의 프로그램을 이용하여 UTF-8로 Encoding을 하여 업로드하여 보시기 바랍니다.
그래도 수정이 안되네요
소스그데로 html로 저장해서 내컴퓨터에서는 정상으로 보이는데
ftp업로드후 보면 한글이 깨집니다.
웹호스팅은 확실히 utf8이구요
이상하네요
많은 답변 감사합니다.
결국 해결하지 못하고 원래 테마 메뉴를 사용합니다
notepad++ 에서 "인코딩" - "utf-8 로 변환" 후 업로드 해보시기를.
그리고 html 부분에서는 \를 빼고 쓰십시오.