스트레칭 CSS!!

입문


나팜 스트레칭을 만들어본 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. 을 클릭합니다.
  3. 제휴 계정(트위터 먼저 사용)

    트위터, GitHub, 페이스북 계정을 사용할 수 있습니다.없으면 Email로 등록할 수도 있습니다.
  4. 화면에 yourprofile이라는 Make the most of yourprofile 화면이 표시되어 있습니다. &를 저장하십시오.Continue OK
  5. 이메일을 받았기 때문에 Click to Verify Email
  6. 을 클릭합니다.

창설자


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


  1. 왼쪽 위에 있는 Pen
  2. 을 클릭합니다.
  3. HTML, CSS, JS
    입력

  4. 설정을 열고 JavaScript 탭을 선택하고 jquery의 URL을 입력합니다(jquery를 사용할 때만)


  5. Save&설정 닫기
  6. 를 클릭합니다.
  7. 왼쪽 상단의 title을 클릭하여 제목 입력
  8. 저장 클릭

다른 웹페이지에 올리기


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


  1. 만든 Pen 페이지의 오른쪽 아래에 있는 Embed
  2. 를 클릭합니다.
  3. 오른쪽 아래에 있는 HTML(recommended) 탭
  4. 을 클릭합니다.
  5. 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>
호버 시뮬레이터만 있지 않나요?그렇게 생각하지만 안 돼요
인도물

좋은 웹페이지 즐겨찾기