문서
SmartPlusLab 온라인 도구를 활용하는 데 도움이 되는 실용적인 가이드입니다.
-
CSS 그리드 레이아웃 코드를 생성하는 방법
열·행과 간격 값을 입력하면 CSS Grid 레이아웃 코드를 생성할 수 있습니다. 숫자 입력은 조건에 따라 반복 표기로 바뀌고, 사용자 지정 트랙 텍스트는 입력한 형태로 유지됩니다.
-
CSS 그라데이션 생성기로 선형·방사형 CSS 코드 만들기
유형, 방향, 색상을 입력하면 선형 또는 방사형 스타일의 CSS 그라데이션 코드를 만들 수 있습니다. 비워 둔 입력에는 정해진 기본값이 적용됩니다.
-
CSS 코드를 보기 좋게 정리하고 압축하는 방법
CSS 문자열을 넣고 들여쓰기와 모드를 선택하면 CSS를 beautify 방식으로 정리하거나 `minify` 방식으로 공백과 주석을 줄일 수 있습니다. 빈 입력은 빈 결과로 성공 처리되지만, 비어 있지 않은 입력에는 문자열, 크기, 처리 조건이 적용됩니다.
-
CSS Flexbox 레이아웃 코드를 생성하는 방법
방향, 정렬, 줄바꿈, 간격을 설정하고 생성하면 해당 입력이 반영된 CSS Flexbox 코드 조각을 얻을 수 있습니다. 값을 공급하지 않은 항목에는 방향 `row`, 정렬 `center`, 줄바꿈 `nowrap`, 간격 `10`이 사용됩니다.
-
색상 이름이나 16진수로 가까운 색상 찾는 방법
색상 이름의 일부나 16진수 값을 입력하면 내장된 이름 있는 색상과 색상값을 확인할 수 있습니다. 직접 일치가 없는 유효한 6자리 16진수에는 RGB 채널 거리 기준의 가까운 이름 있는 색상이 추가될 수 있습니다.
-
CSS clip-path 모양을 생성하는 방법
모양, 크기, 위치를 입력하면 요소를 해당 형태로 마스킹하는 CSS `clip-path` 스니펫을 만들 수 있습니다. 입력을 생략하면 모양은 원, 크기는 50, 위치는 `center`를 기준으로 생성됩니다.
-
CSS box-shadow 생성기 사용법: 그림자 코드를 입력값으로 만들기
가로·세로 이동값, 흐림, 퍼짐, 색상과 `inset` 여부를 지정하면 CSS `box-shadow` 선언을 만들 수 있습니다.
-
CSS 키프레임 애니메이션 생성 방법
이 도구에서는 애니메이션 이름, 재생 시간, 속도 곡선, 방향, 종료 후 상태를 정해 CSS 키프레임 애니메이션 텍스트를 만들 수 있습니다. 입력을 생략한 항목에는 정해진 기본값이 적용됩니다.
-
테스트용 가짜 신용카드 번호 생성 방법
개수와 지원 카드 유형을 정한 뒤 생성하면 테스트용 가짜 신용카드 번호를 얻을 수 있습니다. 필요할 때 추가 정보 설정으로 만료 값과 세 자리 보안 코드를 함께 표시하세요.
-
특정 날짜와 시간까지 남은 시간 계산하는 방법
미래 날짜와 시간을 지정하면 계산한 순간을 기준으로 남은 시간을 전체 초와 일·시간·분·초로 확인할 수 있습니다. 현재와 같거나 지난 목표는 카운트다운 값이 아니라 오류 표시로 처리됩니다.
-
복리 계산기 사용법: 이율과 추가 납입을 반영해 성장 금액 계산하기
원금, 이율, 기간과 복리 주기를 입력하고, 필요하면 0보다 큰 추가 납입액과 납입 주기를 지정한 뒤 계산하면 됩니다. 입력하지 않은 값에는 기본값이 적용되며 계산 금액은 소수점 둘째 자리까지 반올림됩니다.
-
HEX 색상에서 밝고 어두운 변형을 단계별로 만드는 방법
HEX 색상을 입력한 뒤 단계 수와 밝은 변형·어두운 변형 그룹을 정하면 색상 변형을 만들 수 있습니다. 단계 수를 비워 두면 기본값 10이 적용됩니다.