728x90
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
위에는 CodePen 사이트이다.
위 사이트에 들어가서 회원가입을 한 후
pen을 클릭하면 HTML작성 페이지로 넘어간다.
왼쪽 위를 눌러서 제목을 설정해줘도 되고 안 해줘도 된다.
HTML, CSS, JS를 작성한 후 Save를 누르면 저장이 된다. 그리고 Embed을 누르면 된다.
Embed를 누르면 새창이 하나 뜬다.
아래 새창에서 Light랑 Dark 중에서 선택할 수 있다.
drag to size로 티스토리에 올릴 사이즈 크기를 드래그로 설정해주면 된다.
그리고 Copy & Paste Code에 있는 HTML을 복사해서 티스토리에서 붙여놓고 싶은 곳에 붙여 넣으면 끝이다.
티스토리에 넣는 방법은 아래 사진처럼 HTML을 클릭 후 원하는 위치에 넣으면 된다.
그러면 티스토리 페이지에 아래 사진 같은 모양이 넣어지는 것을 확인할 수 있다.
728x90
'HTML\CSS\JS' 카테고리의 다른 글
| [HTML/CSS] box-sizing속성의 개념과 예시 (0) | 2021.05.31 |
|---|---|
| [HTML/CSS] display속성과 margin속성 & margin 상쇄 형상 (0) | 2021.05.31 |
| [CSS] CSS 기본구조 및 선택자 종류와 우선순위 (0) | 2021.05.30 |
| [HTML] HTML태그 정리 - 2 (0) | 2021.05.29 |
| [HTML] HTML 태그 정리 - 1 (0) | 2021.05.28 |