웹페이지에 코드 공유하는 방법

간혹 블로그나 웹사이트 글을 보다보면 이미지는 아닌데 코드툴을 잘라놓은 듯한 자료를 본 적 있을 것이다.

나도 처음에는 스크린샷으로 찍어보다가 자료를 참고하는 입장에서는 복붙이 불가능한 스크린샷 자료는 말 그대로 그림의 떡임을 알기에 찾아보았다.

https://colorscripter.com/

Color Scripter

다른 사이트나 툴도 많이 있겠지만 주로 이 사이트의 도움을 받는다.

딱히 원리를 파헤칠 생각은 없지만 이 사이트는 내가 코드를 작성하면 복사했을때 <div> 태그와 <table> 태그를 자동으로 코드에 입혀 클립보드에 저장시켜줘서 블로그나 웹사이트에서도 코드의 가독성을 높여주는 역할을 한다.

 

사용방법은 이렇다

1 셋팅

2 코드 입력

3. 복사

1. 표시된 부분을 조작하여 원하는 스타일을 셋팅한다.

2. 코드를 입력한다.

3. 오른쪽하단의 복사버튼을 눌러 생성된 HTML Dom Element 코드를 복사하여 원하는 위치에 붙여넣는다.