레슨 2 / 9·20분
CSS 기초 스타일링
CSS란?
CSS(Cascading Style Sheets)는 HTML 요소의 시각적 표현을 정의하는 스타일 언어입니다. HTML이 콘텐츠의 구조를 담당한다면, CSS는 색상, 크기, 배치 등 디자인을 담당합니다. CSS를 사용하면 동일한 HTML 구조에 전혀 다른 디자인을 적용할 수 있습니다.
CSS 선택자
CSS 선택자는 스타일을 적용할 HTML 요소를 지정하는 패턴입니다. 태그 선택자, 클래스 선택자(.), ID 선택자(#)가 가장 기본적인 선택자입니다.
css
/* 태그 선택자 - 모든 p 태그에 적용 */
p {
color: #333;
font-size: 16px;
}
/* 클래스 선택자 - class="highlight"인 요소에 적용 */
.highlight {
background-color: #fff3cd;
padding: 4px 8px;
border-radius: 4px;
}
/* ID 선택자 - id="header"인 요소에 적용 (페이지당 하나) */
#header {
background-color: #1a1a2e;
color: white;
padding: 20px;
}자주 쓰는 CSS 속성
css
.card {
/* 색상 */
color: #222; /* 글자 색상 */
background-color: #f5f5f5; /* 배경 색상 */
/* 글꼴 */
font-size: 18px; /* 글자 크기 */
font-weight: bold; /* 글자 두께 */
line-height: 1.6; /* 줄 간격 */
/* 여백 */
margin: 16px; /* 외부 여백 (요소 바깥) */
padding: 24px; /* 내부 여백 (요소 안쪽) */
/* 테두리 */
border: 1px solid #ddd; /* 두께 스타일 색상 */
border-radius: 8px; /* 둥근 모서리 */
}Box Model 이해하기
CSS에서 모든 요소는 박스(Box)로 표현됩니다. 이 박스는 안쪽부터 **content**(내용) -> **padding**(안쪽 여백) -> **border**(테두리) -> **margin**(바깥 여백) 순서로 구성됩니다. box-sizing: border-box를 설정하면 width와 height에 padding과 border가 포함되어 레이아웃을 계산하기 훨씬 쉬워집니다.
css
/* 모든 요소에 border-box 적용 (권장) */
*,
*::before,
*::after {
box-sizing: border-box;
}
.box-example {
width: 300px; /* border-box: padding, border 포함 300px */
padding: 20px;
border: 2px solid #333;
margin: 10px;
}💡
브라우저 개발자 도구(F12)에서 요소를 선택하면 Box Model을 시각적으로 확인할 수 있습니다. margin은 주황색, border는 노란색, padding은 초록색, content는 파란색으로 표시됩니다.