CSS 속성 생성기

CSS 속성 생성기는 사용자가 코드를 직접 입력하는 대신, 슬라이더와 색상 선택기 세트를 사용해 시각적 효과를 위한 CSS 코드를 만들어 주는 도구입니다. 이 생성기는 그라디언트, 박스 그림자, 테두리 반경, 텍스트 그림자의 네 가지 효과를 지원합니다. 각 패널에는 실시간 미리 보기가 표시되며 바로 복사할 수 있는 CSS가 생성됩니다.

생성되는 항목

• 그라디언트: 두 색상 사이의 선형 또는 방사형 색상 전환
• 박스 그림자: 오프셋, 흐림, 확산, 색상 및 불투명도를 조절할 수 있는 요소 주변의 드롭 그림자 또는 내부 그림자
• 테두리 반경: 네 모서리에 모두 같은 값을 적용하거나 각각 설정할 수 있는 둥근 모서리
• 텍스트 그림자: 오프셋, 흐림, 색상 및 불투명도를 조절할 수 있는 텍스트 뒤의 그림자

모든 설정은 미리 보기와 생성된 CSS를 동시에 업데이트하므로 코드를 복사하기 전에 변경 사항을 확인할 수 있습니다.

CSS 선형 그라디언트 계산 방법

선형 그라디언트는 직선을 따라 한 색상에서 다른 색상으로 바뀝니다. CSS 구문은 다음과 같습니다.

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

각도는 0에서 360까지 도 단위로 측정됩니다. position1과 position2는 그라디언트 길이에 대한 백분율로 각 색상이 최대 강도에 도달하는 위치를 설정합니다.

풀이 예시

생성기의 시작 값은 90도 각도, #ff5f6d 색상은 0%, #ffc371 색상은 100%입니다. 그러면 다음이 생성됩니다.

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

첫 번째 줄은 어떤 이유로 그라디언트를 렌더링하지 못하는 브라우저를 위한 일반 색상 대체값입니다. 두 번째 줄은 그라디언트 자체입니다.

방사형 그라디언트 공식

방사형 그라디언트는 선을 따라 퍼지는 대신 중심점에서 바깥쪽으로 퍼집니다.

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

이 생성기는 항상 원형 방사형 그라디언트를 생성합니다. 타원 모양 옵션이나 중심점을 이동하는 방법은 제공하지 않으며, 두 색상과 색상 중지 위치만 변경할 수 있습니다.

이 도구의 두 그라디언트 유형은 모두 Color 1 및 Color 2 선택기로 설정하는 정확히 두 가지 색상을 사용합니다. 세 번째 색상 중지를 추가하는 옵션은 없습니다.

CSS 박스 그림자 공식

박스 그림자는 요소의 가장자리 주변에 그려지는 그림자입니다.

1box-shadow: h-offset v-offset blur spread color;
2

h-offset과 v-offset은 그림자를 좌우 및 상하로 이동합니다. 양수 값은 그림자를 오른쪽이나 아래쪽으로 밀고, 음수 값은 왼쪽이나 위쪽으로 밉니다. blur는 그림자 가장자리를 부드럽게 하며, 값이 클수록 부드러운 영역이 더 넓게 퍼집니다. spread는 흐림 효과를 적용하기 전에 그림자의 크기를 키우거나 줄입니다. 오프셋 앞에 inset 키워드를 추가하면 그림자가 요소 바깥이 아니라 테두리 안쪽에 그려집니다.

풀이 예시

기본 설정(가로 오프셋 5px, 세로 오프셋 5px, 흐림 10px, 확산 0px, 불투명도 20%의 검은색)에서는 도구가 다음을 출력합니다.

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

색상 선택기의 불투명도 슬라이더는 0에서 100까지이며, rgba()가 사용하는 0에서 1까지의 범위로 변환됩니다. 따라서 20%는 0.2가 됩니다.

CSS 테두리 반경 공식

테두리 반경은 요소의 모서리를 둥글게 만듭니다. 두 가지 형식이 있습니다.

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

네 모서리가 하나의 값을 공유하면 생성기는 축약형을 작성합니다. 값이 서로 다르면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 네 값을 나열합니다.

풀이 예시

기본 반경은 모든 모서리에 10px입니다.

1border-radius: 10px;
2

원형 아바타 이미지는 일반적으로 대신 border-radius: 50%를 사용하지만, 이 값은 생성기 슬라이더가 허용하는 범위(0~100픽셀)를 벗어납니다.

