멋쟁이 사자처럼_1104

수업

css를 본격적으로 배우기 시작했다.

p {
   font-size: 10px;	
   color: red;}

여기에서 p는 선택자(selector), font-size, color는 프로퍼티(property),
10px, red는 값(value)이다.
그리고 font-size: 10px;는 선언(declaration)이다.

나만의 캐릭터 만들기!

radius, z-index, transform: rotate(-80deg), position: absolute;
사용해서!

padding

padding: 10px 20px 30px 40px;

(위 오른 아래 왼)

        | |

padding-top: 10px 

padding-right: 20px 

padding-bottom: 30px 

padding-left: 40px

---

padding: 10px 20px 30px;

        | |

padding-top: 10px 

padding-right: 20px 

padding-bottom: 30px 

padding-left: 20px

---

padding: 10px 200px;

        | |

padding-top: 10px 

padding-right: 200px 

padding-bottom: 10px 

padding-left: 200px

color

R G B

00 00 00

ff ff ff

ff0000: red

00ff00: green

0000ff: blue

000000: black

ffffff: white

투명도는 00000000 으로도 표현은 가능하지만,

그것 보다는

  background: rgba (255, 0, 0, 투명도);  

생각

캐릭터, 잘 하면 나도 만들겠다. 라고 생각했다.
일러스트랑 인디자인을 배울 때는 이렇게 만드는게 쉬워서 그랬다.

어려웠다.

생각하는 이미지를 css로 구현하는게 쉬운 일은 아니었다.
결국 타협해버린 것들이 있었다.
예를 들면, 엄지척 모양, 고양이 입같은 부분.
또 사용가능한 css를 어떻게 활용해서 만들어볼지에 대한
이해가 좀더 있으면 더 잘 만들 수 있었겠다고 느꼈다.

결과물:

다음에는 몸통과 배경까지 만들 수 있는 이해도를 가지고 싶다.

느낀점

지금 배운 것으로도 정말 다양하게 만들 수 있지만,
더 많은 것을 만들어 보고 싶다.
좀더 활용하는 방법을 공부해야겠다.
css를 잘 활용하면 정말 무궁무진한 것들을 만들 수 있겠다.
다양한 애니메이션을 넣어서 역동적인 것을 만들어 보고 싶다.

계획

• 구현하지 못하고 타협해버린 것, 주말 동안 만들어보기!
  (애니메이션도 넣어서!)

• fixed 연습해보기.

피드백