Giters

u4bi-dev / css-drawing

:bear: css-drawing

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

cssdrawing

css-drawing-Character

라이언(Ryan)

    • 각 div 구조의 클래스 정의
    • ryan : 라이언 전체영역
    • ear left, ear right : 왼쪽 귀 오른쪽 귀
      • 선택자와 선택자 사이에 공백은?
      • 하위요소를 설정함을 의미
    • face : 라이언의 얼굴

[html]

 <!-- HTML 구조 잡기-->
 
 <div class="ryan"> <!-- 라이언 -->
 
   <div class="ear left"></div> <!-- 왼쪽 귀 -->
   <div class="ear right"></div><!-- 오른쪽 귀 -->
  
   <div class="face"> <!-- 라이언의 얼굴-->
  
   </div>
  
 </div>

Alt text

    • .ryan .ear : 양쪽 귀에 공동으로 들어갈 스타일 요소
      • 앱솔루트, 탑0, 높이너비92px, 보더10px검은색 줄선
      • 보더반지름100%, 배경색 주황계열
    • ryan .ear.left : 왼쪽 귀 스타일요소
      • 좌측 기준에서 54px 떨어진 곳에 배치
    • ryan .ear.right : 오른쪽 귀 스타일요소
      • 우측 기준에서 54px 떨어진 곳에 배치
    • 하위 다중 클래스 사용할 경우에는?
    • 공백없이 바로 붙여 사용해야함
      • 예: ear.right {}

[css]

 /* 귀 공통 스타일 */
 .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;
 }

Alt text

    • .ryan : 라이언의 전체 영역
      • 릴렉티브로 설정, 마진의 너비 50px 마진의 높이는 auto
    • *와 after before : 영역
      • 박스 사이징을 보더 박스로 설정
    • body : 영역
      • 배경을 진한 보라색으로 설정

[css]

 /* html */  
 *, *:after, *:before{
   box-sizing: border-box;
 }
 
 /* body */
 body{
   background: #313654;
 }
 
 /* 라이언의 전체 영역 */
 .ryan{
   position: relative;
   margin: 50px auto;
   width: 400px;
   height: 380px;
 }

Alt text

    • 라이언 영역안에서 바로 아래 붙는 원을 그림
    • .ryan .face : 라이언의 얼굴 원형
      • 앱솔루트, 그 바로 아래 딱 붙기 위해 바텀 0, 높이400px, 너비367px
      • 보더반지름100%, 보더10px검은색 줄선, 배경색 주황계열

[css]

 .ryan .face{
   position: absolute;
   bottom: 0;
   width: 400px;
   height: 367px;
   border-radius: 100%;
   border: 10px solid #000;
   background: #d59729;
 }

Alt text

    • .ryan .eyebrow : 양쪽 눈썹에 공통으로 들어갈 스타일 요소
      • 앱솔루트, 탑106px, 너비78px, 높이14px, 보더반지름14px, 배경색 검은계열
    • .ryan .eyebrow.left : 왼쪽 눈썹 스타일 요소
      • 좌측 기준에서 68px 떨어진 곳에 배치
    • .ryan .eyebrow.right : 오른쪽 눈썹 스타일 요소
      • 우측 기준에서 68px 떨어진 곳에 배치

[html]

 <div class="face"> <!-- 라이언의 얼굴-->
 
   <div class="eyebrow left"></div> <!-- 왼쪽 눈썹 -->
   <div class="eyebrow right"></div> <!-- 오른쪽 눈썹 -->
   
 </div>

[css]

 /* 눈썹 공통 스타일 */
 .ryan .eyebrow {
   position:absolute;
   top: 106px;
   width: 78px;
   height: 14px;
   border-radius: 14px;
   background: #000;
 }

 /* 왼쪽 눈썹 위치 */
 .ryan .eyebrow.left{
   left: 68px;
 }

 /* 오른쪽 눈썹 위치*/
 .ryan .eyebrow.right{
   right: 68px;
 }

Alt text

    • .ryan eye : 양쪽 눈에 공통으로 들어갈 스타일 요소
      • 앱솔루트, 탑147px, 너비높이26px, 보더반지름100%, 배경색 검은계열
    • .ryan .eye.left : 왼쪽 눈 스타일 요소
      • 좌측 기준에서 68px 떨어진 곳에 배치
    • .ryan .eye.right : 오른쪽 눈 스타일 요소
      • 우측 기준에서 68px 떨어진 곳에 배치

[html]

 <div class="face"> <!-- 라이언의 얼굴-->
   
   ... <!-- 왼쪽 눈썹 -->
   ... <!-- 오른쪽 눈썹 -->
   
   <div class="eye left"></div> <!-- 왼쪽 눈 -->
   <div class="eye right"></div> <!-- 오른쪽 눈 -->
   
 </div>

[css]

/* 눈 공통 스타일 */
 .ryan .eye {
   position: absolute;
   top: 147px;
   width: 26px;
   height: 26px;
   border-radius: 100%;
   background: #000;
 }

 /* 왼쪽 눈 위치 */
 .ryan .eye.left{
   left: 98px;
 }
 
 /* 오른쪽 눈 위치 */
 .ryan .eye.right{
   right: 98px;
 }

