티스토리 블로그에 codepen 적용 시키기
※codepen이란?
HTML,CSS,JavaScript 등의 코드를 웹상에서 편집하고 실행시켜볼 수 있는 사이트로, 간단한 코드를 확인해보기에 유용하다.
티스토리 블로그 글을 작성하다보면 웹코딩에 관한 게시글을 작성할땐 코드블럭을 이용하면 직관성이 떨어진다는 느낌을 받을 수 있다. 그럴때 codepen을 사용한다면 작성자도 방문자도 보다 편하게 코드를 확인해볼 수 있다.
1. codepen 접속 후 회원가입
2. Pen에서 코드 작성
처음 계정을 생성했다면 바로 코드를 작성할 수 있는 Pen 화면으로 이동할 것이다. 만약 페이지가 나가졌거나 Pen 화면이 뜨지 않는다면 좌측 상단의 'Pen ' 클릭 후 'Pen' 버튼을 클릭하면 된다.
위 사진은 작성자가 기존에 써둔 Pen 화면이다.
3. 좌측 하단 Embed 클릭
좌측하단의 Embed 버튼을 클릭하면 위와 같은 팝업창이 생성된다. 좌측 Theme에서 배경색을 생성해준 뒤(본인은 Dark로 했지만 개인 취향차이다), Copy Code 버튼을 눌러 HTML 코드를 복사한다.
4. TISTORY 글쓰기에 있는 "HTML 블럭"에 복사한 Pen 코드 붙여넣기
See the Pen Up Down 게임 by coing-ye (@coing-ye) on CodePen.
HTML블럭에 복사한 Pen 코드를 붙여넣으면 완성이다! 다만 이때 미리보기를 할 수가 없기 때문에 불필요한 수정을 줄이려면 한번에 잘 확인하여 작성하여야 한다.
5. 주의할 점
Pen 코드는 하나의 Pen 마다 따로 작성하여야한다. 여러개의 Pen 페이지를 만들기 귀찮다고 한 페이지에서 여러 코드들을 생성해서 붙여넣었다간, 티스토리에 삽입한 HTML블럭이 모두 같은 내용으로 바뀐다. 그러니 귀찮더라도 삽입할 HTML블럭 하나당 새 Pen 페이지를 생성하여 작성하자.