개발

CODE PEN 블로그에서 사용해보기!!

조쉪 2021. 7. 24. 22:00
반응형

See the Pen STUDY by joStory (@jostory) on CodePen.

 

블로그에서 CODE PEN을 사용하는 것은 생각보다 쉽다.

 

추가하는 방법에 대해 바로 알아보자!

 

우선 https://codepen.io/ 사이트에 접속하여 가입 혹은 로그인을 할 필요가 있다. 

 

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

 

나는 깃허브 아이디가 있었으므로 바로 로그인을 하였다.

 

그 후에 자동적으로  pen이 만들어지며 아래와 같은 화면이 표시된다. 

 

만약 표시가 안됬다면 왼쪽 상단에 사람 아이콘을 눌러 NEW PEN탭을 클릭한다. 펜이 생성되었으면 

위와 같은 펜이 생성되었으면 반은 끝난 거다.

 

HTML, CSS, JS를 적는 곳의 위치가 다른데 상단의 Change View를 클릭하면 몇 가지 선택할 수 있다.

 

원하는 것으로 선택하고, 제목도 바꿔놓자.

 

제목은 공부용이니까 대충 STUDY라고 적었다. 연필 마크를 클릭하면 바꿀 수 있다.

 

그 후에 HTML 코드 적은 후 SAVE 버튼을 클릭하자.

<!DOCTYPE html>
<html>
<head>
<title>JoStory Blog</title>
</head>
<body>

<h1>구독과 좋아요</h1>
<p>감사합니다!</p>

</body>
</html>

 

잘 표시되는 것을 확인하고 하단의 Embed버튼을 클릭한 후, 

 

Copy Code  클릭하여 자신의 블로그에 붙이면 끄읕!

 

Tistory같은경우는 글쓰기 > 기본모드 버튼 > HTML 탭을 눌러 붙여넣으면 확인할 수 있다.

 

다음부터는 이걸 통해서 HTML, CSS, JAVASCRIPT 관련해서 기초 공부를 해보려고 한다.

 

도움이 되셨다면, ❤️를 눌러 주시면 감사하겠습니다!
(궁금하신 사항이 있으시거나 이해가 안되신 내용이 있다면 댓글남겨주세요~ )

반응형