html에 우선 얼굴의 각 요소들을 만들어 주기
<body>
<div class="ryan">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face">
<div class="eyebrow left"></div>
<div class="eyebrow right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="nose"></div>
<div class="mouth left"></div>
<div class="mouth right"></div>
</div>
</div>
</body>자 이제 css 로 >>
우선
*{ box-sizing :border-box;
/*padding이나 boder-width로 인해 전체 사이즈에 영향을 받지 않도록 선언*/
}이제 얼굴 본격적으로 만들기
얼굴 각요소가 다 들어있는 .ryan 태그는 position : relative; 로 !
여기서 포지션 요소 알아보기
position 속성
static > 다른태그와의 관계에 의해 자동배치, 임의지정x(모든태그들의 기본적인 상태)
relative > 원래있던 위치기준으로 좌표를 지정
absolute > 절대 좌표와 함께 위치지정
fixed > 스크롤의 관계없이 , 문서 최좌측상단기준 좌표고정
inherit > 부모 태그의 속성값 상속
그 아래 얼굴 요소들은 position : absolute 로 지정해주어
그 부모의 속성인 relative의 위치를 기준으로 움직이게 한다.
코딩의 해상도 높이기