[ Codepen ] Html 공유하기 / 블로그에 소스 올리기

코드팬을 사용 할때 또하나의 좋은 기능이 있습니다.

깜박하고 공유를 못해드렸는데 

https://codepen.io/sheldhe/pen/JBKxEZ

내가 작성한 글을 다른사람도, 링크를 클릭하여  들어가지않고 보게 하는 방법이 있습니다.  

공유하는 방법은 Iframe을 사용하거나, HTML소스를 받거나, 등등 방법이 있어요.

저기있는 코드팬의 결과값 / HTML/CSS/Js 소스를 보여줄거에요. 

위에 코드펜이 뭐지하시면 하단에 글 참조하세요.

2018/07/18 - [사이트 & 프로그램 추천] - codepen 사용

하는 방법은, 제가 만든 Pen을 예시로 설명을 드리겠습니다. 다시 여기 링크로 들어가보세요.

캡쳐한 화면처럼 나올거에요. 여기에서 우측하단에 Embed 라는 버튼이 있어요.

이버튼 누르면 ..

이러한 화면이 나옵니다.

여기에서 중간에 글자로 drag to resize 라는 문구가 있습니다.  이것을 아래로 잡아댕기면 높이값을 포착해서 하단에 Copy & Paste Code가 변합니다. 이제 끝났습니다. 하단에 Ifram 인지  HTML 인지 버튼으 누르면  자동으로 소스가 바뀌어요. 

마지막으로 소스를 복사하세요. 소스는 html태그로 되어있어서 사용하려는 곳에 복사해서 사용 하시면 됩니다.

마지막은 이미지라고 착각 할 수도 있어서. 이미지 색을 바꾸고 공유했습니다.

소스하고 Result도 볼수 있어서 편해요.