본문 바로가기
간판없는 컴퓨터 교습소/HTML&CSS

드림위버에서 저장한 HTML 파일 한글이 깨질 때 해결법

by 쿠쿠리아가씨 2014. 3. 8.
드림위버에서 저장한 HTML 파일 한글이 깨질 때 해결법


웹개발에 대해서 처음 공부하시는 분들에게 가장 어려운 점은 잘못되었을 때

무엇이 잘못되었는지 모른다는 것이죠.

포털사이트를 검색해서 찾아보려고 해도 뭐가 그렇게 어려운 말들이 많은지 알아보기도 힘들구요.

그래서 쿠쿠리는! 늘 언제나 초보의 입장에서 초보의 눈높이에서 설명해드리려고 합니다.

왜냐 저도 초보니까요 ㅋㅋㅋ 제가 겪었던 시행착오를 여러분은 겪지 말라는 의미에서!!


자 오늘 이번에 알아볼 내용은 드림위버에서 저장한 HTML 파일을 인터넷으로 불러왔을 때!

한글이 이상하게 깨지는 현상을 해결하는 방법에 대해서 알아보도록 하겠습니다.





드림위버로 실컷 작업을 하고 야심차게 HTML 파일로 저장을 하고!

인터넷에서 딱 열었는데 이렇게 한글이 이상하게 다 깨져서 나와버리면.. oh my god.... 멘붕

갑자기 김이 팍 빠지면서 의욕을 잃게되죠 도대체 뭐가 문제인지를 모르니 해결 할 수도 없습니다!

하지만 생각보다 간단한 해결방법이 있답니다.


이를 해결 할 수 있는 두가지 방법이 있는데요.

첫번째로 알려드릴 방법은 근본적인 문제는 해결 할 수 없지만 해당 파일을 잠깐 확인만 할 때!

사용 할 수 있는 방법입니다. 아주 간단합니다. 일단 파일을 인터넷에서 불러와주세요.

그러면 위에 있는 화면처럼 한글이 다 깨져서 뜨겠죠?




인터넷 화면에서 보기 - 인코딩 메뉴로 들어가줍니다.

자동선택으로 설정되어 있어 한국어 밖에 기본선택이 안되도록 되어 있네요.

아래에 자세히에 마우스를 가져다 대면 오른쪽에 위의 화면과 같이 다양한 언어를 선택 할 수 있는 화면이 뜹니다.

화살표를 아래로 쭉쭉쭉 내리면 유니코드(UTF-8)이 보이시죠? 선택해주시면 됩니다.


여기까지만 딱! 해주시면 정상적으로 한글이 표기가 되실껍니다.

하지만!!! 이 방법을 사용하시면 1회적으로 해당파일을 열었을 때 한글이 보일수는 있겠지만

다시 그 파일을 열게 되었을 때 열때마다!!! 이 작업을 반복해주어야 한다는 문제가 있습니다. 

근본적인 해결이 되지 않는것이죠.


그렇다면!! 드림위버에서 만든 HTML 파일을 유니코드로 자동 저장되게 해봅시다!

드림위버를 켜시고 새 파일 만들기를 눌러보세요.





누르시면 위와 같은 화면이 뜨죠? 저는 드림위버 CS4를 사용중입니다.

아래에 있는 Preferences 메뉴를 눌러주세요.





그러면 위 캡쳐화면처럼 저런 화면이 뜨실텐데요.

제가 빨간박스 쳐놓은 부분 보이시죠? 저와 똑같이 설정해주세요.

다 하셔쓰면 OK 버튼을 눌러서 빠져 나오시면 됩니다.





자 이제 Create 버튼을 눌러서 새 파일을 열어보도록 하겠습니다.





파일을 열면 자동으로 html 태그부터 head, tilte, body 태그까지 입력된 소스 화면이 열립니다.

잘 보시면 제가 파란색으로 선택해놓은 부분에 utf-8이라고 표기되어 있죠?





html 태그에 달린 이런저런 주소링크들은 아무짝에 쓸모 없으니 다 지워주시고 

위의 화면과 같이 깔끔하게 정리를 해주시면 됩니다. 





파일을 다 만들고 이제 저장하기를 눌러보도록 하겠습니다.

예전과 달라진 게 있다면 제가 빨간박스 쳐놓은 곳을 보세요.


아까 Preferences 화면에서 설정했던 거 기억하시죠? 포맷이 바뀌어 있습니다.

따로 형식이나 이런거 설정하실 필요 없이 바로 저장해주시면 됩니다.

자! 그럼 이제 제대로 뜨는지 확인해볼까요?





짠! 이제 정상적으로 뜹니다.

보기 - 인코딩으로 들어가서 일일이 수정해줄 필요도 없이 그냥 알아서 한글로 잘 읽어오네요.


사실 이걸 모르면 매번 켤때마다 수정하고 ~ 나중에 실컷 만들었는데 다 깨지면 진짜 멘붕이잖아요.

이렇게 미리 설정을 해두시면 나중에 곤란해지지 않고 좋겠죠?

물론! 잘 아시는 분들은 이런 실수를 안하시겠지만 저 같은 초보들은 이런 실수를 하고도 남을꺼에요.

드림위버가 뭔지 html이 뭔지 제대로 모른다면 실 수 할 수 있는 부분이라고 생각해요.


아무튼! 소소한 정보지만 도움이 되시길 바라며 다음 강좌에서는 더 좋은 내용으로 찾아오겠습니다.