CSS 회화 초보자가 캐릭터의 삽화를 그려봤어요.

나 많이 따라한 것 같아!!

CSS 페인팅 포인트

실제로 해봤는데 몇 가지 알아야 할 요점이 있어서 총괄해 봤어요

먼저 부품을 분해하다

이번 이사무사는 쉽게 이해할 수 있는 예로 원형, 사각형, 삼각형 등 각종 도형을 조합하여 삽화를 만들었다br/>
따라서 어떤 부품을 만들지 먼저 고려해 조합한 다음에 뜯는 것이 비교적 쉽다br/>
이렇게 하면 결승점을 쉽게 볼 수 있습니다

그나저나 이번에 만든 건 부품으로 뜯어보면 이렇게br/>

원형, 정사각형, 비뚤어진 원형과 사다리꼴?구성합니다.

border/border-radius를 잘 사용합니다.

부품으로 분할한 후, 특히 만화 캐릭터는 위에서 쓴 것처럼 대부분 원형, 삼각형 등의 형상을 조합하여 만든 것이다br/>
border-radius도 네 개의 각을 각각 지정할 수 있기 때문에 조정에 따라 다양한 원형과 원형 이외의 모양을 만들 수 있습니다!

이번에border-radius를 사용하여 월대두의'ひ'중간 부분을 물방울 모양으로 만든다.입 부분도 border radius로 반 엔을 만들었어요.br/>
또한border는 삼각형뿐만 아니라 사다리꼴과 마름모꼴도 만들 수 있기 때문에 잘 사용하는 것도 중요하다p>

월대두의 구조

특히 월대머리는 보통 원이 아닌 위에 살짝 가느다란 이른바 물방울형에 맞춰야 한다
border-radius: 10% 50% 50% 50%;

이렇게 각이 하나밖에 없는 다른 부분보다 뾰족한 덩어리를 만들어서 그 뾰족한 부분을 위로transform: rotate(45deg);

중경사입니다.

.samurai_tyonmage {
  &:before {
    content: '';
    border-top: 10px solid transparent;
    border-left: 9px solid transparent;
    border-right: 68px solid #000;
    border-bottom: 0 solid transparent;
    height: 19px;
    width: 0;
    position: absolute;
    top: 0;
    left: 50px;
    display: block;
    transform: rotate(180deg);
  }
}

이런 느낌p>

유사 요소 사용

이번 HTML은 부품별로 div로 나뉘어집니다.br/>
(사실 좀 줄이려고 했는데 이번엔 초급편이니까 다음에...)

유사한 요소를 사용하면 더 많은 before와 애프터 부품을 만들 수 있기 때문에 이것을 어떻게 교묘하게 사용하는가도 관건이라고 생각합니다.p>

이번에는 얼굴 각 부위를 before/after로 옆머리를 묶어줍니다.br/>

box-shoadow 사용

이번에 눈 부분에 박스-shoadow 두 개를 추가해서 눈썹을 만들었는데 조정하기가 어려워...

무사군이라면 귀와 볼, 옆머리와 세 군데가 둥글고 둥글게 묶어서 박스-shoadow로 만들 수 있을 것 같아요.p>

무사의 눈은 box-shoadow, 이런 느낌으로 조합된br/>

총결산

의심 요소와 box-shoadow를 사용하면 어느 정도 누구나 간단한 삽화를 그릴 수 있다br/>
다음에 (있으면) HTML 부분을 조금 더 줄이고 싶어요. (하나의div로만 이루어지는 사람도 있으니까...) 그리고 애니메이션을 조금 더 넣는 걸 목표로 하고 싶어요.p>