CSS — 스타일

HTML이 건물의 뼈대라면, CSS는 페인트, 벽지, 가구입니다. 웹사이트를 예쁘게 꾸미는 역할을 합니다.

CSS란?

CSS는 Cascading Style Sheets의 줄임말입니다. 역시 이름은 어렵지만 하는 일은 간단합니다.

CSS는 인테리어와 같습니다. 벽을 무슨 색으로 칠할지, 가구를 어디에 놓을지, 글씨를 얼마나 크게 할지 정하는 것입니다.

HTML만으로 만든 웹사이트는 흰 바탕에 검은 글씨만 있는 밋밋한 모습입니다. CSS를 입히면 색깔, 크기, 간격, 글꼴이 바뀌면서 보기 좋은 웹사이트가 됩니다.

CSS로 바꿀 수 있는 것들을 표로 정리하면 이렇습니다:

속성	하는 일	예시
`color`	글자 색상	`color: blue` → 파란 글씨
`font-size`	글자 크기	`font-size: 20px` → 20픽셀 크기
`background-color`	배경 색상	`background-color: yellow` → 노란 배경
`margin`	바깥쪽 여백	`margin: 10px` → 주변에 10픽셀 공간
`padding`	안쪽 여백	`padding: 20px` → 안쪽에 20픽셀 공간
`border-radius`	모서리 둥글기	`border-radius: 10px` → 모서리가 둥글게

CSS 없이 (HTML만):

CSS 적용 후:

같은 HTML인데 CSS만 다르게 하면 완전히 다른 느낌의 웹사이트가 됩니다. 마치 같은 구조의 집이라도 인테리어에 따라 분위기가 달라지는 것과 같습니다.

요즘 많이 쓰는 방법 중 하나가 Tailwind CSS입니다. CSS를 따로 파일에 쓰는 대신, HTML 태그에 직접 짧은 이름을 붙이는 방식입니다.

Tailwind을 쓰면 AI에게 이렇게 말할 수 있습니다:

"배경을 흰색으로 하고, 제목은 파란색 큰 글씨로, 모서리는 둥글게 해줘"

AI가 알아서 bg-white text-blue-500 text-xl rounded-lg 같은 Tailwind 코드를 작성해 줍니다.

CSS도 직접 쓸 일은 거의 없습니다. AI에게 원하는 모습을 말로 설명하면 됩니다.

"글씨가 너무 작아. 좀 키워줘"

"배경을 연한 회색으로 바꿔줘"

"버튼을 더 둥글게, 그리고 초록색으로"

이런 식으로 말하면 AI가 CSS를 수정해 줍니다. 색상, 크기, 간격 — 이런 단어만 알면 됩니다.