CSS 아이콘: 마이크로소프트

이 기사에서는 CSS만 사용하여 Microsoft 아이콘을 만듭니다. 어떻게 하는지 살펴보겠습니다.

문제

해결책

먼저 이 로고의 구조를 만든 다음 해당 구조의 스타일을 지정합니다.

HTML

<div class="wrapper">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="yellow"></div>
</div>

위의 HTML 코드에는 wrapper 컨테이너가 있으며 4개의 자식red , green , blue 및 yellow 가 있습니다.

CSS

이제 하나씩 스타일을 지정해 보겠습니다. 먼저 wrapper 컨테이너의 스타일을 지정해 보겠습니다. 2열grid을 만들고 gap 속성을 사용하여 간격을 관리했습니다.

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

이제 모든 자식을 Universal Selector (*)으로 스타일 지정하고 높이와 너비를 지정합니다50px.

.wrapper > * {
  width: 50px;
  height: 50px;
}

개별 어린이에게 색상을 적용할 차례입니다.

.red {
  background: #f44336;
}
.green {
  background: #4caf50;
}
.blue {
  background: #2196f3;
}
.yellow {
  background: #ffc107;
}

코데펜

이제 결과는 다음과 같습니다.

마무리

이것은 일련의 CSS 아이콘이 될 것이므로 더 많은 기사를 보려면 팔로우하십시오. 당신이 이것을 좋아한다면 그것을 ❤️하는 것을 잊지 마십시오. 그리고 다음편에서 뵙겠습니다.