[웹개발 기초] CSS란 무엇인가? — HTML이랑 뭐가 다른지, 왜 쓰는지 초보자도 이해되게 정리해봤습니다

 

안녕하세요!

오늘은 웹개발을 처음 시작하거나, 요즘 유행하는 바이브코딩으로 뭔가 만들어보려는 분들이 꼭 마주치게 되는 단어, CSS에 대해 정리해보려고 합니다.

솔직히 말하면 저도 처음엔 HTML이랑 CSS가 뭔 차이인지 제대로 몰랐어요. 그냥 "둘 다 쓰면 되는 거 아닌가?" 싶었는데… 막상 직접 써보니까 역할이 완전히 다르더라고요.

이 글에서는 그 차이랑 개념을 최대한 쉽게, 실제로 어떻게 쓰이는지 위주로 정리해봤으니 끝까지 읽어보세요!

[웹개발 기초] CSS란 무엇인가?
— HTML이랑 뭐가 다른지, 왜 쓰는지

 1. CSS가 뭔지, 진짜 쉽게 설명하면

CSS는 Cascading Style Sheets의 약자입니다. 이름만 보면 뭔가 엄청 어려워 보이는데, 핵심만 이야기하면 이렇습니다.

"HTML로 만들어진 요소들을 어떻게 보여줄지 꾸며주는 언어"

예를 들어볼게요.

HTML은 웹페이지를 구성하는 뼈대입니다. 집으로 비유하면, 방이 몇 개고 어디에 있는지 구조를 잡아주는 게 HTML이에요.

그런데 집 구조만 있으면 어떤가요? 벽도 없고, 바닥도 시멘트 그대로고, 조명도 없는 상태잖아요.

그걸 색칠하고, 꾸미고, 배치까지 이쁘게 해주는 게 바로 CSS입니다.

즉, 정리하면:

• HTML → "여기에 제목 있고, 여기에 버튼 있고, 여기에 글 있어요"를 정의
• CSS → "그 제목은 빨간색 글씨에 크기는 24px, 버튼은 파란 배경에 둥근 모서리"를 정의

실제로 HTML만으로 만든 페이지를 보면 90년대 웹사이트처럼 텍스트 나열이 전부입니다. 거기에 CSS를 입히는 순간 완전히 다른 페이지가 되는 거예요.

바이브코딩 하시는 분들도 AI가 코드를 뚝딱 만들어줄 때, 그 코드 안에 CSS가 같이 들어있는 걸 보셨을 거예요. 그게 바로 모양을 잡아주는 부분입니다.

2. CSS는 어떻게 생겼나요? — 문법 구조 살펴보기

CSS 코드를 처음 보면 이런 생김새입니다:

h1 {
  color: red;
  font-size: 32px;
  text-align: center;
}

겁먹을 필요 없어요. 뜯어보면 구조가 딱 3가지입니다.

선택자 (Selector)

어떤 HTML 요소에 적용할 건지 지정하는 부분입니다. 위 코드에서 h1이 선택자예요. h1 태그 전체에 이 스타일을 적용하겠다는 의미입니다.

• h1 → h1 태그 전체 선택
• .box → class 이름이 "box"인 요소 선택
• #title → id가 "title"인 요소 선택

속성 (Property)

어떤 걸 바꿀 건지 지정합니다. color, font-size, text-align 같은 게 속성이에요.

값 (Value)

어떻게 바꿀 건지 지정합니다. red, 32px, center처럼 속성 뒤에 콜론(:) 쓰고 값을 적는 거예요.

CSS를 HTML에 연결하는 방법도 3가지가 있는데, 실무에서 가장 많이 쓰이는 건 별도 파일로 분리하는 방식입니다.

<!-- HTML 파일 안에 이렇게 연결 -->
<link rel="stylesheet" href="style.css">

style.css 파일 따로 만들고, HTML에서 불러오는 방식이에요. 프로젝트 규모가 커질수록 이렇게 분리하는 게 훨씬 관리하기 편합니다.

3. 자주 쓰는 CSS 속성 TOP 10 — 이것만 알아도 기본은 됩니다

진짜 자주 쓰이는 속성만 골라봤어요. 외우려고 하지 말고, "이런 게 있구나" 정도로 읽어보세요.

1. color — 글자 색상

p {
  color: blue;        /* 색상 이름으로 */
  color: #FF5733;     /* 헥스 코드로 */
  color: rgb(255, 87, 51); /* RGB 값으로 */
}

글자 색을 바꿀 때 씁니다.

2. background-color — 배경 색상

div {
  background-color: #f0f0f0;
}

요소의 배경 색상을 지정합니다.

3. font-size — 글자 크기

h1 {
  font-size: 32px;
}
p {
  font-size: 1rem;  /* rem 단위는 반응형에서 많이 씁니다 */
}

4. font-weight — 글자 두께

strong {
  font-weight: bold;    /* 또는 숫자 700 */
}
span {
  font-weight: 400;     /* 기본 두께 */
}

5. margin — 요소 바깥쪽 여백

