[CSS] css로 라이언 만들기

시작하며

회사를 다니며 공부를 병행하다보니 코드를 직접 작성해보며 개발하는 것보다는 이론공부를  주로 하게 되었고 그 부분이 현재의 나에게 큰 문제점으로 다가왔다.

html과 css는 기본으로 알고 있었지만, 그 코드가 손에 익지 않았으니 완벽하게 알고 있다고 할 수는 없었다.

그래서 css부터 다시 시작하려고 한다.

코드를 안 보고 칠 줄 알아야 내꺼다

---

https://zinee-world.tistory.com/426

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

1차 과제는 위 블로그를 참고하며 시작했다.

 

처음에는 블로그에 올라온 코드를 보면서 따라했고 두번째부터는 코드를 보지않고 코드를 직접 치면서 완성시켰다.

라이언은 비교적 쉬웠기 때문에 간단하게 완성시킬 수 있었다.

 

1. 대상 분석하기

: 라이언의 경우 위 블로그에서 대상 분석으로 위치와 색상 등을 잡아주었기 때문에 해당 작업은 따로 진행하지 않았다.

 

2. html 구조를 잡고 클래스명 지정하기

: html구조와 클래스명은 블로그를 참고하지 않고 직접 구성해봤으며 블로그와 비슷하게 나왔다.

 

3. Visual Studio Code에서 만들었다.

: 블로그에서는 codepen을 활용하여 라이언을 만들었지만, 나는 개인적으로 편하게 느껴지는 vs코드에서 만들었다.

코드펜에서는 자동으로 html과 css가 연결되지만 vs코드를 사용할 경우 link로 html과 css 파일을 연결시켜줘야 하는데 오랜만에 하다보니 link로 연결도 안 해두고 css가 계속 적용 안 된다고 한참을 헤매고 있었다..ㅠㅠ

4. 얼굴, 귀, 입 등 순차적으로 제작을 진행했으며, 간혹 이상하다고 느낀 부분은 직접 코드를 수정해보며 제작했다.

 

라이언 완성!

---

마치며

html과 css는 쉽다며 처음 학원에서 배운 후 따로 공부를 하지 않았는데 아무것도 없는 상태에서 제작하려고 하니 생각보다 막막했다.

평소에 내가 코드를 손으로 직접 쳐보지 않고 이론으로만 학습한 결과물의 나쁜 예라고 생각한다.

그래도 금방 적응하였기에 다음에는 코드소스가 따로 없는 춘식이를 css로 만들어보려고 한다.