해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 CSS3 lesson 11~14의 내용인 벤더 프리픽스, shadow, gradient, transition에 대해 알아보겠습니다.
11. 벤더 프리픽스(Vendor Prefix)
CSS3 표준으로 확정되기 이전 or 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 합니다.
구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용해야 할 필요가 있습니다.
Can I use?에서 브라우저별 CSS 지원 정보를 제공하고 있으니 참고 바랍니다.
Prefix Free 사이트에서 라이브러리를 다운로드하고 include 하기만 하면 이 후에는 벤더 프리픽스없이 모든 CSS를 사용할 수 있습니다.
<script src="prefixfree.min.js"></script>
12. 그림자(Shadow)
텍스트나 요소에 그림자 효과를 부여합니다.
text-shadow
텍스트에 그림자 효과를 부여하며 포맷은 다음과 같습니다.
선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; }
프로퍼티 값은 다음과 같습니다.
Horizontal-offset
: 그림자를 텍스트의 오른쪽으로 지정 값 만큼 이동, 단위 : px
Vertical-offset
: 그림자를 텍스트의 아래로 지정 값 만큼 이동, eksdnl : px
Blur-Radius
: 그림자의 흐림 정도를 지정하며 지정 값만큼 그림자가 커지고 흐려짐, 단위 : px(양수) ****- 생략 가능
Shadow-Color
: 그림자의 색상 지정 - 생략 가능
box-shadow
요소에 그림자 효과를 부여하며 포맷은 다음과 같습니다.
선택자 { box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shadow-Color; }
위에서 본 text-shadow 프로퍼티 값 4개를 쓸 수 있으며, 추가적으로 쓰이는 프로퍼티 값은 다음과 같습니다.
Inset
: 그림자가 요소 안쪽에 위치, 단위 : inset - 생략 가능
Spread
: 그림자를 더 크게 확장시킴 단위 : px(음수, 양수) - 생략 가능
13. 그레이디언트(Gradient)
2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성합니다.
선형
그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally)
방사형
그레이디언트 (Radial Gradient: defined by their center)
브라우저에 따라 조금씩 문법이 상이하여 직접 작성하기가 어려울 수 있습니다.
직접 작성하는 것보다는 작성 툴을 이용하는 것이 일반적 입니다.
- 작성 툴 : https://cssgradient.io/
- 참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/gradient/linear-gradient
14. 트랜지션(Transition)
CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 합니다.
값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절하는게 transition 입니다.
div {
width: 100px;
height: 100px;
background: red;
/* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
transition: all 2s;
}
div:hover {
border-radius: 50%;
background: blue;
}
div
셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) 모두 트랜지션이 발동합니다.
하지만 div:hover
셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때는 트랜지션이 발동하지만 마우스가 내려올 때는 트랜지션이 발동하지 않습니다.
또, transition은 자동으로 발동되지 않으며 :hover
와 같은 가상 클래스 선택자 or JavaScript의 부수적인 액션에 의해 발동됩니다.
transition-property
트랜지션의 대상이 되는 CSS 프로퍼티를 지정합니다.
지정하지 않는 경우 모든 프로퍼티가 대상이 됩니다. (기본 값 all)
여러 개의 프로퍼티를 지정할 때에는 쉼표로 구분합니다.
주의해야 할 점은 모든 프로퍼티가 대상이 될 수 없으며 대상이 되는 프로퍼티는 다음과 같습니다.
// Box model
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing
// Background
background-color background-position
// 좌표
top left right bottom
// 텍스트
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing
// 기타
opacity outline-color outline-offset outline-width
visibility z-index
하지만 요소의 프로퍼티 값이 변화하면 위치와 크기를 계산하여 layout 작업을 수행하기에 브라우저에 스트레스를 주게 됩니다.
이는 성능 저하의 요인이 되기에 해당 효과의 사용을 지양하는 것이 좋습니다.
layout에 영향을 주는 프로퍼티
width height padding margin border
display position float overflow
top left right bottom
font-size font-family font-weight
text-align vertical-align line-height
clear white-space
transition-duration
트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정합니다.
기본 값이 0s으로 지정하지 않을 경우 어떠한 효과도 볼 수 없습니다.
div {
/* property랑 duration가 1:1로 대응함 */
transition-property: width, opacity;
transition-duration: 2s, 4s;
}
div {
/* 축약 표현 */
transition: width 2s, opacity 4s;
}
transition-timing-function
트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정합니다.
ease
: 기본 값, 느리게 시작하여 점점 빨라졌다가 느려지면서 종료
linear
: 시작부터 종료까지 등속 운동
ease-in
: 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동
ease-out
: 일정한 속도의 등속으로 시작해서 점점 느려지면서 종
ease-in-out
:ease
와 비슷하게 느리게 시작하여 느려지면서 종료
transition-delay
프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정합니다.
일정 시간 대기한 후 실행되며, 기본 값 0s 입니다.
transition
transition: property duration function delay
모든 트랜지션 프로퍼티를 한번에 지정할 수 있는 축약 표현입니다.
값을 지정하지 않는 프로퍼티에는 기본 값이 지정되며, transition-duration
이 반드시 지정되어야 트랜지션이 실행됩니다.
여기까지 벤더 프리픽스, shadow, gradient, transition에 대해 알아보았습니다.