10월 06, 2022
html 코드 게시를 위한 gist script 활용 방법
웹페이지 작성이 HTML을 기반으로 하기때문에 설명할 HTML코드를 문서에 작성하면 내부 HTML과 충돌로 말미암아 웹상에 문서가 제대로 출력되지 않는다. 하지만 이 분야의 거목인 github 는 HTML 코드 전용 문서 작성기(gist)로 이문제를 깔끔히 해결하고 있다. gist.github 사이트의 작성기에서 문서처럼 코드를 작성하면 자동으로 스크립트가 만들어지고, 그것을 일반 블로그 웹페이지에 삽입만 하면 깔끔하게 출력되는 최상의 프로그램으로 간주되어 비망록 차원에서 살펴보기로 한다.
github 등록
- 먼저 github에 계정 등록(이메일 인증)을 해야지만 gist.github 등록자 사이트가 생성된다.
- 저장소(폴더)를 만들면 계정 아이디 명칭 아래에 생성된다.
- github 사이트 에서는 HTML 코드를 작성하거나, 기존의 파일(HTML 코드)을 업로드해서 보관하거나 수정 할수 있지만 스크립트는 만들수 없다.
gist사용방법
- 적용 용도에 알 수 있는 간단한 설명(div 가운데 정렬등)
- 파일제목 명시
- html 코드 내용 작성
- 1개의 파일에 다수의 소스코드를 추가할 때 사용
- 공개나 비공개로 저장할 수 있다.
gist 편집기 적응과 숙달
- 계정아이디 디렉토리에 파일이 생성된다. github에서 저장소(repository)를 만들면(여러 개 생성가능)그안에 파일이 저장된다.
- 파일에 관한 간략한 서술
- HTML 코드 내용이며, 4번의 생성된 스크립트를 웹페이지에 삽입하면 꼭 같이 출력된다.
- 소스코드 저장과 동시에 자동으로 생성되는 스크립트이며, 마우스 키 복사와 다운로드의 두 가지 방법이 있고, 다운로드는 파일과 압축파일의 옵션이 주어진다.
- 편의상 코드 작성 페이지 오른쪽 부분을 절단하여 적시한 그림으로, '+'아이콘은 새 파일 작성에 사용되고, 역삼각형 아이콘을 클릭하면 6번과 같은 메뉴가 팝업된다.
- 저장된 파일과 프로파일 수정등의 옵션들이 제공된다.
코드 스크립트 적용 결과
gist 사이트 링크