CSS 전투: #6 - 누락된 슬라이스

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

문제

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

해결책

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

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

모양을 만들기 위해 세 개의 div를 사용했습니다. 그들 각각은 슬라이스를 나타냅니다.

CSS

이제 먼저 본문 컨테이너의 스타일을 지정하겠습니다.

body {
  margin: 0;
  background: #e3516e;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

나는 grid를 사용하여 아이들을 배치했습니다. grid-template-columns: 1fr 1fr 속성은 1fr가 있는 두 개의 열이 있어야 함을 정의합니다. 여기서 fr는 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타냅니다.

이제 개별 조각의 스타일을 지정해 보겠습니다.

.one, .two, .three {
  width: 100;
  height: 100;
}
.one {
  background: #51b5a9;
  border-radius: 100% 0 0 0; 
  place-self: end;
}
.two {
  background: #fade8b;
  border-radius: 0 100% 0 0;
  place-self: end start;
}
.three {
  background: #f7f3d7;
  border-radius: 0 0 0 100%;      /* top-left , top-right, bottom-right, bottom-left */
  place-self: start end;
}

위의 코드에서 모든 슬라이스에 place-self을 사용했음을 알 수 있습니다. place-self CSS 속기 속성을 사용하면 블록 방향과 인라인 방향 모두에서 개별 항목을 한 번에 정렬할 수 있습니다(예: align-self 및 justify-self 속성).

Note: In CSS Battle you can use 100 instead of 100px. You don't need to define px in CSS. However, if you are using rem or %, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info visit here

코데펜

대체 솔루션

문자 수가 적고 단순하기 때문에 이 솔루션을 사용한 대안 솔루션이 많을 수 있습니다.

HTML

<p f></p>
<p s></p>
<p t></p>

여기서 f는 첫 번째 슬라이스를, s는 두 번째 슬라이스를, t는 세 번째 슬라이스를 나타냅니다.

CSS

* { margin:0 }  
body {
  background: #e3516e;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
p[f], p[s], p[t] {
  width: 100;
  height: 100;
}
p[f] {
  background: #51b5a9;
  border-radius: 100% 0 0 0;
  place-self: end;
}
p[s] {
  background: #fade8b;
  border-radius: 0 100% 0 0;
  place-self: end start;
}
p[t] {
  background: #f7f3d7;
  border-radius: 0 0 0 100%;
  place-self: start end;
}

팁

Minify the code or CSS by using any CSS Minifier. It helps you to reduce the characters in the code which will increase the score.

마무리

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