본문 바로가기
LUCY/· 맛좋은 Soft

HTML/CSS/JavaScript 코딩 실습 사이트와 티스토리에 넣기

by 닐기 2022. 1. 11.

• 코딩 실습 사이트 소개와 실습창 티스토리에 넣는 방법.

 

두 사이트 모두 제목에서 처럼 3가지 언어를 지원한다. 더 많은 언어는 아직 배움이 없다. 배운다면 다른 언어도 실습할 수 있는 사이트를 찾아봐야겠다. 사실 자바스크립트도 힘들다...

 

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

 

 

- 코드펜 실습창 티스토리에 넣기.

 

HTML-CSS-JavaScript-코딩실습사이트와-티스토리에-넣기

▲ 실습한 내용을 넣는다는 건 저장을 한다는 뜻이므로 회원가입을 해야 한다.

코드를 작성하고 제목을 써준다. 그리고 저장한다.

 

 

HTML-CSS-JavaScript-코딩실습사이트와-티스토리에-넣기

▲ 오른쪽 아래에 Embed가 생긴다. 저장하기 전에는 없다.

 

 

HTML-CSS-JavaScript-코딩실습사이트와-티스토리에-넣기

▲ 실습 결과창이 뜨면 내용의 길이만큼 높이를 조절해주고 복사한다. 그리고 티스토리 HTML 모드에서 붙여 넣기 하면 된다.

 

See the Pen grid-template by nilgi (@nilgi) on CodePen.

 

- 제이에스피들도 방법은 똑같다. 디자인이 아주 깔끔하다.

https://jsfiddle.net/

 

JSFiddle - Code Playground

 

jsfiddle.net

 

HTML-CSS-JavaScript-코딩실습사이트와-티스토리에-넣기

▲ 제이에스피들 역시 회원가입을 해야 하고 코드작성 - 저장 - Embed.

 

 

HTML-CSS-JavaScript-코딩실습사이트와-티스토리에-넣기

▲ Tabs에서 보여주고 싶은 언어만 선택할 수 있다. 붙여 넣기 할 태그는 script를 그대로 써도 된고 iframe을 선택해도 된다. script를 복사해서 티스토리 HTML 모드에서 붙여 넣기 하자. iframe은 브라우저에 따라 지원하지 않는 경우가 있다.

 

 

두 사이트 각각 장단점이 있으므로 쓰기 쉽고 보기 편한 걸 사용하면 되겠다.

 

반응형

댓글0