웹페이지가 코드로만 가득 나타날 때 해결 방법 feat. index.html 텍스트 편집기 설정 확인하기.

텍스트 편집기의 설정 경로는 다음과 같습니다.
텍스트 편집기를 실행한 후 나타나는 상단 메뉴 텍스트 편집기 -> 설정.

웹페이지 화면이 코드로 가득한 것이 아니라, 예쁜 웹페이지 모습으로 잘 나타나려면, 위의 설정처럼 되어 있어야 합니다.
새로운 문서 탭에서는 포맷이 반드시 일반 텍스트에 선택이 되어져 있어야 하고 리치 텍스트에 되어 있어선 안 됩니다. 

열기 및 저장하기 탭에서는 반드시  HTML 파일을 서식 있는 텍스트가 아닌  HTML 코드로 표시에 체크해야 합니다.
그리고 반드시, 일반 텍스트 파일에 '.txt' 확장자 추가 부분에는 체크를 하면 안 됩니다! 

위처럼 설정을 그대로 하면, 깃허브 같은데에 코드를 올리고 배포를 하면 웹페이지가 잘 나타나게 됩니다. 

저렇게 수정하기 전에는 저의 index.html 텍스트 편집기의 설정은 리치 텍스트에 선택이 되어 있고,  .txt 확장자 추가에도 체크가 되어져 있었는데, 그랬더니 깃허브에 코드를 올리고 배포를 했을 때 웹페이지 화면이 온통 코드로 가득하게만 나왔었습니다.

다행이 텍스트 편집기를 수정해서 해결했습니다.

그런데 신기한 점은, 텍스트 편집기를 수정하기 전에도 (!) JSFiddle(https://jsfiddle.net/ 피들)에서는 코드를 붙여 넣고 실행을 하면 예쁜 웹페이지가 잘 나타났다는 점입니다. 그 화면 상에서는요! 하지만 그것도 다운로드 한 뒤 로컬에서 열면, 여전히 웹페이지가 코드로 뒤덮이는 문제가 있었습니다.