1. Position 의 종류
참고 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/position
2. float 의미와 기본 개념
/* 키워드 값 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
/* 전역 값 */
float: inherit;
float: initial;
float: unset;
참고 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/float
3. CSS를 활용한 캐릭터 만들기
index.html
<!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>DogCat CSS</title>
<link rel="stylesheet" href="./src/style.css">
</head>
<body>
<div class="Cat">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="earIn left"></div>
<div class="earIn right"></div>
<div class="face">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="eyeColor left"></div>
<div class="eyeColor right"></div>
<div class="nose"></div>
<div class="noseBrow left"></div>
<div class="noseBrow left2"></div>
<div class="noseBrow right"></div>
<div class="noseBrow right2"></div>
<div class="mouth left"></div>
<div class="mouth right"></div>
</div>
</div>
<p class="name">개냥이 입니다.</p>
</body>
</html>style.css
* {
box-sizing: border-box;
}
body {
background: beige;
}
.Cat {
position: relative;
margin: 50px auto;
width: 400px;
height: 380px;
}
.Cat .face {
position: absolute;
bottom: 0;
width: 400px;
height: 360px;
border-radius: 100%;
border: 10px solid #000;
background: #FBB565;
}
.Cat .ear {
position: absolute;
top: 0;
width: 150px;
height: 110px;
border: 10px solid #000;
border-radius: 100%;
background: #E27B44;
}
.Cat .ear.left {
left: 10px;
}
.Cat .ear.right {
right: 10px;
}
.Cat .earIn {
position: absolute;
top: 14px;
width: 102px;
height: 80px;
border: 10px solid #000;
border-radius: 100%;
background: #fff;
}
.Cat .earIn.left {
left: 34px;
}
.Cat .earIn.right {
right: 34px;
}
.Cat .eye {
position: absolute;
top: 115px;
width: 100px;
height: 60px;
border: 10px solid #000;
border-radius: 70%;
background: #fff;
}
.Cat .eye.left {
left: 65px;
}
.Cat .eye.right {
right: 65px;
}
.Cat .eyeColor {
position: absolute;
top: 130px;
width: 30px;
height: 30px;
border-radius: 100%;
background: #000;
}
.Cat .eyeColor.left {
left: 100px;
}
.Cat .eyeColor.right {
right: 100px;
}
.Cat .nose {
position: absolute;
top: 184px;
left: 50%;
margin-left: -16px;
width: 30px;
height: 33px;
border-radius: 80% 80% 100% 100%;
background: #000;
z-index: 2;
}
.Cat .noseBrow {
position: absolute;
top: 210px;
width: 60px;
height: 10px;
border-radius: 50px;
background:#000;
}
.Cat .noseBrow.left {
left: 48px;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
z-index: 1;
}
.Cat .noseBrow.left2 {
top: 240px;
left: 48px;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
z-index: 1;
}
.Cat .noseBrow.right {
right: 48px;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
z-index: 1;
}
.Cat .noseBrow.right2 {
top: 240px;
right: 48px;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
z-index: 1;
}
.Cat .mouth {
position: absolute;
top: 191px;
right: 73px;
width: 73px;
height: 68px;
border: 10px solid #000;
border-radius: 50%;
background: #fff;
}
.Cat .mouth.left {
left: 127px;
}
.Cat .mouth.right {
right: 127px;
}
.Cat .mouth:before {
content: "";
position: absolute;
width: 30px;
height: 33px;
background: #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 1;
}
.Cat .mouth.left:before {
top: 2px;
left: 29px;
}
.Cat .mouth.right:before {
top: 2px;
right: 31px;
}
.name {
text-align: center;
font-size: 50px;
font-weight: bold;
}
프론트엔드 개발자가 되기 위해 전진하고 있습니다~