📒 완성작품
📙 HTML 코드
<!DOCTYPE html>
<html lang="ko-KR">
<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">
</head>
<body>
<div class="penguin">
<div class="head-black">
<div class="head-white">
<div class="eye">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="eye-lash">
<div class="left"></div>
<div class="left2"></div>
<div class="right"></div>
<div class="right2"></div>
</div>
<div class="eye-white">
<div class="left"></div>
<div class="left2"></div>
<div class="right"></div>
<div class="right2"></div>
</div>
<div class="shy">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="mouth-up"></div>
<div class="mouth-under"></div>
<div class="head-hair"></div>
</div>
<div class="body-gray">
<div class="body-arm">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="body-foot">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</div>
</body>
</html>📘 CSS 코드
body {
width: auto;
height: 100vh;
background: rgb(206, 241, 255);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* head */
.head-black {
width: 300px;
height: 300px;
background: black;
border-radius: 50% 50% 30% 30%;
position: relative;
z-index: 1;
}
.head-white {
width: 250px;
height: 250px;
background-color: white;
border-radius: 50% 50% 30% 30%;
margin-left: 25px;
margin-top: 35px;
position: absolute;
}
.head-hair {
width: 100px;
height: 200px;
background-color: black;
border-radius: 50px;
position: absolute;
margin-left: 100px;
}
/* eye */
.eye div {
position: absolute;
width: 35px;
height: 45px;
background: black;
margin-top: 100px;
border-radius: 50%;
}
.eye .left {
margin-left: 25px;
}
.eye .right {
margin-left: 193px;
}
.eye-white div{
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
}
.eye-white .left {
margin-left: 32px;
margin-top: 125px;
}
.eye-white .left2 {
width: 15px;
height: 20px;
margin-left: 38px;
margin-top: 105px;
rotate: 1045deg;
}
.eye-white .right {
margin-left:200px;
margin-top: 125px;
}
.eye-white .right2 {
width: 15px;
height: 20px;
margin-left: 207px;
margin-top: 105px;
rotate: 1045deg;
}
.eye-lash div {
position: absolute;
width: 5px;
height: 20px;
background: black;
margin-top: 95px;
}
.eye-lash .left {
margin-top: 105px;
margin-left: 25px;
rotate: -35deg;
}
.eye-lash .left2 {
margin-top: 95px;
margin-left: 32px;
rotate: -25deg;
}
.eye-lash .right {
margin-top: 105px;
margin-left: 222px;
rotate: 35deg;
}
.eye-lash .right2 {
margin-top: 95px;
margin-left: 215px;
rotate: 25deg;
}
/* shy */
.shy div {
position: absolute;
width: 50px;
height: 20px;
background: pink;
border-radius: 50%;
margin-top: 170px;
}
.shy .left {
margin-left: 15px;
}
.shy .right {
margin-left: 187px;
}
/* mouth */
.mouth-up {
position: absolute;
width: 0px;
height: 0px;
border-bottom: calc( 20px * 1.732 ) solid rgb(255, 166, 0);
border-left: 50px solid transparent;
border-right: 50px solid transparent;
margin-top: 142px;
margin-left: 100px;
z-index: 1;
}
.mouth-under {
position: absolute;
width: 0px;
height: 0px;
border-bottom: calc( 20px * 1.732 ) solid rgb(255, 166, 0);
border-left: 50px solid transparent;
border-right: 50px solid transparent;
rotate: 180deg;
margin-top: 178px;
margin-left: 100px;
z-index: 1;
}
/* body */
.body-gray {
width: 300px;
height: 400px;
background: rgb(214, 214, 214);
border-radius: 200px 200px 110px 110px;
position: relative;
margin-top: -15px;
}
/* arm */
.body-arm div{
width: 80px;
height: 300px;
background-color: rgb(158, 158, 158);
position: absolute;
}
.body-arm .left {
margin-left: -30px;
border-radius: 300px 0 40px 200px;
rotate: 15deg;
}
.body-arm .right {
margin-left: 250px;
border-radius: 0 300px 200px 40px;
rotate: -15deg;
}
/* foot */
.body-foot div{
width: 80px;
height: 35px;
background: black;
position: absolute;
margin-top: 380px;
}
.body-foot .left {
margin-left: 75px;
border-radius: 50px;
}
.body-foot .right {
margin-left: 155px;
border-radius: 50px;
}
/* penguin */과제로 나만의 캐릭터 만들기가 있어서 만들어보게 되었다.
그림을 그리는게 아닌 코딩으로 캐릭터를 만들 수 있다는게 신기했다.
보여주는 이미지에 맞춰 클린 코딩이 아니라 그냥 야매 코딩이지만
그래도 완성했다는게 뿌듯하다^~^
애니메이션도 추가하고 싶었는데 몇개 해본바로
내가 생각한대로 구현 안되서 Fail...
애니메이션은 조금 더 공부를 한 다음에 다시 도전해봐야겠다!
근데 솔직히 넘 귀엽지 않아영? 푸항항😆
새로움을 두려워 하지 않는 도전하는 프론트엔드 개발자👩💻