멋쟁이 사자처럼 프론트엔드스쿨 3기 천하제일 캐릭터 경진대회 참가
🐯우수상 귤랑이🍊
CSS에 자신감은 없지만 최선을 다하려고 했는데 우수상을 주셔서 너무 감사했던 대회!
덕분에 조금의 자신감과 뿌듯함을 느꼈다!
처음에는 약간 이런 느낌의 호랑이를 만들려고 했다!
내 CSS 실력을 감안하여 그림판으로 그려봤다 ㅎㅎ;;
만들면서 호랑이 피부색을 정하는데 귤로 하면 재밌을 것 같아서 만드는 도중에 귤로 바꾸기로 했다.
뭔가 .. 보는 사람과의 상호작용을 주면 좋을 것 같아서 마우스 위치에 따라 모습이 바뀌게 함
https://github.com/mayo516/character_making
https://mayo516.github.io/character_making/
전체 마크업
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>멋쟁이호랑이처럼</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<script src="console.js"> </script>
</head>
<body>
<div class="container">
<div class="안내">귤랑이의 입에 마우스를 올려보세요.</div>
<div class="like-lion">
<div class="leaf"></div>
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face">
<div class="line-top"></div>
<div class="line-left"></div>
<div class="line-right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="real-mouth"></div>
<div class="볼터치"></div>
<div class="볼터치-right"></div>
</div>
<div class="chin">
<div class="nose"></div>
<div class="mouth"></div>
<div class="mouth-right"></div>
<div class="chin-left"></div>
<div class="chin-middle"></div>
<div class="chin-right"></div>
</div>
</div>
<div class="name">귤랑이</div>
<div class="안내2">귤랑이의 이야이가 궁금하다면 콘솔창을 켜보세요</div>
</div>
</body>
</html>
나는 콘솔창을 키면 특정 글을 읽을 수 있게 나름 재미 요소? 를 넣으려고 했으므로 그런 텍스트들도 같이 넣어줬다.
이런 내용을 볼 수 있다 ... ^^ ㅎㅎ
.ear::after {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 60px;
height: 50px;
background-color: rgb(255, 237, 204);
border-radius: 50%;
box-shadow: rgba(126, 126, 126, 0.25) 0px 30px 60px -12px inset, rgba(112, 112, 112, 0.3) 0px 18px 36px -18px inset;
}귀 같은 경우 가상 요소 선택자를 이용해서 귀 안쪽을 채워줬다.
캐릭터를 만들면서 가상 요소 선택자를 굉장히 많이 사용했다.
예를 들면 눈안에 반짝이는 요소라든지..
.chin-left::before {
content: "";
right: 30px;
top: 20px;
position: absolute;
background-color: rgb(243, 120, 126);
width: 30px;
height: 20px;
border-radius: 40%;
box-shadow: rgba(86, 50, 93, 0.25) 0px 50px 100px -20px, rgba(175, 35, 35, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
z-index: 11;
}볼에 있는 볼터치 같은 경우 볼록한 느낌을 내고 싶어서 box-shadow를 많이 활용했다.
볼록한 볼터치!
.chin:hover {
animation: 1s chindown infinite alternate;
}
@keyframes movingleaf {
100% {
transform: rotate(10deg);
}
}
@keyframes chindown {
100% {
transform: translate(0, 150px);
}
}키 프레임을 이용해서 머리에 있는 나뭇잎이 움직이게 했고, 턱에 마우스가 올라가면 턱이 아래로 내려오면서
귤랑이의 귤모습이 나타나게 만들었다!
소감
기대는 하나도 안했는데 ...
우수상을 주셨다 ㅠㅠ 감사합니다....
CSS를 이렇게 실습해보니깐 잘 안쓰던
animation이나 가상 요소 선택자 등을 더 잘 쓸 수 있게 된
기회였다. 배우면서 상도 받고..
이런 기회를 주신 멋사와 제코베에 감사 인사를 드립니다.
+ ) 약간의 리팩토링
나는 완성만 바라보면서 만들었더니 일단 완성하는게 급급했던 것 같다. 다른 분 코드를 보는데 변수를 쓰신걸 보고
'왜 이 생각을 못했지!?? '했다. 물론 나는 색이 비슷하게 들어가는 경우가 많이는 없었지만.. 변수를 선언해서 쓰는게 훨씬 유지보수면에서 좋을 듯 했다.
특히 호랑이 같은 경우에 줄무늬가 특징인데 여러 번 들어가는 경우 변수로 설정하는게 훨씬 도움이 됐다.
이제 색 바꾸는 것도 쉽다!
'개발이야기' 카테고리의 다른 글
| next.js에서 순수 css로 reset css하기 (1) | 2023.02.15 |
|---|---|
| 슬럼프 회고 | 잊지 말아야 할 경험 (0) | 2022.11.22 |
| GitHub 오거나이저..?가 뭔데? GitHub로 협업하기! 깃헙 organization(단체) 만들기 (0) | 2022.10.27 |
| 타입스크립트에서 const / let 을 컴파일하면 결과로 var가 나오는 이유 (1) | 2022.10.19 |
| 합격하는 신입 개발자? (2) | 2022.09.10 |