CSS 텍스트 그림자 공식

텍스트 그림자는 박스 그림자와 비슷하게 작동하지만 확산 값이 없으며 요소의 상자가 아니라 글자에 적용됩니다.

1text-shadow: h-offset v-offset blur color;
2

풀이 예시

기본 설정(가로 오프셋 2px, 세로 오프셋 2px, 흐림 3px, 불투명도 50%의 검은색)에서는 다음과 같습니다.

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

생성기가 허용하는 색상 코드

각 색상 컨트롤에는 색상 견본과 텍스트 상자가 있습니다. 텍스트 상자에는 CSS 전반에서 사용되는 # 형식의 십육진수 색상 코드를 입력합니다. 유효한 길이는 네 가지입니다. 세 자리 (#f00), 네 자리(#f00c), 여섯 자리(#ff0000), 여덟 자리 (#ff0000cc)입니다. 짧은 형식은 각 자리를 두 번 반복하기 때문에 긴 형식과 같은 색상을 의미합니다. 예를 들어 #123은 #112233과 같은 색상입니다.

네 자리 형식의 마지막 숫자와 여덟 자리 형식의 마지막 두 숫자는 투명도를 설정합니다. 그림자 생성기는 해당 숫자를 무시하고 불투명도 슬라이더에서 알파 값을 가져오므로 슬라이더에는 실제로 적용되는 투명도가 항상 표시됩니다. 텍스트 상자에 반쯤 입력한 코드처럼 십육진수 색상이 아닌 값이 들어 있으면, 그림자는 잘못된 선언을 생성하는 대신 검은색으로 대체됩니다.

CSS 속성 생성기 사용 방법

1. Gradient, Box Shadow, Border Radius 또는 Text Shadow 탭을 선택합니다.
2. 슬라이더, 색상 선택기 및 체크박스를 조정합니다. 각 슬라이더 옆에는 정확한 값을 입력할 수 있는 숫자 상자가 있습니다. 미리 보기 패널과 CSS 코드는 모두 즉시 업데이트됩니다.
3. "Copy to Clipboard" 버튼을 선택한 다음 스타일시트 또는 style 속성에 코드를 붙여 넣습니다.
4. "Reset"을 선택하면 네 탭 전체의 모든 필드가 시작 값으로 돌아갑니다. 다른 탭을 보고 있었더라도 활성 탭도 Gradient로 다시 전환됩니다.

자주 묻는 질문

CSS 속성 생성기는 어떤 용도로 사용하나요? 슬라이더와 색상 선택기의 입력을 그라디언트, 그림자 및 둥근 모서리에 사용할 완성된 CSS 코드로 변환하므로 사용자가 해당 구문을 직접 작성하거나 외울 필요가 없습니다.

선형 그라디언트와 방사형 그라디언트의 차이는 무엇인가요? 선형 그라디언트는 설정된 각도의 직선을 따라 색상이 바뀝니다. 방사형 그라디언트는 중심점에서 바깥쪽으로 색상이 바뀝니다. 이 도구의 방사형 옵션은 항상 원형 모양을 사용합니다.

이 도구로 두 가지가 넘는 색상의 그라디언트를 만들 수 있나요? 아니요. 선형 및 방사형 그라디언트 패널은 모두 각각 고유한 중지 위치를 가진 Color 1과 Color 2, 정확히 두 가지 색상만 지원합니다.

내부 박스 그림자는 일반 박스 그림자와 어떻게 다른가요? 일반 박스 그림자는 빛이 요소 뒤로 떨어지는 것처럼 요소의 가장자리 바깥에 놓입니다. 내부 그림자는 가장자리 안쪽에 놓이므로 요소가 솟아오른 것이 아니라 눌려 들어간 것처럼 보입니다.

둥근 모서리 값은 왜 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 표시되나요? 이 순서는 CSS border-radius 속성이 네 개의 개별 값을 작성할 때 요구하는 방식으로, 왼쪽 위 모서리에서 시작해 시계 방향으로 이동합니다.

생성된 CSS는 모든 브라우저에서 작동하나요? 그라디언트, 박스 그림자, 테두리 반경 및 텍스트 그림자는 모두 Chrome, Firefox, Safari 및 Edge 최신 버전에서 지원됩니다. 출력 결과에 브라우저별 접두사는 추가되지 않습니다.

참고 문헌

1. MDN Web Docs: CSS 그라디언트 사용
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow