생활코딩 css 공부하기5

 

생활코딩 css강의를 다 들었다.

2020.03.05

어제 하루 휴식을 취하고 오늘은 css강의를 다 들었다.

사실 뒷부분은 어려운 면도 있고 아직 규모가 큰 웹사이트를 만들 일이 없기 때문에 필요한 부분만 들었다.

 

transfrom_1

엘리먼트의 크기조정이나 회전을 하는 기능이다.

transform의 효과를 알려주는 사이트

 

transform_2

transform의 단위를 알려주는 사이트

 

sgv1

벡터 이미지를 저장하는 표준화된 기구이다.

오픈 되어있느 기술이다.

다양한 아이콘을 지원해주는 사이트

 

bitmap vs vector 

벡터는 이미지를 확대해도 이미지깨짐현상이 일어나지 않는다.

 

sgv2

복잡한 그래픽도 svg를 이용해서 표현할 수 있다.

svg를 깊게 공부할 수 있는 사이트

 

transition_1

움직임을 자연스럽게 만들어준다.

transition-duration
transition-property

 

transition_2

transition-delay은 장면전환 효과를 약간의 시간차를 두고 적용하는 효과이다.
transition-timing-function에 대한 사이트

가속도효과 탄력적 효과 등을 지정할 수 있다.

 

유지보수

link와 import

css를 여러 사이트에 적용해야할때 사용한다.

소스코드가 줄어들고 이해하기 쉬워지는 효과가 있다.

 

코드의 경량화(minify)

css파일의 크기를 작게한다.

clean-css사이트

코드의 띄어쓰기를 무시하고 작성해준다.

 

css뛰어넘기(preprocessor)과 libray는 어렵기도하고 듣다가 좀더 배우고 들어야할 것 같다고 생각해서 넘어갔다.

 

오늘의 메모장

 

2020.03.05
하루 쉬고 다시 시작한다.

transfrom
엘리먼트의 크기 회전 등을 하는 기능이다.
포토샵과 비슷하다.
css3부터 적용된다.
transform효과는 중복이아니라 밑에 있는 것을 우선적으로 한다.
중복하고 싶으면 하나의 코드로 작성한다.
transform효과를 알려주는 사이트이다.
https://codepen.io/vineethtr/pen/XKKEgM
효과가 rotate, skew 등 다양하다.

transform2
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transform의 단위를 알려주는 사이트
구글에 css transform library 검색해서 괜찮은 것을 찾아서 적용해보면된다.

SVG
벡터 이미지를 저장하는 표준하된 기구이다.
오픈되어있는 기술이다.
vector vs bitmap
벡터는 이미지를 확대해도 이미지깨짐현상이 없다.
https://thenounproject.com/
다양한 아이콘을 지원해주는 사이트이다.
가입해야되서 다운 안받았다.

svg2
큰 분야이다.
텍스트로 이루어져있다.
복잡한 그래픽도 svg를 이용해서 표현할 수 있다.
http://tutorials.jenkov.com/svg/index.html
svg를 깊게 공부할 수 있는 사이트
활용성이 무궁무진하다.

모션그래픽
transition
전환 이라는 뜻이다.
움직임을 자연스럽게 만들어준다.
transition-duration
transition-property

transition2
transition-delay은 장면전환 효과를 약간의 시간차를 두고 적용하는 효과이다.
transition-timing-function에 대한 사이트
https://matthewlein.com/tools/ceaser
가속도효과 탄력적인 효과등을 줄 수 있다.
코드팬에서 트렌지션을이용한 사례를 찾아보라고한다.

유지보수
link와 import
천개의 css를 변경해야한다면 어떻게 해야할까?
하지 못하면 디자인의 제약이 생긴다.
프로그램으로 코드를 만들때 좋은 코드는 증복을 제거하는 것이다.
link태그를 이용해서 css를 불러온다.
한번에 변경이 가능하다.
코드를 쓸때 이 코드가 무한으로 사용된다고 생각해야한다.
소스코드가 줄어들고 이해하기가 좋아진다.

코드의 경량화minify
css파일의 크기를 작게한다.
방문자수가 많을 때 사용한다.
http://adamburgess.github.io/clean-css-online/
clean-css 사이트
코드의 띄어쓰기를 무시하고 작성하게 해준다.

css뛰어넘기 preprocessor
표준안의 확정은 어렵다.
문법을 새로 도입하면 강력해지지만 언어를 이해하는것이 어렵기때문에 힘들다.
https://stylus-lang.com/
preprocessor의 사이트중에 하나이다.
문법과 css변환기가 있다.

library
중요한 라이브러리들의 사용법을알아본다.
fontello.com 서비스
http://fontello.com/
사이트
벡터방식의 이미지를 웹사이트에 추가할 수 있는 사이트

button 라이브러리도 있다.
http://unicorn-ui.com/buttons/

semantic UI
웹사이트를 만들때 사용하는 여러가지 interface 중에서 자주 사용되는 것들을 미리 만들어 놓은 라이브러리다.
다들었다.
중간에 어려운 과정은 넘어갔지만 목표는 이루었다.

 

이제 javascript를 배워야겠다.

복습도 해야겠다.

슬슬 까먹는다.