스트레칭 CSS!!
입문
나팜 스트레칭을 만들어본 CSS!!버튼을 누르면 공기 저항에 A자가 새겨진다!!
See the Pen napalm_stretch by am10 ( @am102 )
on CodePen .
끝내다
그저 그렇다면 욕을 먹을 수도 있으니까 Qiita에서 자주 보는 HTML, CSS, JS 코드가 들어간 코드펜을 적어보겠습니다.(옛날부터 계속 생각했는데 어떡하지?)p>
CodePen 사용 방법
계정 만들기
아래 사이트에서 계정을 만들다p>
CodePen( https://codepen.io/ )
- 오른쪽 상단의 Sign up 을 클릭합니다.
- 제휴 계정(트위터 먼저 사용)
트위터, GitHub, 페이스북 계정을 사용할 수 있습니다.없으면 Email로 등록할 수도 있습니다. - 화면에 yourprofile이라는 Make the most of yourprofile 화면이 표시되어 있습니다. &를 저장하십시오.Continue OK
- 이메일을 받았기 때문에 Click to Verify Email 을 클릭합니다.
창설자
계정을 만든 후 Pen을 생성합니다.(가능한 항목은 Pen)
- 왼쪽 위에 있는 Pen 을 클릭합니다.
- HTML, CSS, JS
입력
- 설정을 열고 JavaScript 탭을 선택하고 jquery의 URL을 입력합니다(jquery를 사용할 때만)
- Save&설정 닫기 를 클릭합니다.
- 왼쪽 상단의 title을 클릭하여 제목 입력
- 저장 클릭
다른 웹페이지에 올리기
Pen 완료 후 다른 웹 페이지에 게시p>
- 만든 Pen 페이지의 오른쪽 아래에 있는 Embed 를 클릭합니다.
- 오른쪽 아래에 있는 HTML(recommended) 탭 을 클릭합니다.
- 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>
호버 시뮬레이터만 있지 않나요?그렇게 생각하지만 안 돼요
인도물
Reference
이 문제에 관하여(스트레칭 CSS!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/am10/items/3409c570186f1f87ccf5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)