CSS 전투: #1 - 단순히 정사각형

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

문제

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

해결책

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

HTML

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

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

CSS

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

.box {
  width: 400px;
  height: 300px;
  background: #5d3a3a;
}

.box에 CSS를 적용하면 다음과 같이 표시됩니다.



이제 div 의 자식.box 스타일을 지정합니다.

.box div {
  background: #b5e0ba;
  width: 200px;
  height: 200px;
}

CSS를 적용한 결과는 다음과 같습니다.



이제 문제는 단순히 위의 스타일로 해결됩니다.

코데펜

대체 솔루션

여러 가지 방법이 있지만 이 작업을 수행할 수 있는 또 다른 방법입니다. 저는 다음을 좋아합니다.

HTML

<div></div>

CSS

body{
  background: #5d3a3a;
  margin:0;

}
div {
  width: 200px;
  height: 200px;
  background: #b5e0ba;
}

마무리

당신이 이것을 좋아한다면 그것을 ❤️하는 것을 잊지 마십시오. 그리고 다음 글에서 뵙겠습니다. 곧 봐요.