[초급 튜토리얼] CSS로 라이언 그리기(3) - CSS

주요 CSS 설명

가장 많이 사용되는 CSS들 입니다. 링크를 누르면 예제와 간략한 설명을 보실 수 있습니다.

 

• box-sizing: border-box
• position: relative | absolute
• margin: 0 auto (block 요소의 중앙 정렬)
• width (가로)
• height (세로)
• border: 7px solid #000 (7px 검정색 테두리)
• border-radius: 100% (사각형을 원형으로 만듦)
• background (배경색)
• z-index (z축 3차원 우선순위)

 

 

 

진행방식

총 6단계+@로 이루어져 있습니다. 각 단계에서 새롭게 추가되는 부분을 설명하도록 하겠습니다.

첫 시작에는 각 줄마다 주석을 달아 설명하도록 하겠습니다. 밑으로 내려갈수록 중복 된 부분은 생략하겠습니다.

 

 

1. 얼굴

/* *은 전체 선택자 입니다. */ 
*, *:after, *:before {
  /* padding이나 border-width로 인해 전체 사이즈에 영향을 받지 않도록 선언해 줍니다. */
  box-sizing: border-box;
}

/* 라이언과 잘 어울리는 색상을 배경으로 넣었습니다. */
body {
  background: #313654;
}

/* 전체 영역을 잡아주었습니다. */
.ryan {
  position: relative; /* 라이언 기준점 잡기 */
  margin: 50px auto; /* 상하 50px 여백을 주고 좌우는 중앙 정렬 */
  width: 400px; /* 라이언 가로 폭 */
  height: 380px; /* 라이언 세로 폭 */
}

/* 전체 영역에서 밑에 딱 붙은 얼굴(원)를 그립니다. */
.ryan .face {
  position: absolute; /* .ryan에 position: relative를 주었으므로 그 영역을 기준으로 잡습니다. */
  bottom: 0; /* 바닥에서 0px 떨어진 곳 = 맨 아래 위치 | 0은 굳이 단위(px)를 적지 않아도 됩니다. */
  width: 400px;
  height: 367px;
  border-radius: 100%; /* 원형으로 만들기 */
  border: 10px solid #000; /* 검정색 테두리 10px */
  background: #d59729; /* 라이언 얼굴 색 */
}

See the Pen [CSS Drawing] Basic Tutorial - 01. face by zinee (@zineeworld) on CodePen.

2. 귀

.ryan .ear {
  position: absolute;
  top: 0;
  width: 92px;
  height: 92px;
  border: 10px solid #000;
  border-radius: 100%;
  background: #d59729;
}

/* 다중 클래스를 이용할 때는 클래스 명 사이에 공백 없이 적어주는 것 잊지마세요! */
.ryan .ear.left {
  left: 54px;
}

.ryan .ear.right {
  right: 54px;
}

See the Pen [CSS Drawing] Basic Tutorial - 02. ear by zinee (@zineeworld) on CodePen.

3. 눈썹

.ryan .eyebrow {
  position: absolute;
  top: 106px;
  width: 78px;
  height: 14px;
  border-radius: 14px;
  background: #000;
  transition: all 0.2s; /* 속성이 변할 때 0.2초에 걸려 부드럽게 변하게 합니다. */
}

/* 다중 클래스를 이용할 때는 클래스 명 사이에 공백 없이 적어주는 것 잊지마세요! */
.ryan .eyebrow.left {
  left: 68px;
}

.ryan .eyebrow.right {
  right: 68px;
}

See the Pen [CSS Drawing] Basic Tutorial - 03. eyebrow by zinee (@zineeworld) on CodePen.

4. 눈

.ryan .eye {
  position: absolute;
  top: 147px;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: #000;
  transition: all 0.2s; /* 속성이 변할 때 0.2초에 걸려 부드럽게 변하게 합니다. */
}

/* 다중 클래스를 이용할 때는 클래스 명 사이에 공백 없이 적어주는 것 잊지마세요! */
.ryan .eye.left {
  left: 98px;
}

.ryan .eye.right {
  right: 98px;
}

See the Pen [CSS Drawing] Basic Tutorial - 04. eye by zinee (@zineeworld) on CodePen.

5. 코

.ryan .nose {
  position: absolute;
  top: 184px;
  left: 50%;
  margin-left: -16px;
  width: 32px;
  height: 33px;
  border-radius: 80% 80% 100% 100%; /* 그냥 100% 하셔도 됩니다. */
  background: #000;
  z-index: 2; /* z-index로 입보다 코가 위로 올라오도록 합니다. */
}

See the Pen [CSS Drawing] Basic Tutorial - 05. nose by zinee (@zineeworld) on CodePen.

6. 입

.ryan .mouth {
  position: absolute;
  top: 191px;
  right: 73px;
  width: 73px;
  height: 68px;
  border: 10px solid #000;
  border-radius: 50%;
  background: #fff;
}
.ryan .mouth.left {
  left: 127px;
}

.ryan .mouth.right {
  right: 127px;
}

/* 이 아래 부분은 생략하셔도 괜찮습니다. */
/* :before, :after 가상요소를 활용하여 입 부분을 좀 더 완성도 있게 만들어 주었습니다. */
.ryan .mouth:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 33px;
  background: #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 1;
}

.ryan .mouth.left:before {
  top: 2px;
  left: 29px;
}

.ryan .mouth.right:before {
  top: 2px;
  right: 31px;
}

See the Pen [CSS Drawing] Basic Tutorial - 06. mouth by zinee (@zineeworld) on CodePen.

+@

그냥 똑같이만 그리는 건 심심하잖아요! 그래서 전 마우스오버 효과를 넣곤 합니다. 라이언이 윙크하게 만들어 볼까요?

/* .ryan에 hove(마우스오버) 했을 때 변화를 적어줍니다. */

/* 왼쪽 눈썹이 내려갑니다.(106px->100px) */
.ryan:hover .eyebrow.left {
  top: 100px;
}

/* 오른쪽 눈썹이 -10deg 움직입니다. */
.ryan:hover .eyebrow.right {
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

/* 오른쪽 눈 크기가 가로는 2배 세로는 0.1배로 변합니다. */
.ryan:hover .eye.right {
  -webkit-transform: scale(2, 0.1);
  transform: scale(2, 0.1);
}

See the Pen [CSS Drawing] Basic Tutorial +@ by zinee (@zineeworld) on CodePen.

 

 

 

 

완성.gif

우와! 끝까지 따라오셨나요? 수고하셨습니다 :)

다른 캐릭터도 도전해보세요! 감사합니다!