CSS Functions

2014.05.22/네이버_박재성
https://www.flickr.com/photos/hjl/9733537231

CSS 속성과 결합해 사용되는 함수로, 전달되는 파라미터에 따라 결과 값이
달라지며 함수 단독으로는 사용될 수 없다.
url()
이미지 리소스를 사용할 수 있도록 한다.
What are CSS functions?
.sprite {
background-image:url(http://img.naver.net/static/background.png);
}

attr()
calc()
linear-gradient() / radial-gradient()
color-stop()
counter() / counters()
var()
rect()
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
rgb() / rgba()
hsl() / hsla()
cubic-bezier()
steps()
matrix()
matrix3d()
rotate3d()
rotateX() / rotateY() / rotateZ()
scale() / scale3d() / scaleX() / scaleY() / scaleZ()
skew() / skewX() / skewY()
translate() / translate3d()
translateX() / translateY() / translateZ()
perspective()
List of CSS functions

요소의 속성 값을 얻기 위해 사용
<p data-foo="hello">world</p>
 hello world
*content 속성은 :before, :after 가상 선택자와 같이 사용되며 컨텐츠를 삽입
attr()
p:before {
content:attr(data-foo) " ";
}

계산식을 수행
<length>, <frequency>, <angle>, <time>, <number>, or <integer> 값이
적용되는 곳에 사용가능하며, 사칙연산을 통한 계산식을 수행한다.
calc()
.banner {
width: calc(100% - 80px);
}

linear-gradient() #1
요소에 linear 그라데이션을 적용한다.
• background-image : linear-gradient(start position, color(start) n%, color(stop) n%);
 Start position:
x축 시작점을 left로 지정 시 종료는 right, right가 시작점이면 종료는 left
y축 시작점을 top으로 지정 시 종료는 bottom, bottom이 시작점이면 종료는 top
• 모든 최신버전의 모던 브라우저에서 prefix를 통해 사용가능
(1)
(2)
 (1) background-image : linear-gradient(left, red 35%, yellow 70%);
 (2) background-image : linear-gradient(left top, red 35%, yellow 70%);

linear-gradient() #2
• WebKit 계열 브라우저에서는 아래와 같은 방식으로 표현될 수도 있음
 IE 이전 버전에서는 filter를 사용해 그라데이션을 적용할 수 있음
/* IE 5.5 ~ 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=red, endColorstr=yellow);
/* IE 8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=red, endColorstr=yellow)";
 background-image: -webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0.35, red),
color-stop(0.70, yellow)
);

요소에 radial 그라데이션을 적용한다.
• background-image : radial-gradient([shape | size,] color n%, color n%, …);
• Shape : ellipse (기본값), circle
• Size Constant
(1)
Constant Description
closest-side
The gradient's ending shape meets the side of the box closest to its center (for circles
) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-corner
The gradient's ending shape is sized so it exactly meets the closest corner of the box
from its center.
farthest-side
Similar to closest-side, except the ending shape is sized to meet the side of the box
farthest from its center (or vertical and horizontal sides).
farthest-corner
The gradient's ending shape is sized so it exactly meets the farthest corner of the box
from its center.
(2)
(3)
radial-gradient()
 (1) background-image: radial-gradient(red 5%, yellow 25%, blue 50%, white);
 (2) background-image: radial-gradient(closest-side, red 5%, yellow 25%, blue 50%, white);
 (3) background-image: radial-gradient(circle closest-side, red 5%, yellow 25%, blue 50%, white);

CSS가 관리하는 값으로, 룰에 의해 사용횟수에 따라 증가
• counter-reset : <name> - 새로운 카운터 인스턴스 생성
• counter-increment : <name> - 생성된 인스턴스의 카운터를 사용해 증가
• counter(<name>) - 단일 항목 출력
• counters(<name>, <구분 문자열>) - 중첩 항목의 값 출력
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
Section 1: Introduction
Section 2: Body
Section 3: Conclusion
counters
body { counter-reset: section; }
h3:before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

반복적으로 사용되는 값을 변수의 형태로 저장해 사용
변수명은 ‘--‘ 접두 문자를 붙여 사용
변수의 값은 var()함수를 통해 사용
*FF31 nightly 지원
var()
ol {
background-color:var(--color);
}
:root { --color: red; } // 정의

사각형 형태의 영역을 지정한다.
clip은 특정 영역만 보여지도록 처리하는 속성
position:absolute인 경우에만 적용
ie8+
rect()
img.clip {
position:absolute;
clip: rect(10px, 20px, 20px, 10px);
}
rect(<top>, <right>, <bottom>, <left>)

• blur(npx) : 0 ~ npx
• brightness(n) : 1 ~ 100
• contrast(n%) : 0 ~ n%
• drop-shadow(<offset-x> <offset-y> [<blur-radius> <spread-radius> <color>])
• grayscale(n) : 0 ~ 1
• hue-rotate(ndeg) : 0 ~ 360deg
• invert(n%) : 0 ~ 100%
• opacity(n) : 0 ~ 1
• saturate(n) : 0 ~ 100
• sepia(n%) : 0 ~ 100%
요소에 다양한 필터를 적용
여러개의 필터가 동시에 사용될 수 있다.
-webkit-filter: grayscale(0.5) blur(10px);
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
http://www.propra.nl/playground/css_filters/
* webkit만 지원
filter

Red-Green-Blue model (RGB)
rgb(), rgba()
Hue-Saturation-Luminosity model (HSL)
hsl(), hsla()
http://hslpicker.com/
color
color : rgb(255, 0, 0) /* red */
color : rgba(255, 0, 0, 0.5) /* red, 50% opaque */
color : hsl(0, 100%, 50%) /* red */
color : hsla(0, 100%, 50%, 0.1) /* red, 10% opaque */

애니메이션 진행시 중간 값을 계산하는 방법으로 베지어 곡선을 이용
cubic-bezier(x1, y1, x2, y2)
http://cubic-bezier.com/
http://easings.net/
Timing-function #1
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

애니메이션 프레임 수를 지정
direction :
• start : left-continuous function
프레임 시작 시점에 진행
• end : right-continuous function
프레임 종료 시점에 진행
https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/
Timing-function #2
steps(number_of_steps[, direction])
-webkit-animation: keyframe 10s steps(10, end);
steps(1, start)  step-start
steps(1, end)  step-end

matrix()
matrix3d()
rotate3d()
rotateX() / rotateY() / rotateZ()
scale() / scale3d() / scaleX() / scaleY() / scaleZ()
skew() / skewX() / skewY()
translate() / translate3d() / translateX() / translateY() / translateZ()
perspective()
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
http://www.vanseodesign.com/blog/demo/transforms/
Transform-function
transform : 함수(파라미터) [함수(파라미터) … ];

• 특정 상태의 요소를 선택할 수 있도록 셀렉터에 추가되는 키워드
• 함수 표현식을 통해 사용되는 형태 존재
Pseudo-class?
:dir()
:lang()
:not()
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()

• :dir(ltr|rtl)
방향에 따른 가상 클래스 선택자
- ltr : left-to-right
- rtl : right-toleft
• :lang(lang)
언어에 따른 가상 클래스 선택자
요소에 lang 속성 값이 설정되어야 한다.
Pseudo-class #1
p:-moz-dir(rtl) {
color:red;
}
 <p dir=“rtl”>this is red</p>
div:lang(fr) { … }
 <div lang=“en”>hello</div>
• :not(selector)
셀렉터와 부합되지 않는 조건의
가상 클래스 선택자
p:not(.test) {
color:blue;
}
 <p class=“test”>text1</p>
 <p>this is blue</p>

• :nth-child()
2n+1, odd : 홀수만 선택
2n, even : 짝수만 선택
0n+1, 1 : 첫 번째 자식 노드
-n+3 : 처음 3개의 자식 노드에 속하는 경우
Ex) 3의 배수인 요소들만 선택
:nth-child(3n+3)
 (3x0) + 3 = 3
 (3x1) + 3 = 6
 (3x2) + 3 = 9
 …
http://css-tricks.com/how-nth-child-works/
http://css-tricks.com/useful-nth-child-recipies/
Pseudo-class #2
element:nth-child(an + b) { style properties }
 a - cycle size
 n - counter (0부터 시작)
 b - offset value

• :nth-last-child()
후행 기준으로 선택
-n+4 : 마지막 4개
even : 마지막을 기준으로 짝수
• :nth-of-type()
요소의 타입의 순서를 통한 선택
• :nth-last-of-type()
요소의 타입을 통한 후행 기준 선택
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
http://css-tricks.com/examples/nth-child-tester/
Pseudo-class #3
 tr:nth-last-child(-n+3); /* 뒤에서 마지막 3개의 tr 요소 */
 span:nth-of-type(even); /* span 요소들 중, 짝수 */
 span:nth-last-of-type(2)

고
맙
습
니
다
.
http://www.flickr.com/photos/sweetjessie/4521079727
http://jindo.dev.naver.com/
http://jindo.dev.naver.com/blog/

CSS Functions

More Related Content

Similar to CSS Functions (20)

More from Jae Sung Park (20)

CSS Functions