입문

나팜 스트레칭을 만들어본 CSS!!버튼을 누르면 공기 저항에 A자가 새겨진다!!
See the Pen napalm_stretch by am10 ( @am102 )
on CodePen .
끝내다

그저 그렇다면 욕을 먹을 수도 있으니까 Qiita에서 자주 보는 HTML, CSS, JS 코드가 들어간 코드펜을 적어보겠습니다.(옛날부터 계속 생각했는데 어떡하지?)p>

CodePen 사용 방법

계정 만들기

아래 사이트에서 계정을 만들다p>

CodePen( https://codepen.io/ )

1. 오른쪽 상단의 Sign up
을 클릭합니다.
2. 제휴 계정(트위터 먼저 사용)
   
   트위터, GitHub, 페이스북 계정을 사용할 수 있습니다.없으면 Email로 등록할 수도 있습니다.
3. 화면에 yourprofile이라는 Make the most of yourprofile 화면이 표시되어 있습니다. &를 저장하십시오.Continue OK
4. 이메일을 받았기 때문에 Click to Verify Email
을 클릭합니다.

창설자

계정을 만든 후 Pen을 생성합니다.(가능한 항목은 Pen)

1. 왼쪽 위에 있는 Pen
을 클릭합니다.
2. HTML, CSS, JS
   입력
   
   
3. 설정을 열고 JavaScript 탭을 선택하고 jquery의 URL을 입력합니다(jquery를 사용할 때만)
   
   
   
4. Save&설정 닫기
를 클릭합니다.
5. 왼쪽 상단의 title을 클릭하여 제목 입력
6. 저장 클릭

다른 웹페이지에 올리기

Pen 완료 후 다른 웹 페이지에 게시p>

1. 만든 Pen 페이지의 오른쪽 아래에 있는 Embed
를 클릭합니다.
2. 오른쪽 아래에 있는 HTML(recommended) 탭
을 클릭합니다.
3. Copy & 게시하려는 페이지에 Paste Code의 내용을 복사하여 붙여넣습니다
   
   data-height 변경 = "265"부분에서 표시된 높이를 변경할 수 있습니다.

Qiita의 투고 미리보기에 표시되지 않음을 주의하십시오.

경품

1200만 전력 CSSp>

See the Pen 1200 by am10 ( @am102 )
on CodePen .

さらにおまけ

Napum Component CSSp>

See the Pen napalm_combination by am10 ( @am102 )
on CodePen .

さいごに

사실 저는 CSS에서만 노력하고 싶은데 jquery한테 손을 댔어요.p>
호버 시뮬레이터만 있지 않나요?그렇게 생각하지만 안 돼요
인도물

• ナパームストレッチのCSS
• 1200万パワーのCSS