블로그에 html 소스코드 붙여넣기(codepen)

오늘은 블로그에 코드를 간단히 올릴 수 있는 방법을 알아보겠습니다. 제가 미리 샘플로 만들어놓은 코드를 이곳에 가져와 보도록 하겠습니다.

https://codepen.io/ecoding/pen/MWYRBry

grid test

오른쪽 하단에 있는 Embed 누르면 아래와 같은 창이 나타납니다.

 

오른쪽 하단에 html 탭에 있는 소스 코드를 복사해서 필요한 곳에 붙여넣기 하시면 됩니다. 추가로 왼쪽 상단에 있는 theme를 변경하면 배경 스타일을 흰색 또는 검정색으로 변경할 수 있습니다.

html을 누른다.

기본모드를 html 방식으로 바꿔주고 원하는 부분에 복사해둔 소스 코드를 붙여넣기 합니다.

 

완성되었습니다. 오른쪽에 마우스를 올려보세요!

See the Pen grid test by ecoding (@ecoding) on CodePen.

생각보다 유용해서 앞으로 코드 리뷰를 할 때 자주 애용할 생각입니다.