템하키트는 쉽고 빠르게 디자인을 구성할 수 있도록 설계된 템하에서 자체 개발한 CSS 프레임워크입니다.
모든 템플릿은 일관성 있는 스타일 가이드와 규칙적인 코드를 제공되어 더욱 직관적이고 체계적으로 작업을 진행할 수 있습니다.
노코드 툴로 제작된 템플릿을 시작점으로 하되, 추가적인 커스터마이징이 필요할 때 코드를 간단히 복사하여 활용할 수 있도록 설계되었습니다.
템하키트를 통해 템하가 제공하는 일관된 스타일과 견고한 구조를 유지하면서도, 자신만의 창의적인 디자인을 자유롭게 구현해보세요!
템하에서 기본적으로 제공하는 단위는 rem 을 기준으로 제공합니다.
rem 이란, 기준이 되는 글꼴 크기(root font size)를 기준으로 크기를 설정합니다. 각 단위에 대한 설명은
아래와 같습니다.
| 타이틀 | 내용 |
|---|---|
| px (픽셀) |
화면에서 고정된 크기의 점 단위로, 정확한 크기를 설정할 때 사용합니다. 예를 들어, 16px 은 화면에서 16개의 픽셀을 차지합니다. 설정하려는 크기 그대로 사용합니다. (예: 16px , 20px 등) |
| rem |
기준이 되는 글꼴 크기(root font size)를 기준으로 크기를 설정합니다. 템하의 기본 글꼴 크기는 10px 로, 1rem = 10px 입니다. (예: 1.6rem = 16px , 2rem = 20px등) |
| em |
부모 요소의 글꼴 크기를 기준으로 크기를 설정합니다. 부모 요소의 글꼴 크기가 16px이라면 1em = 16px 입니다. 원하는 크기(px) ÷ 부모 요소의 크기(px) (예: 부모 글꼴 크기가 20px이라면 20px × 1.5 = 30px ) |
/* Reset */
html { font-size: 62.5%; /* 16px * 0.625 = 10px */ }
body { font-size: var(--fs-p1); }
템하의 CSS는 box-sizing: border-box; 를 사용하면 padding 이 요소의 최종 너비에 포함되어 크기 계산이 간단해집니다.
그러나 Google Maps나 Google Custom Search Engine 같은 (HTML과 CSS 기반으로 렌더링되는 모든 UI 요소) 서드파티 소프트웨어에서는
예상치 못한 문제가 발생할 수 있습니다.
이러한 경우, 특정 요소에 대해 다음과 같이 재정의하면 문제를 해결할 수 있습니다.
.class-name { box-sizing : content-box;}템하의 CSS는 word-break: keep-all; 과 text-wrap: pretty; 속성을 사용하여 텍스트의 줄바꿈을 보다 자연스럽게 조정합니다.
| 타이틀 | 내용 |
|---|---|
| word-break: keep-all; |
국어와 같은 언어에서 단어가 중간에 끊기는 것을 방지하고, 띄어쓰기 기준으로만 줄바꿈이 이루어지도록 설정합니다. 이를 통해 가독성을 높일 수 있지만, 영어와 같이 긴 단어가 포함된 경우 줄바꿈이 되지 않아 레이아웃이 깨지는 문제가 발생할 수 있습니다. |
| text-wrap: pretty; |
브라우저가 텍스트의 가독성을 고려하여 자동으로 최적화된 줄바꿈을 수행하는 속성입니다. 이를 활용하면 텍스트가 더 균형 있게 배치될 수 있지만, 현재 Chrome과 Edge에서만 지원되며, Safari와 Firefox에서는 무시되는 문제가 있습니다. |
이러한 문제를 해결하려면, 특정 요소에서 word-break 와 text-wrap
속성을 재정의하여 기본 동작을 유지할 수 있습니다.
예를 들어, 다음과 같이 설정하면 텍스트 줄바꿈 동작을 초기화할 수 있습니다.
/* word-break 초기화 */
.class-name { word-break : normal; }
/* text-wrap 초기화 */
.class-name { text-wrap : wrap; }템하키트의 CSS와 JS 파일을 로컬로 다운로드하여 나만의 프로젝트에 활용해 보세요.
| 제목 | 링크 |
|---|---|
| 샘플 아이콘 리스트 페이지 | 🔗 링크 바로가기 (클릭 시 이동됩니다.) |
템하 키트 CSS와 JS 파일을 로컬로 다운로드하여 나만의 프로젝트에 활용해 보세요.
템하 키트 기반으로 만들어진 블록을 통해 나만의 웹 사이트를 만들어보세요.
