See the Pen CSS Drawing - 18. Santa Claus by zinee (@zineeworld) on CodePen. 산타클로즈! ^0^디자인 참고 : 이니스프리 마이쿠션

See the Pen CSS Drawing - 17. Christmas Tree by zinee (@zineeworld) on CodePen. 크리스마스 스타일 !시작은 소소하게 :) 디자인 참고 : 이니스프리 마이쿠션

See the Pen CSS Drawing - 16. Vanilla (Dingo Friends) by zinee (@zineeworld) on CodePen. 바닐라! 딩고프렌즈 완료! ^.~

See the Pen CSS Drawing - 15. Coco (Dingo Friends) by zinee (@zineeworld) on CodePen. 제이크 단짝! 고양이 코코입니다 :-)

See the Pen CSS Drawing - 14. Jake (Dingo Friends) by zinee (@zineeworld) on CodePen. Hello December! 오랜만에요 :-)

주요 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단계+@로 이루어져 있습니다. 각 단계에서 새롭게 추가되는 부분을 설명하도록 하겠습니다. 첫 시작에는 각 줄마다 주석을 달아 설명하도록 하겠습니다. 밑으로 내려갈수록 중복 된 부분은 생략하겠습니..

대상 분석 이 과정은 CSS로 작업하는 것 만큼이나 중요합니다. 포토샵을 사용하면 안내선으로 그리드를 칠 수 있습니다. 그러면 각 요소의 크기나 위치를 좀 더 정확히 알 수 있습니다. 단순한 캐릭터 일수록 비율이나 위치가 조금만 달라도 닮은 듯 안 닮은 결과물이 나오게 됩니다. 꼭 필요한 과정은 아니지만 이렇게 세밀하게 수치를 재서 만들면 완성도가 올라갑니다. 포토샵이 없다면 color picker를 이용해서 요소의 색상을 파악하면 됩니다. HTML 구조 잡고 적절한 클래스명 생각하기그리려는 대상을 보고 HTML을 어떻게 구성할 지 파악해야 합니다. 구조를 잡았다면 적절한 클래스명을 넣습니다. 누가 보더라도 어떤 부분을 맡고 있는 요소인지 명확하게 알 수 있도..

들어가며 아무것도 모르셔도 괜찮습니다! 어서오세요!CSS 드로잉에 관심 있으신 분들 보다 쉽게 배우실 수 있도록 튜토리얼을 만들어 보았습니다. 가장 쉬운 도형으로 이루어져 있으면서 인기 많은 캐릭터라 재미있게 배울 수 있으실 거에요 :) CSS란? 웹을 이루고 있는 가장 기초에는 HTML과 CSS라는 것이 있습니다.HTML이 정보를 표현한다면 CSS는 HTML을 시각적으로 꾸며주는 역할을 합니다.CSS의 기본 구성은 selector(선택자) { property(요소): value(값) } 의 형태로 이루어져 있습니다. 드로잉을 위한 CSS 기초우리는 최소한의 HTML을 사용하여 CSS 만으로 캐릭터를 그려볼 것 입니다.가장 기본적으로 알야할 것들은 무엇이 있을까요? box-sizingpositionmar..

See the Pen CSS Drawing - 12. Judy (Dingo Friends) by zinee (@zineeworld) on CodePen. 주디도 제가 좋아하는 캐릭터에요! 귀여운 펭귄이죠 :)