Qiita에 html, css, js의 실제 표시 예를 포함하는 방법 (CodePen)
Qiita에 html, css, js의 실제 표시 예를 포함하는 방법 (CodePen)
Qiita에서 자주 사용되는 소스 코드와 실제 디스플레이 이미지를 포함하는 방법.
(잘 보는 멋진 녀석)
<이런 녀석>
See the Pen test by @ @yuta ( @yuta-38 )
on CodePen .
Result의 프레임 안의 버튼을 클릭하면 실시간으로 JS가 실행된다.
방법
CodePen이라는 WEB상의 다른 서비스의 embed용 코드를 Qiita에 임베드하고 있다.
- CodePen 등록
- 소스 코드 작성
- embed URL 복사
- Qiita에 붙여 넣기
- 표시 내용 확인
1. CodePen 등록
처음 CodePen은 무엇입니까?
html, css, javascript의 코딩을 실시간으로 미리 볼 수 있는 도구.
온라인 편집기라는 서비스의 종류.
유사한 서비스: jsbin, jsFiddle,
● CodePen으로 사용자 등록하기
twitter, github, facebook, Mead로 등록 가능
2. 코딩
2-1 프로젝트 만들기
Setting에서 'title', 'Description' 입력
완료되면 'Save&Close'
2-2 코딩
HTML, CSS, JS의 각각의 테두리내에 코딩해 가는
HTML은 body 태그의 설명으로 확인
 |
|---|
보충(미리 보기 시 쓰기 코드가 자동으로 추가됨)
<!DOCTYPE html>
<html lang="en" {IF CLASSES}class="classes"{/IF}>
<head>
<meta charset="UTF-8">
{IF PRIVATE}
<meta name="robots" content="noindex">
{ELSE}
<!-- MIT License -->
{/IF}
<title>{TITLE}</title>
{STUFF FOR <HEAD>}
<link rel="stylesheet" href="{CSS RESET CHOICE}">
{EXTERNAL CSS}
<style>
{EDITOR CSS}
</style>
{PREFIX FREE (if enabled)}
{MODERNIZR (if enabled)}
</head>
<body>
{EDITOR HTML}
{JS Library (if chosen)}
{EXTERNAL JS}
<script>
{EDITOR JS}
//# sourceURL=pen.js
</script>
</body>
</html>
3. embed URL 복사
3-1 프로젝트 저장
코드를 작성한 후 Save 클릭
3-2 embed용 소스 코드 복사
페이지 하단의 '내장'을 클릭
(※화면 폭이 좁으면 생략되었을지도)
"HTML (recommended)"탭을 클릭
테두리에 나열된 코드 복사
4. Qiita에 붙여넣기
복사한 코드를 Qiita에 붙여넣기
※미리보기 화면에서 확인할 수 없음
"See the Pen test by 사용자 이름 on CodePen."이 표시되면 OK
See the Pen test by @ @yuta ( @yuta-38 )
on CodePen .
<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="yuta-38" data-slug-hash="LYVmyye" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="test">
<span>See the Pen <a href="https://codepen.io/yuta-38/pen/LYVmyye">
test</a> by @@yuta (<a href="https://codepen.io/yuta-38">@yuta-38</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5. 표시 내용 확인
한정 공유 소식으로 임시교료로 하고, WEB 페이지상에서 표시 내용을 확인
문제가 없으면 오른쪽 상단의 설정 아이콘에서 전체 게시를 선택
 |
|---|
<메모>
jsbin의 embed용 코드를 붙여 보았지만, 임베드는 할 수 없었다.
텍스트 링크로 표시. 링크 대상은 유료 버전이 아니면 잡을 수없는 것 같습니다
Reference
이 문제에 관하여(Qiita에 html, css, js의 실제 표시 예를 포함하는 방법 (CodePen)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shizen-shin/items/9407f8f8380bee90f9b9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
