[Css] 이미지, 그래디언트 속성

이미지 스프라이트(Image Sprite)란?

• 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청해야하는데, 이미지가 많을 경우 웹 페이지의 로딩 시간이 오래 걸리게 된다.
• 이미지 스프라이트는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지로, 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다.
• 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다.

하나의 이미지를 가지고 네 개의 아이콘을 만드는 예제
.up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
.up { width: 21px; height: 20px; background-position: 0 0; }
.right { width: 22px; height: 20px; background-position: -42px 0; }
.left { width: 22px; height: 20px; background-position: -65px 0; }

 

그래디언트(gradient)

선형 그래디언트(linear gradient)

• 선형 그래디언트 효과의 기본 진행 방향은 위쪽에서 아래쪽으로 진행되며 top, right, bottom, left 뿐만 아니라 대각선으로도 설정할 수 있다.
• 진행 방향을 각도로 명시할 수도 있는데, 기준 각도인 0도는 아래에서 위로 각도가 양수명 기준 각도 중심으로 시계방향으로, 음수이면 반시계방향으로 회전한다.
• 그래디언트에 투명도를 추가할 때에는 RGBA 색상값을 사용하는데 지정된 색상이 서서히 사라지며, 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가진다.

background: linear-gradient(진행방향, 색상지정점1, 색상지정점2, ...);

#grad {
    background: red;
    background: linear-gradient(green, yellow);
    /* 왼쪽 아래에서 오른쪽 위로 */
    background: linear-gradient(to top right, green, yellow);
    /* 225도의 진행 방향을 가지는 선형 그래디언트 */
    background: linear-gradient(225deg, green, yellow);
    /* 왼쪽에서 오른쪽으로 서서히 사라지는 선형 그래디언트 */
    background: linear-gradient(to right, rgba(0,255,0,1), rgba(0,255,0,0));
    /* 그래디언트 효과가 계속 반복 */
    background: repeating-linear-gradient(150deg, red, white 10%, blue 20%);
}

원형 그래디언트(radial gradient)

• 원형 그래디언트는 기본적으로 모양은 ellipse(타원), 크기는 farthest-corner, 중심좌표는 center로 설정된다.

background: radial-gradient(모양 크기 at 중심점, 색상지정점1, 색상지정점2, ...);

#grad {
    background: red;
    background: radial-gradient(red, yellow, orange);
    /* 색상 지정점 사이의 간격을 다르게 설정한 원형 그래디언트 */
    background: radial-gradient(red 5%, yellow 20%, orange 50%);
    /* 원 모양을 가지는 원형 그래디언트 */
    background: radial-gradient(circle, red, yellow, orange);
    /* 그래디언트 효과가 계속 반복 */
    background: repeating-radial-gradient(red, white 10%, blue 20%);
}

#grad {
    /* closest-side 원형 그래디언트가 가장 가까운 면에 닿을 만큼의 크기로 설정 */
    background: radial-gradient(closest-side at 35% 35%, red, yellow, orange);
    /* farthest-side 원형 그래디언트가 가장 먼 면에 닿을 만큼의 크기로 설정 */ 
    background: radial-gradient(farthest-side at 35% 35%, red, yellow, orange);
    /* closest-corner 원형 그래디언트가 가장 가까운 모서리에 닿을 만큼의 크기로 설정 */
    background: radial-gradient(closest-corner at 35% 35%, red, yellow, orange);
    /* farthest-corner 원형 그래디언트가 가장 먼 모서리에 닿을 만큼의 크기로 설정 */
    background: radial-gradient(farthest-corner at 35% 35%, red, yellow, orange);
}

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/