그래픽
배경 background
- background-color : red
- background-image : url("bg.png")
- background-repeat : repeat, no-repeat, repeat-x, repeat-y
- background-attachment : scroll, fixed
- background-position : left top or x% y% or x y
- background-size : 100px 100px or cover or contain
- backgound : tomato url('run.png') no-repeat fixed center; (축약형)
필터 filter
: 이미지에 다양한 효과를 추가하는 방법
img {
-webkit-filter: grayscale(0%); 흑백
-o-filter: grayscale(0%);
filter: grayscale(0%) blur(3px);
}
h1 {
-webkit-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px);
}** 아직 최신기능이라 여러 웹브라우저에 대해 적용해야함
[필터 참고] https://css-tricks.com/almanac/properties/f/filter/
혼합 blend
: 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법
- background-blend-mod 배경 그래픽 간의 블랜드 효과 (background끼리)
: background-imapge와 background-color를 혼합
값 -> color, color-burn, difference, hue 등등
.blend {background-color:red;
background-impge:url('ddd.jpg');
background-blend-mode: color-burn;}- mix-blend-mode 컨텐트와 배경 사이의 블랜드 효과 (background끼리 x)
body{ background-image: url(sample.mt.jpg); }
.blend { mix-blend-mode:screen; }변형 transform
: 엘리먼트의 크기, 위치, 모양을 변경하는 속성
/* Keyword values */
transform: none;
/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5); x축 2배, y축 0.5배
transform: scaleX(2); x축 2배
transform: scaleY(0.5); y축 0.5배
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0,
7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
/* Global values */
transform: inherit;
transform: initial;
transform: unset;[변형 참고] https://codepen.io/vineethtrv/pen/XKKEgM
모션 그래픽
전환 transition
: 효과가 변경되었을 때 부드럽게 처리해주는 기능
- transition-duration
- transition-property
- transition-delay
- transition-timing-function 전환 속도가 달라짐
- transition
transition-property: font-size transform; 전환할 속성 지정
transition-duration: 0.1s; 몇초동안
transition:all 0.1s; 모든 속성에대해서 0.1초동안
transition-delay: 1s; 1초 지연시키고 실행
[timing-function 만들기] https://matthewlein.com/tools/ceaser
유지보수
: 다른 페이지이지만 공통 디자인을 적용할 때 페이지마다 바꾸지 않고 유지보수가 쉽도록 하는 것
1. link태그
: html태그로 css파일을 로드할 때 사용
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>page2</h1>
</body>
</html>** style.css : css공통코드를 옮긴 파일
2. @import
: css 안에서 다른 css 파일을 로드할때 사용
<!doctype html>
<html>
<head>
<style>
@import url("style.css")
</style>
</head>
<body>
<h1>page2</h1>
</body>
</html>코드 경량화 minify
: 코드의 크기를 줄이는 것, 쓸데없는 코드 삭제
-> CSS는 네트워크를 통해서 전송되는데 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해임
-> CSS Clean 도구 사용
-> node Js 설치후 명령프롬포트에서 $cleancss -o minify.min.css min.css
(min.css 파일을 코드 경량화하여 minify.min.css파일로 저장해라)
preprocessor
: 어떤 이들은 CSS에 편리한 기능을 더한 새로운 언어를 만들고 이 언어에 따라서 작성한 코드를 어떤 프로그램으로 실행시키면 결과적으로 CSS를 만들어주는 도구들을 개발했는데, 이런 도구를 preprocessor이라고 한다. -> 에디터의 확장기능
- http://lesscss.org/ (온라인 변환기)
- http://sass-lang.com/
- http://stylus-lang.com/ (온라인 변환기)
라이브러리
fontello
: 딩벳폰트는 폰트 대신 어떤 문자에 해당하는 이미지로 이루어진 폰트를 의미합니다. fontello는 딩벳이나 아이콘을 폰트로 제공하는 여러 서비스를 모아둔 서비스입니다. 특히 SVG 파일을 업로드하면 폰트로 만들어주기도 합니다.
[fontello 사이트] https://fontello.com/
buttons
: 디자인 된 간단한 버튼 CSS 라이브러리 입니다.
[버튼] https://unicorn-ui.com/buttons/
Semantic-UI
: 웹페이지를 구축할 때 사용하는 라이브러리
