CodePen을 사용해보자

원래는 네이버 블로그에서 공부 기록을 남겼다.

css html 공부 기록을 남기려는데 티스토리에서는 CodePen 사이트에서 얻은 코드와 결과를 올릴 수 있다는 장점을 알고 티스토리 블로그를 시작한다.

다른 말이지만 요즘은 블로그에 공부 기록 남기는 재미로 공부를 한다. 

 

 

1. 아래의 CodePen 주소로 접속한다.

https://codepen.io/trending

 

 

 

 

2. 좌측 상단의 CREATE 박스의 Pen 박스를 클릭한다.

 

 

 

3. HTML, CSS, JS 본인이 필요한 칸을 채우고 SAVE 버튼을 클릭한다.

 

 

 

4. 우축 하단의 Embed 버튼을 클릭

 

 

 

5. 오른쪽 큰 박스는 원래는 테마, 속성을 정한다.

    상단의 HTML을 클릭한다.

    우측 상단의 [Copy Code] 버튼 클릭하여 코드를 복사한다.

 

 

 

6. 티스토리 글쓰기에서 HTML 모드로 변경 후 위에서 복사한 코드를 붙여 넣으면 된다.

 

 

 

 

7. 외의 일반 글을 작성할 경우 기본 모드로 돌아와서 글을 작성하면 된다.

 

 

 

나의 결과 : 

 

See the Pen Untitled by LEAhub (@leahub) on CodePen.