Strength & Honor

html 에 소스코드 보여주기

---

html 에 소스코드를 보여주는 것은 그리 만만한 작업이 아니다.
앞에서 colorscript.com 이라는 웹사이트를 이용하는 방법을 설명하였는데 이번에는 깃허브에서 제공하는 기능을 설명하고자 한다.

본인의 깃허브에 들어가서 우측상단에 있는 플러스 버튼을 눌러서 "new gist" 를 선택한다.



아래 화면에서 맨위는 html 에 붙여 넣기할 소스코드의 간단한 설명이고 아래는 파일명 과 css 또는 html, js 등의 확장자를 적당히 선택해서 넣어주고 소스코드를 본문에 붙여넣은 후 "Create secret gist" 버튼을 클릭한다.



아래 화면에서 노란색 마크가 된 부분을 클릭 후 웹사이트에서 붙여넣기 하면 된다.



재미있는 것은 colorscript.com 에서 convert 된 소스코드를 보면 html + CSS 코드로 되어 있는데 깃허브에서 제공하는 것은 아래와 같이 딱 한줄의 JavaScript 이다.

내가 처음 공부할 때에는 JavaScript 는 Style 태그로 head 태그와 body 태그 사이에 넣으라고 했는데 이럴때에는 가끔 오류가 난다고 한다.
본문 즉, body 태그에 넣는것이 가장 좋다고 한다.
물론 확장자를 js 로 해서 별도의 파일로 관리하고 link 를 해 주는 것이 더 좋다.

그럼 아래 한줄의 JavaScript 문은 어디에 넣으면 좋을까?
그냥 본문에 즉 본인이 설명하고자 하는 공간에 붙여 넣으면 되겠다.

그럼 앞에서 구글이미지를 html 로 링크를 걸 수 있도록 변환해 주는 소스코드를 깃허브에서 제공하는 gist 기능을 이용해서 JavaScript 로 표현을 해 보면 아래와 같다.

---