색상, 타이포그래피 및 박스 모델
hex, rgb, hsl 값으로 색상을 적용하고 글꼴과 크기 및 줄 높이를 설정하며 margin, border, padding으로 요소 사이의 간격을 지정합니다.
색상, 타이포그래피 및 박스 모델은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
CSS 색상 값
CSS는 여러 색상 형식을 지원합니다. 상황에 따라 가장 명확한 형식을 사용합니다. 브랜드 색상에는 16진수 코드, 색상을 쉽게 조정하려면 hsl(), 프로그래밍 방식의 값에는 rgb(), 빠른 프로토타이핑에는 이름이 지정된 색상을 사용합니다.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */배경 색상과 이미지
background-color로 요소의 배경을 설정합니다. 그라데이션이나 주소와 함께 background-image를 사용합니다. background 단축 속성은 색상, 이미지, 위치, 크기, 반복을 하나의 선언으로 결합합니다.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;글꼴 속성
다음 속성으로 타이포그래피를 제어합니다. font-family(서체), font-size(em, rem, px), font-weight(100–900), font-style(기울임꼴), line-height(가독성을 위한 비율), letter-spacing(자간)입니다.
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}텍스트 속성
추가적인 텍스트 스타일 지정에는 다음이 있습니다. text-align(왼쪽, 가운데, 오른쪽, 양쪽 맞춤), text-decoration(밑줄, 취소선, 없음), text-transform(대문자, 첫 글자 대문자), 잘라내기에는 text-overflow: ellipsis를 사용합니다.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem 대 em 대 px
px는 절대 단위입니다. em은 요소 자체의 글꼴 크기를 기준으로 하는 상대 단위이며(캐스케이드됨), rem은 루트 글꼴 크기를 기준으로 하므로 예측하기 쉽습니다. 사용자의 글꼴 설정을 존중하려면 대부분의 크기에 rem을 사용합니다.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */박스 모델
모든 HTML 요소는 네 개의 계층으로 이루어진 직사각형 상자입니다. 콘텐츠(요소의 실제 크기), 패딩(테두리 안쪽의 공간), 테두리, 마진(테두리 바깥의 공간)입니다.
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
기본값인 content-box에서는 패딩과 테두리가 선언된 너비에 더해집니다. box-sizing: border-box를 사용하면 패딩과 테두리가 선언된 너비에 포함되므로, 거의 항상 원하는 결과를 얻을 수 있습니다.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}마진 상쇄
서로 인접한 블록 요소 사이의 세로 마진은 상쇄되므로 더 큰 마진만 적용됩니다. 부모 요소와 첫 번째 또는 마지막 자식 요소의 마진도 상쇄됩니다. 플렉스박스와 그리드의 자식 요소에서는 마진이 상쇄되지 않습니다.
패딩 단축 속성
padding: top right bottom left 단축 속성은 모든 방향을 설정합니다. 두 값을 지정하면 세로와 가로를 설정합니다. 세 값을 지정하면 위쪽, 가로, 아래쪽을 설정합니다.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */테두리 속성
border: width style color 단축 속성으로 테두리를 설정합니다. 개별 방향에는 border-top 등을 사용합니다. 둥근 모서리에는 border-radius를 사용합니다. outline은 비슷하지만 배치에 영향을 주지 않습니다.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}오버플로
overflow: hidden은 요소의 크기를 초과하는 콘텐츠를 잘라냅니다. overflow: scroll은 스크롤바를 추가합니다. overflow: auto는 필요한 경우에만 스크롤바를 추가합니다. overflow-x와 overflow-y를 사용하면 각 축을 독립적으로 제어할 수 있습니다.
빠른 확인
box-sizing: border-box이고 width: 300px; padding: 20px; border: 2px solid일 때 요소가 렌더링되는 전체 너비는 얼마입니까?
복습: 색상, 타이포그래피, 박스 모델
16진수, rgb 또는 hsl로 색상을 설정합니다. font-family, 크기, 굵기, line-height로 글꼴을 적용합니다. 모든 요소는 콘텐츠 + 패딩 + 테두리 + 마진으로 이루어진 상자입니다. 예측 가능한 크기 지정을 위해 전역적으로 box-sizing: border-box를 활성화합니다.
자주 묻는 질문
“색상, 타이포그래피 및 박스 모델” 강의는 무료인가요?
네 — “색상, 타이포그래피 및 박스 모델” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“색상, 타이포그래피 및 박스 모델”에서 뭘 배우나요?
hex, rgb, hsl 값으로 색상을 적용하고 글꼴과 크기 및 줄 높이를 설정하며 margin, border, padding으로 요소 사이의 간격을 지정합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“색상, 타이포그래피 및 박스 모델” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 선택자와 캐스케이드
- 색상, 타이포그래피 및 박스 모델
- display: block, inline, flex, grid 기초
- 위치 지정: relative, absolute, fixed, sticky