CSS3 Module part2 - by. UXKM

Publishing
CSS
CSS 중급
CSS3 Module part2

요약 설명
CSS3 Module은 W3C의 CSS Working Group이 표준화 작업을 효율적으로 진행하기 위해 CSS를 기능별로 나눈 작은 컴포넌트 단위입니다.
각 모듈은 특정 기능이나 주제에 대한 CSS 속성들을 모아놓은 것으로, 예를 들어 배경과 테두리, 레이아웃, 애니메이션 등을 독립적으로 다룹니다.

CSS3는 공식적인 단일 표준이 아니라 여러 모듈로 구성되며, 각 모듈은 독립적으로 표준화 과정을 거칩니다.
이를 통해 필요한 기능만 선택적으로 사용할 수 있으며, 새로운 요구사항이 발생할 때마다 새로운 모듈이 추가됩니다.

요약 설명
CSS3 Module part-2에서는 CSS3 모듈의 속성 중

CSS basic user interface module Level 3

CSS3 gradient

calc()에 대한 내용을 다루고 있습니다.

CSS basic user interface module Level 3

outline-offset 속성

요소의 가장자리 또는 경계의 간격을 설정합니다.

								div {
									/* <length> values */
									outline-offset: 3px;
									outline-offset: 0.2em;

									/* Global values */
									outline-offset: inherit;
									outline-offset: initial;
									outline-offset: unset;
								}

outline-offset 예제

CSS3 gradient

요약 설명
그래디언트(gradient)란 둘 이상의 색 사이의 색상 표현을 부드럽게 전환해주는 효과를 의미합니다.
CSS3 이전에는 그래디언트 효과를 나타내기 위해서 별도의 여러 이미지 파일을 사용해야만 했지만, CSS3에서는 웹 브라우저가 간단히 그래디언트 효과를 나타낼 수 있게 해줍니다.

CSS3에서 제공하는 그래디언트는 다음과 같이 두 가지 형태가 있습니다.
선형 그래디언트(linear gradients), 원형 그래디언트(radial gradients)

선형 그래디언트(linear gradients)

CSS Module Level 3
선형 그래디언트(linear gradient)는 적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용시킵니다.
선형 그래디언트를 만들기 위해서는 최소한 두 개 이상의 색상 지정점이 필요하며, 각 색상 지정점에는 그래디언트 효과로 부드럽게 전환하고 싶은 색상을 명시합니다.
가장 먼저 정의된 색상 지정점이 시작점이 되며, 마지막 지정점까지 차례대로 그래디언트 효과가 적용됩니다.
브라우저 호환성을 위해 가장 먼저 나오는 background 속성은 linear-gradient를 지원하지 않는 브라우저를 위한 것이며, 벤더 프리픽스로 작성된 코드 다음에 CSS 표준 문법 코드를 작성해야 합니다.

								/* 위 설명글 배경에 적용 된 gradient 코드 */
								div {
									background: linear-gradient(to right, #1e73ff, green);

									/* 구형 브라우저 지원용 (현재는 대부분 불필요 - 이하 예제에서는 생략) */
									/* background: -webkit-linear-gradient(left, #1e73ff, green); */
									/* background: -moz-linear-gradient(left, #1e73ff, green); */
									/* background: -o-linear-gradient(left, #1e73ff, green); */
								}

선형 그래디언트의 진행 방향 설정
선형 그래디언트 효과가 진행될 방향을 설정할 수 있습니다.
선형 그래디언트(linear gradient) 효과의 기본 진행 방향은 위쪽에서 아래쪽으로 진행됩니다.

/* 기본. 위에서 아래로 진행(↓) */ div { background: linear-gradient(red, blue); }

그래디언트의 진행 방향은 top, right, bottom, left 뿐만 아니라 대각선으로도 설정할 수 있습니다.

/* 오른쪽에서 왼쪽으로 진행(←) */ div { background: linear-gradient(to left, red, blue); } /* 오른쪽 아래에서 왼쪽 위로 진행(↖) */ div { background: linear-gradient(to top left, red, blue); }

선형 그래디언트 효과의 진행 방향을 각도로 명시하여 설정할 수도 있습니다.
각도가 양수일 때는 기준 각도를 중심으로 시계방향으로 회전하며, 음수일 때는 반시계방향으로 회전합니다.
기준 각도인 0도(12시 방향)는 시계 중심에서 위쪽(↑)으로의 진행을 의미합니다.
ex) 45deg(↗), 135deg(↘), 225deg(↙), 315deg(↖)

/* 45도를 기준으로 진행(↗) */ div { background: linear-gradient(45deg, red, blue); }
선형 그래디언트의 투명도 설정
CSS3에서는 그래디언트의 투명도를 지원하며, 지정된 색상이 서서히 사라지는 효과를 사용할 수 있습니다.
그래디언트에 투명도를 추가할 때에는 RGBA 색상값을 사용하면 됩니다.
RGBA 색상값의 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다.

/* 45도(↗)를 기준으로, 빨강색으로 시작하여 50%만큼 투명한 파랑색으로 진행됩니다. */ div { background: linear-gradient(45deg, rgba(255,0,0,1), rgba(0,0,255,0.5)); }
반복 그래디언트(Repeating Gradients)
repeating-linear-gradient() 메소드는 선형 그래디언트 효과가 계속 반복되도록 설정합니다.

div { background: repeating-linear-gradient(150deg, red, white 10%, blue 20%); }

