사용 방법
- 표를 만들려면 표 탭을, 그림자를 만들려면 박스 섀도 탭을 엽니다.
- 표는 행 수, 열 수, 표 너비, 테두리 두께를 설정합니다. 그림자는 오프셋, 블러, 스프레드 슬라이더를 움직입니다.
- 미리보기를 확인한 뒤 코드 블록 위의 복사 아이콘을 사용합니다.
표 탭은 헤더 행과 설정한 개수의 본문 행·열이 있는 HTML 표를 만듭니다. 헤더 셀에는 Header 1 같은 텍스트가, 본문 셀에는 Cell 1-1 같은 텍스트가 채워지며, 이를 원하는 내용으로 바꾸면 됩니다. 너비 입력란은 모든 CSS 너비 값을 받으며 기본값은 100%이고, 테두리 입력란은 테두리 두께를 픽셀로 정합니다. 복사되는 코드는 gen-table이라는 클래스에 대한 style 블록으로 시작하는데, 여기에는 합쳐진 테두리, 셀 패딩, 음영이 있는 헤더, 줄무늬 짝수 행, 호버 색이 설정되어 있고 그 뒤에 표 마크업이 이어집니다.
박스 섀도 탭은 단일 box-shadow 선언을 출력합니다. 가로 오프셋과 세로 오프셋(-50~50px), 블러 반경(0~100px), 스프레드(-50~50px), CSS 색상 값으로 지정하는 그림자 색, 안쪽 그림자를 위한 inset 옵션을 조절합니다. 기본 색은 연한 투명 검정입니다. 슬라이더를 움직이면 미리보기 상자가 갱신됩니다.
두 탭 모두 코드를 복사 버튼이 있는 블록에 보여 줍니다. 행과 열의 수는 1 이상, 테두리 값은 0 이상이어야 합니다.
코드는 브라우저에서 생성되며 업로드되는 것은 없습니다.
자주 묻는 질문
표에 스타일이 포함되어 있나요?
네. 출력에는 테두리, 패딩, 음영이 있는 헤더, 줄무늬 행, 호버 색이 있는 gen-table 클래스의 style 블록이 포함됩니다. 수정하거나 제거할 수 있습니다.
셀 병합이나 캡션을 추가할 수 있나요?
아니요. 생성기는 헤더 행 하나가 있는 단순한 격자를 만듭니다. 더 필요하면 복사한 마크업을 수정하세요.
그림자의 스프레드 값은 어떤 역할을 하나요?
블러 처리 전에 그림자를 키우거나 줄입니다. 양수는 더 크게, 음수는 더 작게 만듭니다.
안쪽 그림자를 만들 수 있나요?
네. inset 옵션을 체크하면 출력 끝에 inset 키워드가 붙습니다.
입력한 내용이 어딘가로 전송되나요?
아니요. 코드는 브라우저에서 만들어집니다.