CSS 시작하기

CSS는 HTML로 만든 구조에 색, 크기, 여백, 배치, 반응형 스타일을 입히는 언어입니다. 같은 HTML이라도 CSS를 어떻게 작성하느냐에 따라 전혀 다른 화면이 됩니다.

학습 목표

• CSS 선택자로 원하는 요소를 고른다.
• 박스 모델의 content, padding, border, margin을 이해한다.
• Flexbox와 Grid가 어떤 문제를 해결하는지 안다.
• 모바일 화면을 고려한 반응형 스타일의 기본을 익힌다.

CSS 적용 방식

가장 흔한 방식은 별도 CSS 파일을 만들고 HTML에서 불러오는 것입니다.

<link rel="stylesheet" href="/styles.css" />

body {
  font-family: system-ui, sans-serif;
  color: #1b1f29;
  background: #f7f8fa;
}

선택자

선택자는 어떤 HTML 요소에 스타일을 적용할지 정합니다.

h1 {
  font-size: 32px;
}

.card {
  padding: 20px;
  border: 1px solid #e3e7ee;
}

h1은 태그 선택자이고, .card는 class 선택자입니다. 실제 프로젝트에서는 class 선택자를 가장 많이 사용합니다.

박스 모델

브라우저는 대부분의 요소를 박스로 계산합니다.

• content: 실제 내용 영역
• padding: 내용과 테두리 사이 여백
• border: 테두리
• margin: 다른 요소와의 바깥 여백

.button {
  padding: 10px 16px;
  border: 1px solid #cdd4df;
  margin-top: 12px;
}

요약

CSS는 HTML 구조를 보기 좋은 화면으로 만드는 언어입니다. 선택자, 박스 모델, 레이아웃, 반응형 규칙을 차근차근 익히면 대부분의 UI를 직접 만들 수 있습니다.