선형 그래디언트(linear gradients) 예제

원형 그래디언트(radial gradients)

CSS Module Level 3
원형 그래디언트(radial gradient)는 적용된 HTML 요소에 원형으로 그래디언트(gradient) 효과를 적용시킵니다.
원형 그래디언트를 만들기 위해서는 최소한 두 개 이상의 색상 지정점이 필요하며, background: radial-gradient(모양 크기 at 중심점, 색상지정점1, 색상지정점2, ...); 형태로 사용합니다.
원형 그래디언트는 기본적으로 모양은 ellipse(타원), 크기는 farthest-corner, 중심좌표는 center로 설정됩니다.

								div {
									background: radial-gradient(red, orange, yellow, green, blue, indigo, purple);
								}

색상 지정점 사이의 간격 조절
원형 그래디언트에서 색상 지정점 사이의 간격을 조절할 수 있습니다.

div { background: radial-gradient(red 5%, yellow 20%, orange 50%); }
원형 그래디언트의 모양 설정
원형 그래디언트의 모양을 타원이 아닌 원으로도 설정할 수 있습니다.

div { background: radial-gradient(circle, red, yellow, orange); }
원형 그래디언트의 크기 설정
CSS를 이용하면 원형 그래디언트의 크기를 설정할 수 있다. 이때 크기를 나타내기 위해 사용할 수 있는 매개변수는 다음과 같습니다.
1. 3.1. closest-side
  원형 그래디언트의 크기가 가장 가까운 면에 닿을 만큼의 크기로 설정됩니다.
2. 3.2. farthest-side
  원형 그래디언트의 크기가 가장 먼 면에 닿을 만큼의 크기로 설정됩니다. 따라서 가까운 면에서는 그래디언트의 일부분이 화면을 넘을 것입이다.
3. 3.3. closest-corner
  원형 그래디언트의 크기가 가장 가까운 모서리에 닿을 만큼의 크기로 설정됩니다.
4. 3.4. farthest-corner
  원형 그래디언트의 크기가 가장 먼 모서리에 닿을 만큼의 크기로 설정됩니다. 이 크기가 기본 설정이며, 가까운 모서리에서는 그래디언트의 일부분이 화면을 넘을 것입이다.
.box1 { background: radial-gradient(closest-side at 35% 35%, red, yellow, orange); } .box2 { background: radial-gradient(farthest-side at 35% 35%, red, yellow, orange); } .box3 { background: radial-gradient(closest-corner at 35% 35%, red, yellow, orange); } .box4 { background: radial-gradient(farthest-corner at 35% 35%, red, yellow, orange); }
반복 그래디언트(Repeating Gradients)
repeating-radial-gradient() 메소드는 원형 그래디언트 효과가 계속 반복되도록 설정합니다.

div { background: repeating-radial-gradient(red, white 10%, blue 20%); }

CSS3 그래디언트 예제

calc()

CSS Values and Units Module Level 3
calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다.
<length>, <frequency>, <angle>, <time>, <percentage>, <number>, 또는 <integer>를 받는 속성의 값으로 사용할 수 있습니다.
calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.
피연산자로는 <length> 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있으며, 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.

+ 덧셈.
- 뺄셈.
* 곱셈.
하나 이상의 피연산자가 <number>여야 합니다.
/ 나눗셈.
오른쪽 피연산자는 <number>여야 합니다.

calc() 계산순서

왼쪽에서 오른쪽으로 계산합니다.
사칙연산과 마찬가지로 곱셈(*), 나눗셈(/)이 먼저 연산되며, 덧셈(+), 뺄셈(-)은 나중에 연산됩니다.
괄호가 있으면 괄호 안부터 계산합니다.

calc() CSS 함수 사용시 참고사항은 아래와 같습니다.

0으로 나누면 CSS 파서에서 오류가 발생합니다.
calc(100% - 20px)과 같이 덧셈(+), 뺄셈(-) 연산자의 경우 앞뒤 공백이 반드시 필요하지만, 곱셈(*), 나눗셈(/)은 공백이 필요하지 않습니다.
하지만 일관성을 유지하기 위해 모든 연산자에 공백을 사용하는 것을 권장합니다.
calc(50% -8px)은 백분율 값과 음수 길이로 해석되어 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석됩니다.
마찬가지로, calc(8px + -50%)는 길이와 음의 백분율 간의 덧셈으로 처리됩니다.
표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 auto 키워드를 사용한 것과 동일하게 처리됩니다.
calc() 함수를 중첩해서 사용하면 내부의 calc()는 단순한 괄호로 간주됩니다.

							/* 전체 너비에서 100px만큼만 작은 크기를 구할 때 */
							.box1 {
								width: calc(100% - 100px);
							}

							/* 전체 너비에서 중간에 60px 만 띄우고 싶을 경우 */
							.box1, .box2 {
								float: left;
								width: calc(50% - 30px);
							}
							.box2 { margin-left: 60px;}

							/* 각 요소 사이에 글꼴의 4배(4em) 만큼 간격을 두고 싶을때 */
							.box1, .box2 {
								width: calc(50% - 2em);
							}

							/* 두 요소를 2px의 테두리로 둘러싸고 싶을때 */
							.box1, .box2 {
								width: calc(50% - 2em - 4px);
								border: 2px solid #000;
							}

							/* 복잡한 연산공식을 사용해야 하는 경우 */
							.box1, .box2 {
								width: calc((50% + 2em)/2 + 14px);
							}