스타일 · CSS

CSS

HTML 요소에 모양을 입히는 언어입니다. 색·글꼴·여백·배치(레이아웃)·반응형까지, "어떻게 보일지"를 모두 CSS가 정합니다.

한 줄로

CSS? 는 "어떤 요소를 골라(선택자), 어떤 모양으로(속성) 바꿔라"를 적는 언어예요. HTML? 이 구조라면 CSS는 옷차림입니다. 이 프로젝트가 쓰는 Tailwind? 도 결국 이 CSS를 더 빠르게 쓰는 방식이에요.

HTML이 사람의 "골격"이라면 CSS는 "옷과 화장"입니다. 같은 골격이라도 어떤 옷(CSS)을 입히느냐에 따라 전혀 다른 모습이 됩니다.

아래는 똑같은 HTML 조각을 두 칸으로 나란히 둔 것입니다. 왼쪽은 CSS가 전혀 없는 브라우저 기본 모습, 오른쪽은 같은 마크업에 CSS만 입힌 모습이에요. 마크업은 한 글자도 다르지 않습니다.

왜 / 어디에 쓰나
  • 모양 입히기 — 색·글꼴·크기·테두리·그림자 등
  • 레이아웃 — Flexbox·Grid로 요소를 가로/세로·격자로 배치
  • 반응형 — 화면 크기에 따라 모바일/데스크톱 레이아웃 전환
  • 일관성 — 한 곳에서 스타일을 정의해 여러 요소에 재사용

기본 문법: 선택자 + 속성

/* 선택자 { 속성: 값; } */
h1 {
  color: #333;          /* 글자색 */
  font-size: 24px;      /* 글자 크기 */
  margin-bottom: 16px;  /* 아래 바깥 여백 */
}

.card {                 /* class="card" 인 요소 */
  padding: 16px;        /* 안쪽 여백 */
  border-radius: 8px;   /* 모서리 둥글게 */
  background: #fff;
}

선택자(어떤 요소를 고를까)

선택자고르는 대상
p모든 <p> 태그
.cardclass="card" 인 요소
#mainid="main" 인 요소
.card p.card 안에 있는 <p>
button:hover마우스를 올린 버튼

레이아웃: Flexbox와 Grid

요즘 배치는 대부분 Flexbox(한 방향 정렬)와 Grid(격자)로 합니다.

/* Flexbox — 가로로 나란히, 사이 간격 8px */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;     /* 세로 가운데 */
  justify-content: space-between;  /* 양끝 정렬 */
}

/* Grid — 3칸 격자 */
.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

반응형

미디어 쿼리로 화면 폭에 따라 다른 스타일을 줍니다.

.list {
  grid-template-columns: 1fr;          /* 기본: 1칸 (모바일) */
}
@media (min-width: 768px) {
  .list { grid-template-columns: repeat(3, 1fr); }  /* 넓으면 3칸 */
}
Tailwind와의 관계

이렇게 CSS 파일을 따로 쓰는 대신, Tailwind? 는 위 속성들을 미리 만든 클래스로 제공합니다. 예를 들어 display:flex; gap:8px; padding:16px 는 Tailwind에서 flex gap-2 p-4 한 줄이 돼요. CSS 개념(여백·flex·grid)을 알면 Tailwind가 그대로 이해됩니다.

다음 단계