div {
  margin: 20px;           /* 상하좌우 모두 20px */
  margin: 10px 20px;      /* 상하 10px, 좌우 20px */
  margin-top: 30px;       /* 위쪽만 30px */
}

6. padding — 요소 안쪽 여백

div {
  padding: 16px;
}

margin은 바깥, padding은 안쪽 여백이에요. 이 두 개 헷갈리는 분들 많은데, 박스 밖에 공간 = margin / 박스 안에 공간 = padding 으로 기억하면 됩니다.

7. width / height — 가로세로 크기

img {
  width: 100%;      /* 부모 요소 기준 100% */
  height: auto;     /* 비율 자동 유지 */
}

div {
  width: 300px;
  height: 200px;
}

8. border — 테두리

input {
  border: 1px solid #cccccc;
  border-radius: 8px;   /* 모서리 둥글게 */
}

9. display — 요소 배치 방식

div {
  display: flex;      /* Flexbox 레이아웃 */
  display: block;     /* 블록 요소 */
  display: none;      /* 화면에서 숨기기 */
}

이 중에서 display: flex는 요소들을 가로/세로로 나란히 배치할 때 정말 많이 씁니다.

10. position — 요소 위치 지정

div {
  position: relative;
}

.tooltip {
  position: absolute;
  top: 10px;
  right: 10px;
}

4. CSS Box Model — 이걸 모르면 레이아웃이 계속 이상해집니다

CSS를 쓰다 보면 "분명히 크기를 맞췄는데 왜 삐져나오지?" 하는 상황이 생겨요.

그게 바로 Box Model을 몰라서 생기는 문제입니다.

CSS에서 모든 HTML 요소는 사각형 박스로 인식됩니다. 그 박스는 4가지 층으로 이루어져 있어요.

┌─────────────────────────────────┐ ← margin 
│  ┌───────────────────────────┐      │  (바깥 여백)
│  │                                 border (테두리)      │      │
│  │  ┌─────────────────────┐      │      │
│  │  │                      padding (안쪽 여백) │      │      │
│  │  │  ┌───────────────┐      │      │      │
│  │  │  │            content           │      │      │      │
│  │  │  │          (실제 내용)         │      │      │      │
│  │  │  └───────────────┘      │      │      │
│  │  └─────────────────────┘      │      │
│  └───────────────────────────┘      │
└─────────────────────────────────┘

content → padding → border → margin 순서로 이해하면 됩니다.

그리고 초보자들이 많이 당하는 함정이 하나 있어요.

기본 CSS에서는 width: 300px을 설정하면 content 영역만 300px이 됩니다. 여기에 padding이랑 border까지 더해지면 실제로 화면에서 차지하는 공간은 300px보다 커지게 되는 거예요.

이걸 해결하는 게 바로:

* {
  box-sizing: border-box;
}

이 한 줄을 맨 위에 써두면 width 안에 padding과 border가 포함되어서 훨씬 직관적으로 작업할 수 있습니다. 거의 모든 CSS 프레임워크나 리셋 파일에 이 코드가 기본으로 들어가 있어요.

5. Flexbox — 레이아웃 잡을 때 가장 많이 쓰는 방식

CSS를 배우면 반드시 만나게 되는 게 Flexbox입니다.

예전에는 요소들을 가로로 나란히 놓거나, 화면 가운데 정렬하는 게 꽤 복잡했어요. 근데 Flexbox가 생기면서 이런 작업들이 엄청 쉬워졌습니다.

기본 사용법은 이렇습니다:

.container {
  display: flex;
  justify-content: center;   /* 가로 방향 정렬 */
  align-items: center;       /* 세로 방향 정렬 */
  gap: 16px;                 /* 요소 간 간격 */
}

예를 들어 버튼 3개를 가로로 나란히, 그리고 가운데 정렬하고 싶으면:

<div class="container">
  <button>버튼 1</button>
  <button>버튼 2</button>
  <button>버튼 3</button>
</div>

.container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

이렇게만 해도 깔끔하게 가운데 정렬됩니다.

바이브코딩으로 AI가 만들어주는 코드에도 display: flex가 굉장히 자주 등장하는데, 이제 보이면 "아, 요소들 배치하려는 거구나" 하고 바로 읽힐 거예요.

CSS, 처음엔 어색하지만 금방 익숙해집니다

CSS는 처음엔 왜 이렇게 속성이 많은지, 어떤 걸 써야 할지 막막하게 느껴질 수 있어요.

근데 솔직히 실무에서 자주 쓰는 속성은 한정적이에요. 처음부터 전부 다 외우려고 하지 말고, 직접 뭔가 만들면서 "이걸 바꾸려면 뭘 쓰지?"를 찾아보는 방식으로 공부하는 게 훨씬 빠릅니다.

오늘 정리한 내용만 이해해도:

• HTML이랑 CSS의 차이
• CSS 문법 구조 (선택자, 속성, 값)
• 자주 쓰는 속성들
• Box Model 개념
• Flexbox 기초

이 정도는 완성된 거예요.

열공하세요!