CSS 전투: #2 - 까롬

3198 단어 beginnerstutorialcsswebdev
이 기사에서는 Carrom에 대한 CSS Battle CSS 과제를 해결합니다. 먼저 problem을 살펴보겠습니다.

문제



CSS 속성만 사용하여 다음 컨테이너를 만들어야 합니다.

해결책



이제 솔루션과 이를 달성하는 방법을 살펴보십시오.

HTML



먼저 이를 위한 HTML을 생성합니다. 이를 위해 두 개의 컨테이너를 사용했습니다. Pseudo-classes도 사용할 수 있습니다.


<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>


CSS



이제 컨테이너의 스타일을 지정해 보겠습니다.


body {
  margin: 0;
}
.box {
  display: flex;
  flex-wrap: wrap;
  column-gap: 100px;
  background: #62374e;
}
.box span {
  width: 50px;
  height: 50px;
  background: #fdc57b;
  align-self: center;
  margin: 50px;
}


빠른 링크


  • Codepen
  • Carrom

    • Note: Codepen might be different from the real shape but the code is correct with 100% match.



    마무리



    당신이 이것을 좋아한다면 그것을 ❤️하는 것을 잊지 마십시오. 그리고 다음 글에서 뵙겠습니다. 곧 봐요.
    가난한 사람의 바이오닉 판독
    【Nuxt.js】Google Fonts의 도입 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage