웹개발에 대해서 처음 공부하시는 분들에게 가장 어려운 점은 잘못되었을 때
무엇이 잘못되었는지 모른다는 것이죠.
포털사이트를 검색해서 찾아보려고 해도 뭐가 그렇게 어려운 말들이 많은지 알아보기도 힘들구요.
그래서 쿠쿠리는! 늘 언제나 초보의 입장에서 초보의 눈높이에서 설명해드리려고 합니다.
왜냐 저도 초보니까요 ㅋㅋㅋ 제가 겪었던 시행착오를 여러분은 겪지 말라는 의미에서!!
자 오늘 이번에 알아볼 내용은 드림위버에서 저장한 HTML 파일을 인터넷으로 불러왔을 때!
한글이 이상하게 깨지는 현상을 해결하는 방법에 대해서 알아보도록 하겠습니다.
드림위버로 실컷 작업을 하고 야심차게 HTML 파일로 저장을 하고!
인터넷에서 딱 열었는데 이렇게 한글이 이상하게 다 깨져서 나와버리면.. oh my god.... 멘붕
갑자기 김이 팍 빠지면서 의욕을 잃게되죠 도대체 뭐가 문제인지를 모르니 해결 할 수도 없습니다!
하지만 생각보다 간단한 해결방법이 있답니다.
이를 해결 할 수 있는 두가지 방법이 있는데요.
첫번째로 알려드릴 방법은 근본적인 문제는 해결 할 수 없지만 해당 파일을 잠깐 확인만 할 때!
사용 할 수 있는 방법입니다. 아주 간단합니다. 일단 파일을 인터넷에서 불러와주세요.
그러면 위에 있는 화면처럼 한글이 다 깨져서 뜨겠죠?
인터넷 화면에서 보기 - 인코딩 메뉴로 들어가줍니다.
자동선택으로 설정되어 있어 한국어 밖에 기본선택이 안되도록 되어 있네요.
아래에 자세히에 마우스를 가져다 대면 오른쪽에 위의 화면과 같이 다양한 언어를 선택 할 수 있는 화면이 뜹니다.
화살표를 아래로 쭉쭉쭉 내리면 유니코드(UTF-8)이 보이시죠? 선택해주시면 됩니다.
여기까지만 딱! 해주시면 정상적으로 한글이 표기가 되실껍니다.
하지만!!! 이 방법을 사용하시면 1회적으로 해당파일을 열었을 때 한글이 보일수는 있겠지만
다시 그 파일을 열게 되었을 때 열때마다!!! 이 작업을 반복해주어야 한다는 문제가 있습니다.
근본적인 해결이 되지 않는것이죠.
그렇다면!! 드림위버에서 만든 HTML 파일을 유니코드로 자동 저장되게 해봅시다!
드림위버를 켜시고 새 파일 만들기를 눌러보세요.
누르시면 위와 같은 화면이 뜨죠? 저는 드림위버 CS4를 사용중입니다.
아래에 있는 Preferences 메뉴를 눌러주세요.
그러면 위 캡쳐화면처럼 저런 화면이 뜨실텐데요.
제가 빨간박스 쳐놓은 부분 보이시죠? 저와 똑같이 설정해주세요.
다 하셔쓰면 OK 버튼을 눌러서 빠져 나오시면 됩니다.
자 이제 Create 버튼을 눌러서 새 파일을 열어보도록 하겠습니다.
파일을 열면 자동으로 html 태그부터 head, tilte, body 태그까지 입력된 소스 화면이 열립니다.
잘 보시면 제가 파란색으로 선택해놓은 부분에 utf-8이라고 표기되어 있죠?
html 태그에 달린 이런저런 주소링크들은 아무짝에 쓸모 없으니 다 지워주시고
위의 화면과 같이 깔끔하게 정리를 해주시면 됩니다.
파일을 다 만들고 이제 저장하기를 눌러보도록 하겠습니다.
예전과 달라진 게 있다면 제가 빨간박스 쳐놓은 곳을 보세요.
아까 Preferences 화면에서 설정했던 거 기억하시죠? 포맷이 바뀌어 있습니다.
따로 형식이나 이런거 설정하실 필요 없이 바로 저장해주시면 됩니다.
자! 그럼 이제 제대로 뜨는지 확인해볼까요?
짠! 이제 정상적으로 뜹니다.
보기 - 인코딩으로 들어가서 일일이 수정해줄 필요도 없이 그냥 알아서 한글로 잘 읽어오네요.
사실 이걸 모르면 매번 켤때마다 수정하고 ~ 나중에 실컷 만들었는데 다 깨지면 진짜 멘붕이잖아요.
이렇게 미리 설정을 해두시면 나중에 곤란해지지 않고 좋겠죠?
물론! 잘 아시는 분들은 이런 실수를 안하시겠지만 저 같은 초보들은 이런 실수를 하고도 남을꺼에요.
드림위버가 뭔지 html이 뭔지 제대로 모른다면 실 수 할 수 있는 부분이라고 생각해요.
아무튼! 소소한 정보지만 도움이 되시길 바라며 다음 강좌에서는 더 좋은 내용으로 찾아오겠습니다.
'간판없는 컴퓨터 교습소 > HTML&CSS' 카테고리의 다른 글
페이지 내에서 링크걸어 이동하기 예시 페이지 (0) | 2014.03.27 |
---|---|
HTML 기초강좌 4강, 태그로 목록을 만들어보자 [목록태그 사용법] (0) | 2014.03.12 |
HTML 기초강좌, 기초용어정리 3탄 [강조태그,공백태그,ins태그,인용태그] (0) | 2014.03.11 |
HTML 기초강좌, 기초용어정리 2탄 [제목태그,굵기태그,윗첨자태그,가로줄태그] (0) | 2014.03.09 |
HTML 기초강좌, 기초용어정리 1탄 [body, head, title] (0) | 2014.03.08 |