Downloaded 24 times
Uploaded byHyejin Oh
[CSS Drawing] Basic Tutorial (라이언 그리기)
This document provides a tutorial on using CSS to draw basic shapes like a face. It discusses key CSS properties for drawing like box-sizing, position, background-color, and transform. It then walks through the steps to draw different facial features like eyes, nose, mouth by specifying properties like width, height, border, and position. Color values are also provided for common parts of the face. The tutorial concludes by providing links to blog posts that cover preparing for the tutorial, adding the HTML, and implementing the CSS code.
![[Basic HTML/CSS] 7. project](https://cdn.slidesharecdn.com/ss_thumbnails/7-170304052711-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Basic HTML/CSS] 6. css - box sizing, display, margin, padding](https://cdn.slidesharecdn.com/ss_thumbnails/6-170304052556-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Basic HTML/CSS] 4. html - form tags](https://cdn.slidesharecdn.com/ss_thumbnails/4-170304052427-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Basic HTML/CSS] 3. html - table tags](https://cdn.slidesharecdn.com/ss_thumbnails/3-170304052317-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Basic HTML/CSS] 5. css - selector, units](https://cdn.slidesharecdn.com/ss_thumbnails/5-170304052513-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Basic HTML/CSS] 2. html - list tags](https://cdn.slidesharecdn.com/ss_thumbnails/2-170304051529-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Basic HTML/CSS] 1. html - basic tags](https://cdn.slidesharecdn.com/ss_thumbnails/1-170304051258-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Basic HTML/CSS] 0. introduction](https://cdn.slidesharecdn.com/ss_thumbnails/0-170304051145-thumbnail.jpg?width=640&height=640&fit=bounds)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
[CSS Drawing] Basic Tutorial (라이언 그리기)
- 1.
- 2.
- 3. selecter { property:value; } @zineeworld
- 4.
- 5. CSS Basic fordrawing 1. box-sizing 2. position 3. margin 4. border 5. border-radius 6. background-color 7. z-index 8. overflow 9. transform 10. transition @zineeworld
- 6.
- 7. codepen photoshop colorpicker Tool or chrome extension @zineeworld
- 8.
- 9.
- 10. I don’t havephotoshop :’( @zineeworld
- 11. Tool - OnlinePhotoshop @zineeworld 선택 도구 색상 추출 도구 크기 확인
- 12. Tool - Colorpicker colorpicker 검색 후 설치 @zineeworld
- 13. Tool - Colorpicker 추출하고 싶은 색상 위에 마우스 포인터를 갖다 대면 색상값(hex)이 나옵니다. @zineeworld
- 14. So, What weare going to draw? @zineeworld
- 15.
- 16.
- 17.
- 18. @zineeworld ear left eye right nose mouthleft mouth right face eyebrow left eyebrow right ear right eye left Layout ryan
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. codepen / facebook/ twitter @zineeworld
- 32. Blog Tutorial (1) 준비- http://zinee-world.tistory.com/424 (2) HTML - http://zinee-world.tistory.com/425 (3) CSS - http://zinee-world.tistory.com/426