파트 1 - 기본 사항

CSS 일러스트레이션을 만드는 것은 흥미롭고 재미있을 수 있습니다. CodePen 또는 다른 유사한 웹사이트를 방문하면 CSS로 얼마나 놀라운 디자인과 아트워크를 만들 수 있는지 알게 될 것입니다. 예를 보여 드리겠습니다.


저자: Shunya Koide

시원한. 그렇지? 일부 애니메이션을 추가하고 애니메이션에 생명을 불어넣을 수도 있습니다. 저를 믿으세요. 자신만의 일러스트레이션을 만들기 시작하면 중독될 것입니다. 또한 의사 요소, 그림자, 위치 지정 및 테두리 반경을 사용하여 특히 CSS 기술을 급상승시키는 데 도움이 됩니다. 이제 우리만의 일러스트레이션을 만드는 방법을 살펴보겠습니다.


이번 포스트에서는 가장 기본적인 도형을 만드는 방법을 보여드리겠습니다. 모양을 만들기 위해 의사 요소::before 및 ::after에 따라 div를 사용합니다.

정사각형

사각형은 CSS로 그릴 수 있는 가장 간단한 모양입니다. 높이와 동일한 너비를 추가한 다음 background-color 를 추가하면 정사각형이 완성됩니다.

<div class="square"></div>

.square {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
}

직사각형

직사각형을 얻으려면 한쪽에서 정사각형을 더 길게 만드십시오.

<div class="rectangle">div>

.rectangle {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
}

원

정사각형을 만들고 모든 면에 50%border-radius를 추가하여 멋진 원으로 바꿉니다.

<div class="circle"></div>

.circle {
  background-color: dodgerblue;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}

타원

원을 그리기 위해 수행한 것과 동일한 단계를 수행하지만 직사각형에 수행합니다.

<div class="ellipse"></div>

.ellipse {
  background-color: dodgerblue;
  height: 125px;
  width: 200px;
  border-radius: 50%;
}

알약

이제 이 모양은 특히 버튼의 경우 매우 일반적입니다. 알약 또는 캡슐 모양이라고 부를 수 있습니다. 이것을 만드는 요령은 모든 면에 훨씬 더 큰border-radius을 추가하는 것입니다.

<div class="pill"></div>

.pill {
  background-color: dodgerblue;
  height: 100px;
  width: 200px;
  border-radius: 50000px; /*Any large value will do the trick*/
}

계란

이 모양을 만들려면 horizontal and vertical radius에 대해 다른 값을 사용해야 합니다.

<div class="egg"></div>

.egg {
  height: 200px;
  width: 150px;
  background-color: dodgerblue;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

삼각형

삼각형은 경계선으로 그릴 때 다른 모양과 약간 다릅니다. 아래 코드를 보면 높이와 너비가 0으로 설정되어 있습니다. 그것이 어떻게 형성되는지 이해하기가 조금 어려울 수 있습니다. 코드를 수정하고 값을 변경할 때 어떤 일이 발생하는지 확인하십시오. 0이 아닌 높이와 너비를 설정해 보십시오. 테두리 너비를 변경합니다. 변경 사항을 관찰하면 작동 방식을 이해할 수 있습니다.

<div class="triangle"></div>

.triangle {
  height: 0px;
  width: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 173px solid dodgerblue;
}

Chris Coyier의 이 펜은 다음을 쉽게 이해하는 데 도움이 됩니다.

부등변 사각형

사다리꼴은 너비가 0이 아닌 것을 제외하면 삼각형과 완전히 동일합니다.

<div class="trapezium"></div>

.trapezium {
  height: 0px;
  width: 150px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 150px solid dodgerblue;
}

평행사변형

transform: skew() 속성을 사용하여 평행사변형을 만듭니다. 동일한 높이와 너비를 사용하여 유사하게 마름모를 만들 수도 있습니다.

<div class="parallelogram"></div>

.parallelogram {
  height: 125px;
  width: 200px;
  background-color: dodgerblue;
  transform: skew(-20deg);
}

CSS 아트를 만드는 것은 이러한 모양을 흥미롭고 재미있는 방식으로 결합하는 문제입니다. 다음 포스트에서는 복잡한 그림을 단순화하고 html을 깨끗하게 유지하기 위해 이전에 언급한 의사 요소를 사용하는 방법을 보여 드리겠습니다. 그렇긴 하지만, 저는 여러분이 새로운 것을 배웠기를 바라며, 이것이 멋지고 아름다운 것을 창조하도록 동기를 부여했습니다.

즐거운 코딩하세요!😎


내codepen 🚀에서 하트, 별, 무한, 육각형, 팔각형 등과 같은 더 많은 모양에 대한 코드 스니펫을 찾을 수 있습니다.