Alt text

    • .ryan .nose : 가운데 코에 들어갈 스타일 요소
      • 앱솔루트, 탑 184, 좌측 기준에서 50% 떨어진 곳에 배치
      • 마진 레프트축 -16px(코의 너비만큼 땡김)
      • 너비32px, 높이33px, 보더반지름100%, 배경색 검은계열

[html]

 <div class="face"> <!-- 라이언의 얼굴-->
   
   ... <!-- 왼쪽 눈 -->
   ... <!-- 오른쪽 눈 -->
   
   <div class="nose"></div> <!-- 코 -->
   
 </div>

[css]

/* 코 위치 */
 .ryan .nose {
   position: absolute;
   top: 184px;
   left: 50%;
   margin-left: -16px;
   width: 32px;
   height: 33px;
   border-radius: 100%;
   background: #000;
 }

Alt text

    • 코를 좀더 자연스럽게 하기 위함
    • border-radius : 속성값 수정
      • (변경전) 100% -> (변경후) 80% 80% 100% 100%;
      • 해당 속성은 왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽 아래
      • 시계 방향으로 진행함

[css]

/* 코 위치 */
 .ryan .nose {
 
   etc...
   
   border-radius: 80% 80% 100% 100%;
   
 }

Alt text

    • .ryan .mouth : 양축 부분 입에 공통으로 들어갈 스타일 요소
      • 앱솔루트, 탑191px, 너비73px, 높이68px
      • 보더10px검은색 줄선, 보더반지름100%, 배경색 검은계열
    • .ryan .mouth.left : 좌측 부분 입 스타일 요소
      • 좌측 기준에서 127px 떨어진 곳에 배치
    • .ryan .mouth.right : 우측 부분 입 스타일 요소
      • 우측 기준에서 127px 떨어진 곳에 배치

[html]

 <div class="face"> <!-- 라이언의 얼굴-->
   
   <div class="mouth left"></div> <!-- 입 좌측부분 -->
   <div class="mouth right"></div> <!-- 입 우측부분 -->
   
 </div>

[css]

 /* 입 공통 스타일 */
 .ryan .mouth {
   position: absolute;
   top: 191px;
   width: 73px;
   height: 68px;
   border: 10px solid #000;
   border-radius: 100%;
   background: #fff;
 }

 /* 입 좌측 부분 위치 */
 .ryan .mouth.left {
   left: 127px;
 }

 /* 입 우측 부분 위치 */
 .ryan .mouth.right {
   right: 127px;
 }

Alt text

[css]

 /* 코 위치 */
 .ryan .nose {
 
    etc...
   
    z-index: 1;
   
 }

Alt text

  • 입을 좀더 자연스럽게 하기 위한 작업
  • 입 중앙의 검은 줄선을 흰색 배경을 가진 content 속성으로 덮는다.
  • ryan .mouth:before : before 통해 content속성의 가상요소 추가
    • 콘텐츠 문자열 공백, 앱솔루트, 너비5px,높이5px, 배경색 빨간계열(임시)
    • z-index 1로 설정 (이 가상요소가 위로 쌓힘)

[css]

/* 입 공통 before 가상요소 */
 .ryan .mouth:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background: red; /* 테스트를 위한 색상 추후 #fff로 변경 */
    z-index: 1;
 }

Alt text

  • 흰 배경의 content 속성을 알맞는 크기로 조정해 검은선 덮기
  • ryan .mouth:before : 입의 가상요소에 공동으로 추가된 content 속성
    • 탑2px, 너비30px, 높이33px
    • 회전 -45도, 배경색 하얀계열
  • .ryan .mouth.left:before : 좌측 부분 입 before 가상요소
    • 좌측 기준에서 29px 떨어진 곳에 배치
  • .ryan .mouth.right:before : 우측 부분 입 before 가상요소
    • 우측 기준에서 29px 떨어진 곳에 배치

[css]

 /* 입 공통 before 가상요소 */
 .ryan .mouth:before {
  
    etc...
  
    width: 30px;
    height: 33px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #fff;
    
 }
 
 /* 입 좌측 부분 before 가상요소 */
 .ryan .mouth.left:before {
    left: 29px;
 }

 /* 입 우측 부분 before 가상요소 */
 .ryan .mouth.right:before {
    right: 29px;
 }

Alt text

  • 입의 가상요소가 코를 덮고 있는데 코를 위로 쌓음
  • .ryan .nose { z-index } : 코의 렌더링 순서
    • z- index의 속성값을 2로 수정
    • 얼굴의 뒤-1 /입의 뒤 0/입의 앞 1 /가상요소의 앞 2

[css]

 /* 코 위치 */
 .ryan .nose {
 
    etc...
   
    z-index: 2;
   
 }
도움을 주신 zineeworld(http://zinee-world.tistory.com) 님에게 감사드립니다.
더 많은 CSS 드로잉 작품은 이곳에서 확인하실 수 있습니다.

About

:bear: css-drawing

cssdrawing

Languages

Language:CSS 73.6%Language:HTML 26.4%