코드펜 바로가기

몇 가지 유용한 Codepen 단축키를 배웠으므로 공유하기로 결정했습니다.

자동 완성 태그.

codepen HTML 섹션에서 태그를 입력한 다음 Tab 키를 누르면 자동으로 태그가 완성됩니다. div를 입력한 다음 TAB 키를 누르면 여는 태그와 닫는 태그로 자동 완성됩니다. 커서가 태그 사이에 있을 것입니다.

<div></div>

배수

태그를 여러 개 사용하려면 별표 '*'를 사용하고 태그 뒤에 별표와 원하는 항목 수를 입력하십시오. div*5 및 TAB은 5개의 빈 div 태그를 제공합니다. 공백 없이 단일 텍스트 단위로 유지한 다음 TAB을 클릭합니다. 태그 미리보기가 표시됩니다.

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

클래스

클래스를 추가하려면 점 표기법을 사용하십시오. div.post 및 TAB은 클래스 이름이 post인 div 태그를 제공합니다. 대부분의 태그와 함께 작동합니다. tag.classname 및 TAB을 입력합니다. 기사 또는 섹션과 같은 다른 태그를 사용하여 이 작업을 수행할 수 있습니다. 일관성을 위해 div 태그를 사용합니다.

<div class="post"></div>

모두 함께

예, 효율성을 위해 이들을 결합할 수 있습니다.div.news*10 뉴스클래스로 10div를 줍니다.

  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>

codepen

CodePen is the best place to build, test, and discover front-end code. CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.

이번에는 여기까지입니다. 나는 당신이 뭔가를 배웠기를 바랍니다.

나는 스레드에 대한 응답으로 이것을 썼습니다. 다른 DEV 회원이 무엇을 배우고 있는지 보려면 팔로우하세요.
TIL, Time I Learned Something에 대한 시리즈를 해야 할까요?

-$JarvisScript git push

크리스 자비스 | 풀스택 개발자 | 선적 서류 비치









dev.to/jarvisscript/c…의 "CSS Color Gradients"CSS Gradients로 할 수 있는 몇 가지 작업.


오후 13:29 - 2022년 4월 25일