UI & WEB 두 번째 강의 · HTML 다음에 배우는 화면 꾸미기
HTML로 제목과 문단, 버튼을 만들었다면 다음에는 “조금 더 보기 좋게 만들고 싶다”는 생각이 듭니다. 글자를 크게 하고, 버튼 색을 바꾸고, 화면 가운데에 배치하고 싶어집니다. 이런 디자인을 담당하는 것이 CSS입니다.
HTML이 웹페이지의 뼈대라면 CSS는 옷과 인테리어에 가깝습니다. 같은 HTML 구조라도 CSS를 어떻게 적용하느냐에 따라 전혀 다른 사이트처럼 보일 수 있습니다.
오늘의 목표
- CSS가 HTML과 어떻게 다른지 이해합니다.
- 색상·크기·간격·정렬을 CSS가 담당한다는 것을 이해합니다.
- CSS의 선택자와 속성이라는 말을 초보자 수준에서 이해합니다.
- AI에게 원하는 화면 스타일을 구체적으로 요청하는 방법을 배웁니다.
01. HTML과 CSS를 분리해서 생각하기
HTML은 “여기에 제목이 있다”, “여기에 버튼이 있다”라고 구조를 정합니다. CSS는 “이 제목은 크게 보이게”, “이 버튼은 둥글게”, “이 영역은 화면 가운데로”처럼 보이는 방식을 정합니다.
이 둘을 구분하면 AI에게 질문하기도 쉬워집니다. 버튼이 아예 없는 것은 HTML 구조의 문제일 수 있고, 버튼은 있는데 색이나 위치가 마음에 들지 않는다면 CSS 쪽을 살펴볼 수 있습니다.
02. 선택자와 속성은 어렵게 생각하지 말자
CSS에서는 “어느 요소를 바꿀지”를 선택하고, “무엇을 어떻게 바꿀지”를 적습니다. 어느 요소를 고르는 부분을 선택자(selector), 바꾸려는 항목을 속성(property)이라고 부릅니다.
예를 들어 버튼을 골라 배경색을 바꾸고 싶다면 “버튼을 선택한다 → 배경색을 지정한다”는 두 단계로 이해하면 됩니다. 문법을 먼저 외우기보다 이 사고방식을 익히는 것이 중요합니다.
03. 초보자가 가장 자주 바꾸는 것
- 글자 크기와 굵기
- 글자와 배경 색상
- 버튼 모양과 테두리
- 요소 사이의 간격
- 왼쪽·가운데·오른쪽 정렬
- 카드의 너비와 여백
- 모바일에서 화면이 좁아졌을 때의 배치
처음에는 이 정도만 AI에게 요구해도 상당히 보기 좋은 화면을 만들 수 있습니다.
04. “예쁘게 만들어줘”보다 구체적으로 말하기
AI에게 “예쁘게 만들어줘”라고만 요청하면 결과가 매번 달라질 수 있습니다. “밝은 배경, 카드형 레이아웃, 버튼은 너무 크지 않게, 모바일에서도 한 줄에 맞게”처럼 원하는 모습을 구체적으로 설명하면 결과가 좋아집니다.
디자인 레퍼런스가 있다면 화면 캡처를 보여주고 “이 화면을 그대로 복사하지 말고, 카드 간격과 정보 배치 방식만 참고해서 내 페이지를 정리해줘”처럼 요청할 수도 있습니다.
05. MathGenix에서 화면을 고칠 때도 같은 원리
실제 서비스를 만들다 보면 기능은 정상인데 화면이 너무 넓거나, 모바일에서 버튼이 밖으로 튀어나오거나, 긴 수식이 레이아웃을 깨뜨리는 문제가 생깁니다. 이런 문제는 기능 로직보다 CSS와 화면 구조에서 해결하는 경우가 많습니다.
초보자 입장에서는 “코드가 고장났다”고 생각하기 쉽지만, 먼저 기능 문제인지 디자인 문제인지 구분하는 것만으로도 AI에게 훨씬 정확하게 질문할 수 있습니다.
06. CSS를 직접 다 외울 필요는 없다
CSS에는 매우 많은 속성이 있지만 처음부터 모두 외울 필요는 없습니다. 만들고 싶은 화면을 설명하고 AI가 만든 코드를 보면서 “이 줄이 버튼 색을 바꾸는 부분이구나”, “이 값이 간격이구나”라고 하나씩 익혀도 충분합니다.
SUMMARY
- HTML은 구조, CSS는 보이는 디자인을 담당합니다.
- CSS는 어떤 요소를 고를지와 무엇을 바꿀지를 정하는 방식으로 이해하면 쉽습니다.
- 초보자가 자주 수정하는 것은 색상, 글자 크기, 간격, 정렬, 버튼과 카드 모양입니다.
- AI에게 디자인을 요청할 때는 “예쁘게”보다 구체적인 조건을 말하는 것이 좋습니다.
ONE LINE TAKEAWAY
CSS는 어렵게 꾸미는 기술이 아니라, 이미 만든 HTML 구조를 내가 원하는 모습으로 보이게 만드는 규칙입니다.
NEXT IN SERIES
STEP 010 — 버튼을 누르면 왜 화면이 움직일까? JavaScript 쉽게 이해하기