CSS 전투: #4 - 우여곡절

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

문제

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

해결책

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

HTML

<p class="left"></p>
<p class="middle"></p>
<p class="right"></p>

CSS

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

body {
  margin: 0;
  background: #62306d;
}
.middle,
.left,
.right {
  position: absolute;
  background: #f7ec7d;
  width: 100;
  height: 100;
  border-radius: 10rem 10rem 0 0;
  margin-top: 50;
}
.middle {
  left: 150;
}
.left,
.right {
  transform: rotate(180deg);
  bottom: 34;
}
.left {
  left: 50;
}
.right {
  right: 50;
}

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 % then 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 l></p>
<p m></p>
<p r></p>

여기서는 <p> 태그를 사용하고 있으며 그 안에 l는 left를 나타내고 m는 middle를 나타내고 r는 right를 나타냅니다.

CSS

body{
  margin:0;
  background:#62306D;
}
p[m],p[l],p[r]{
  position:absolute;
  background:#F7EC7D;
  width:100;
  height:100;
  border-radius:10rem 10rem 0 0;
  margin-top:50;
}
p[m]{
  left:150;
}
p[l],p[r]{
  transform:rotate(180deg);
  bottom:34;
}
p[l]{
  left:50;
}
p[r]{
  right:50;
}

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

마무리

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