CSS/자료형

분류

스타일 시트 언어

상위 문서: CSS

1. 개요

2. 목록

2.1.

2.1.1. 헥스 코드

2.1.2. 함수형 표기법

2.1.3. 키워드

2.2.

2.2.1. 선형 그래디언트

2.2.2. 원형 그래디언트

2.2.3. 원뿔 그래디언트

2.2.4. 반복 그래디언트

1 . 개요[편집]

CSS의 속성에 값으로 들어갈 수 있는 자료형들에 대해 서술하는 문서이다. 속성에서 자료형이 사용되는 형식을 나타낼 때 꺾쇠괄호(<>)로 묶어서 표현한다.

2 . 목록[편집]

전체 자료형은 MDN의 CSS 자료형 페이지에서 확인할 수 있다.

2.1 . <color>[편집]

색을 나타내는 값이다.

background-color

,

color

등의 속성에서 값으로 쓰인다.

2.1.1 . 헥스 코드[편집]

자세한 내용은 헥스 코드 문서를 참고하십시오.

2.1.2 . 함수형 표기법[편집]

```
rgb(R, G, B)
```
/
```
rgb(R G B)
```

RGB를 각각 0~255의 숫자로 입력하는 방식이다. 각 숫자를 16진수로 바꿔 # 앞에 이어서 적은 게 헥스 코드이다.

```
rgba(R, G, B, A)
```
/
```
rgba(R G B / A)
```

RGB에 투명도를 추가한 버전. 투명도 A는 0~1의 소수점 숫자 혹은 퍼센트() 값이다.

```
hsl(H, S, L)
```
/
```
hsl(H S L)
```

HSL(Hue Saturation Lightness)를 함수형으로 입력하는 방식이다. RGB와 달리 색의 채도와 밝기가 명시적으로 입력되어 있기 때문에 글자만 보고도 어떤 색일지 유추하기가 쉽다.

H

원통형 색공간에서 각도() 값을 받아 색상을 나타낸다. RGB에 비유하자면 0°, 360°가 R이고 120°가 G, 240°가 B이다.

S

채도를 의미하며 퍼센트() 값을 받는다. 0%일 경우, 무채색이 되어 H의 값이 아무 효력이 없어지다.

L

밝기를 의미하며 퍼센트() 값을 받는다. 0%가 검은색, 100%가 흰색을 나타낸다.

```
hsla(H, S, L, A)
```
/
```
hsla(H S L / A)
```

HSL에 투명도를 추가한 버전. 투명도 A는 0~1의 소수점 숫자 혹은 퍼센트() 값이다.

2.1.3 . 키워드[편집]

색상 키워드

특정 색상을 나타내는 키워드이다. white, red와 같이 단순한 색이름으로 입력한다. 모든 색상 키워드는 해당 문서 참조.

```
transparent
```

완전한 투명을 의미한다. rgba(R, G, B, 0), hsla(H, S, L, 0)와 똑같이 표시된다.

```
currentColor
```

말 그대로 현재 색을 의미한다. 해당 요소의 글자색인 color 속성 값을 따라간다. 대소문자를 구분하지 않아 currentcolor로 사용해도 된다.

시스템 색상

웹 페이지의 특정 부분에 사용되는 기본 색상을 의미한다. 대소문자를 구분하지 않는다.

```
ActiveText
```
```
ButtonBorder
```
```
ButtonFace
```
```
ButtonText
```
```
Canvas
```
```
CanvasText
```
```
Field
```
```
FieldText
```
```
GrayText
```
```
Highlight
```
```
HighlightText
```
```
LinkText
```
```
Mark
```
```
MarkText
```
```
VisitedText
```

2.2 . <gradient>[편집]

그라데이션을 나타내는 자료형이다.

background-image

등의 속성에서 자주 사용된다.

2.2.1 . 선형 그래디언트[편집]

linear-gradient(...)

직선적인 그래디언트를 만드는 문법이다.

2.2.2 . 원형 그래디언트[편집]

radial-gradient(...)

타원 방사형으로 퍼지는 그래디언트를 만드는 문법이다.

2.2.3 . 원뿔 그래디언트[편집]

conic-gradient(...)

점을 중심으로 돌아가는 그래디언트를 만드는 문법이다.

2.2.4 . 반복 그래디언트[편집]

repeating-linear-gradient(...)

repeating-radial-gradient(...)

repeating-conic-gradient(...)

위에서 나온 그래디언트들을 반복시키는 문법이다.

이 문서의 내용 중 전체 또는 일부는 2024-04-06 13:46:22에 나무위키 CSS/자료형 문서에서 가져왔습니다.

CSS/자료형

분류

1. 개요[편집]

2. 목록[편집]

2.1. <color>[편집]

2.1.1. 헥스 코드[편집]

2.1.2. 함수형 표기법[편집]

2.1.3. 키워드[편집]

2.2. <gradient>[편집]

2.2.1. 선형 그래디언트[편집]

2.2.2. 원형 그래디언트[편집]

2.2.3. 원뿔 그래디언트[편집]

2.2.4. 반복 그래디언트[편집]

관련 문서