코드를 티스토리에 적용할 때 흔하게 사용하는 방법인 코드펜은 생각보다 쉽게 티스토리에 적용할 수 있다.
우선 위 링크에 들어가 계정을 생성하고 로그인 한다.
1. 코드펜에서 코드 작업
로그인 후, 좌측 메뉴의 [Pen] 이라는 메뉴에 들어간다.
Pen 메뉴에 들어가면 바로 코드를 작성할 수 있는 페이지가 나오는데, 해당 페이지에서 보여주고자 하는 기능(디자인)을 작성한다.
그 후 Ctrl + s를 눌러 저장 하거나 우측 상단의 [Save] 버튼을 클릭하고 나면 페이지 가장 하단에 작게 버튼들이 생성된다.
* 꼭 저장을 해야 나타난다.
위 바가 작게 생기면서 버튼들이 생기는데, 여기서 [Embed]를 클릭한다.
[Embed] 클릭 후 우측 중앙 쯤에 위치해 있는 [Copy Code]를 클릭해 해당 코드를 복사한다.
2. 티스토리에 적용하기
티스토리로 돌아와, 상단바의 "기본모드"를 "HTML"로 변경해준 다음, 복사해 둔 코드를 붙여넣기 하면 끝난다.
3. 적용 완료
* HTML로 변경해서 코드펜 코드를 넣은 다음, 다시 기본모드로 돌아오면 편하게 확인 가능하다.
See the Pen Untitled by H lee (@H-lee-the-encoder) on CodePen.
'퍼블리싱 > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] placeholder 속성에 br 넣기 (1) | 2025.07.02 |
|---|