liminfoCSS Generator Collection
CSS 생성기 모음 - border-radius, transform, filter 등
border-radius: 8px 8px 8px 8px;CSS Generator Collection 소개
CSS 생성기 모음은 가장 자주 필요한 세 가지 CSS 속성 생성기를 하나에 담은 도구입니다: Border Radius, Transform, Filter. Border Radius 탭에서는 좌상단, 우상단, 좌하단, 우하단 모서리 반경을 각각 0~100px 슬라이더로 조정하며 실시간 둥근 직사각형 미리보기를 제공합니다. Transform 탭에서는 rotate(-360~360도), scale(0~3), skewX(-90~90도), skewY(-90~90도), translateX(-100~100px), translateY(-100~100px) 여섯 개 슬라이더로 변형을 설정하고 초록색 직사각형에서 결합된 변형을 미리 볼 수 있습니다. Filter 탭에서는 blur(0~20px), brightness(0~200%), contrast(0~200%), grayscale(0~100%), sepia(0~100%) 다섯 개 슬라이더를 제공하며 텍스트 요소로 효과를 미리볼 수 있습니다.
프론트엔드 개발자와 UI 디자이너들이 여러 도구를 전환하지 않고 다양한 CSS 속성을 빠르게 실험하는 데 이 모음을 활용합니다. 세 탭 레이아웃으로 작업 흐름이 집중됩니다. 필요한 속성 카테고리를 선택하고, 슬라이더를 조정하고, 생성된 한 줄 CSS 선언문을 복사합니다. transform 조합이 시각적으로 어떻게 보이는지 직접 확인하고, filter 체인이 시각적 외관에 어떤 영향을 미치는지 보는 것이 프로토타이핑 단계에서 상당한 시간을 절약해 줍니다.
각 탭은 하나의 완전한 CSS 속성 선언문을 생성합니다. Border Radius 탭은 `border-radius: TLpx TRpx BRpx BLpx;`를 출력합니다. Transform 탭은 여섯 개 transform 함수를 하나의 `transform: rotate() scale() skew() translate();` 선언문으로 구성합니다. Filter 탭은 기본값이 아닌 모든 filter 함수를 하나의 `filter: blur() brightness() contrast() grayscale() sepia();` 선언문으로 결합합니다. 공유 복사 버튼이 현재 활성 탭의 CSS를 클립보드에 복사합니다.
주요 기능
- Border Radius 탭: 모서리별 슬라이더(좌상단, 우상단, 좌하단, 우하단)와 실시간 둥근 직사각형 미리보기
- Transform 탭: rotate, scale, skewX, skewY, translateX, translateY 6개 슬라이더와 실시간 요소 미리보기
- Filter 탭: blur, brightness, contrast, grayscale, sepia 5개 슬라이더와 실시간 텍스트 미리보기
- Border Radius, Transform, Filter 생성기 간 전환하는 3탭 인터페이스
- 활성 탭 CSS를 완전한 단일 속성 선언문으로 생성
- 슬라이더 조정 시 즉시 업데이트되는 실시간 미리보기
- 활성 탭의 생성된 CSS 속성 원클릭 클립보드 복사
- 100% 클라이언트 처리 — 서버로 데이터가 전송되지 않음
자주 묻는 질문
이 도구에서 지원하는 CSS transform 함수는 무엇인가요?
Transform 탭은 rotate(도), scale(배수), skewX(도), skewY(도), translateX(픽셀), translateY(픽셀)를 지원합니다. 여섯 가지 모두 하나의 CSS transform 속성 값으로 결합됩니다. 예: `transform: rotate(45deg) scale(1.5) skew(10deg, 0deg) translate(20px, 0px);`. 브라우저는 함수를 왼쪽에서 오른쪽으로 적용하므로 순서가 최종 시각적 결과에 영향을 미칩니다.
CSS transform에서 rotate와 skew의 차이는 무엇인가요?
rotate()는 transform-origin 점(기본값: 중앙)을 기준으로 전체 요소를 회전시키며 형태를 유지합니다. skew()는 X축, Y축 또는 둘 다를 따라 요소를 기울여 평행사변형 같은 효과를 만들며 형태를 변형합니다. rotate는 형태를 왜곡하지 않고 방향을 변경하고, skew는 형태 자체를 변형합니다. 둘 다 도(degree) 단위로 지정합니다.
CSS filter blur는 어떻게 동작하나요?
blur() CSS filter는 요소와 그 내용에 가우시안 블러를 적용합니다. 값은 픽셀 단위로, 값이 클수록 더 강한 블러 효과가 생깁니다. `filter: blur(0px)`은 블러 없음을 의미하고, `filter: blur(10px)`은 눈에 띄게 흐릿한 외관을 만듭니다. 요소 뒤에 있는 것을 블러 처리하는 backdrop-filter와 달리, filter: blur()는 요소 자체와 그 내용을 블러 처리합니다.
brightness filter는 무엇을 하나요?
brightness() filter는 요소의 전체 밝기를 조정합니다. 100%(1) 값은 원래 밝기입니다. 100% 미만의 값은 요소를 어둡게 만들고(0%는 완전히 검정), 100% 초과 값은 더 밝게 만듭니다(200%는 두 배 밝기). 모든 픽셀에 균일하게 적용되어 호버 상태 효과나 이미지 오버레이 어둡게 하기에 유용합니다.
여러 CSS filter를 결합할 수 있나요?
네. CSS filter는 하나의 filter 속성에서 공백으로 구분된 여러 함수를 허용합니다. 생성기는 다섯 가지 filter 함수(blur, brightness, contrast, grayscale, sepia)를 하나의 선언문으로 결합합니다. 예: `filter: blur(2px) brightness(120%) contrast(90%) grayscale(50%) sepia(0%)`. filter는 왼쪽에서 오른쪽 순서로 적용되므로 순서를 변경하면 다른 결과가 나올 수 있습니다.
CSS transform scale() 함수는 무엇을 하나요?
scale()은 레이아웃 공간에 영향을 주지 않고 요소를 시각적으로 크기 조정합니다. 값 1은 원래 크기입니다. 1보다 작으면 요소가 작아지고(0.5 = 절반 크기), 1보다 크면 커집니다(2 = 두 배 크기). 크기 조정은 transform-origin(기본값: 중앙)을 기준으로 발생합니다. width/height 변경과 달리 scale()은 주변 요소의 재흐름을 일으키지 않습니다.
grayscale과 sepia filter의 차이는 무엇인가요?
grayscale()은 요소를 흑백 이미지로 변환합니다. 0%는 원래 색상이고 100%는 완전히 회색입니다. sepia()는 오래된 사진을 연상시키는 따뜻한 갈색-주황색 톤을 적용합니다. 0%는 원래 색상이고 100%는 완전한 세피아입니다. 두 가지를 결합할 수도 있습니다. 예를 들어 `grayscale(50%) sepia(30%)`는 차분한 따뜻한 톤 효과를 만듭니다.
transform 함수들이 생성된 출력에서 어떻게 결합되나요?
이 도구는 rotate, scale, skew(skew(skewX, skewY) 형태), translate(translate(X, Y) 형태) 순서로 여섯 가지 함수를 모두 포함한 단일 transform 속성을 생성합니다. CSS transform 함수는 순차적으로 적용되어 각 함수가 다음 함수 적용 전에 좌표 시스템을 변환합니다. 즉 rotate 다음에 translateX를 적용하면 원래 수평 축이 아닌 회전된 축을 따라 요소가 이동합니다.