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

들어가며

아무것도 모르셔도 괜찮습니다! 어서오세요!

CSS 드로잉에 관심 있으신 분들 보다 쉽게 배우실 수 있도록 튜토리얼을 만들어 보았습니다. 

가장 쉬운 도형으로 이루어져 있으면서 인기 많은 캐릭터라 재미있게 배울 수 있으실 거에요 :)

CSS란?

웹을 이루고 있는 가장 기초에는 HTML과 CSS라는 것이 있습니다.

HTML이 정보를 표현한다면 CSS는 HTML을 시각적으로 꾸며주는 역할을 합니다.

CSS의 기본 구성은 selector(선택자) { property(요소): value(값) } 의 형태로 이루어져 있습니다.

드로잉을 위한 CSS 기초

우리는 최소한의 HTML을 사용하여 CSS 만으로 캐릭터를 그려볼 것 입니다.

가장 기본적으로 알야할 것들은 무엇이 있을까요?

• box-sizing

• position

• margin

• border

• border-radius

• background-color

• z-index

• overflow

• transform

• transition

우와 진짜 많네요. 하나하나 이론을 먼저 설명하면 지루할 것 같아 실습과정에서 설명 드리겠습니다.

각 요소에 대한 자세한 설명은 링크를 걸어 놓았으니 읽어보시면 도움이 될 겁니다.

추천 강좌

CSS를 무료 온라인 코스로 배울 수 있는 방법으로는 생활코딩을 적극 추천합니다! 이고잉님 강좌는 진리죠!

• 유투브 HTML 강좌 

• 유투브 CSS 강좌 

툴

Codepen

에디터를 설치하는 것 보다는 온라인 에디터를 사용합니다. 설치 과정도 없어 편리하고, 결과물을 공유하기도 편해서 코드펜을 추천합니다. 회원가입 페이지 하단의 Free Plan을 선택하면 무료로 이용할 수 있습니다. (코드펜 초보 사용자들을 위한 팁)

Photoshop

포토샵은 그리려고 하는 대상을 좀 더 정확하게 수치를 재거나 그리드를 만들 수 있어서 있으면 사용하는 걸 권장해 드립니다. 물론 없어도 상관은 없습니다. 대신 눈대중으로 하는 거라 조금 차이는 생길 수 있겠죠? (그리려는 이미지를 배경에 깔아 놓고 그 위에 그리는 방법도 있긴 합니다.) 포토샵 대체 방법으로는 웹으로 포토샵의 간단한 기능을 사용할 수 있는 사이트가 있습니다. 

< 포토샵 대체 사이트 - https://pixlr.com/editor/ >

Colorpicker
포토샵 스포이드(색상 추출 도구)로 색상을 확인 할 수도 있지만 포토샵이 없어도 가능합니다. 대신 크롬 브라우저가 필요한데요. 설치 및 사용방법은 아래와 같습니다.

확장 프로그램을 설치하면 오른쪽 상단에 아이콘이 추가 됩니다.

이 아이콘을 누르고 추출하고 싶은 색상 위에 마우스 포인터를 갖다 대면 색상값(hex)이 나옵니다.

준비 끝!

다음 튜토리얼에서는 HTML로 레이아웃을 잡는 방법에 대해 소개해 드리겠습니다.

[CSS Drawing] Basic Tutorial (라이언 그리기) from Hyejin Oh