CSS(꾸미는 규칙)
색·글씨 크기·간격을 한곳에 모아 적어 둔 규칙표예요. 뼈대는 그대로 두고 겉모습만 갈아입히기 때문에, 인테리어만 바꾸는 공사에 가까워요.
쉽게 말하면
가게를 새로 꾸밀 때 인테리어 업자에게 종이 한 장을 건네죠. "벽은 흰색, 메뉴판 글씨는 크게, 진열대 사이는 넉넉하게" 같은 시공 지시서요. CSS가 바로 그 지시서예요. 벽을 허물거나 주방 위치를 옮기는 게 아니라, 이미 서 있는 가게에 색을 칠하고 조명을 달고 간격을 정하는 일이에요.
그래서 뼈대와 옷이 나뉘어요. 어디에 제목이 오고 어디에 버튼이 오는지는 HTML이 정하고, 그 제목이 무슨 색이고 얼마나 큰지는 CSS가 정해요. 옷만 갈아입히면 같은 가게가 완전히 다른 가게처럼 보여요.
색을 바꾸려면 적어 둔 자리를 하나하나 찾아 고쳐야 해요. 서른 군데면 서른 번이고, 한 군데 빠뜨리면 그 자리만 옛 색으로 남아요.
규칙표 한 줄만 고치면 서른 군데가 같이 바뀌어요. 빠뜨릴 자리가 애초에 없어요.
무엇을 정하는 규칙인가
"꾸미기"라고 하면 색만 떠올리기 쉬운데, 눈에 보이는 것 거의 전부가 이 규칙표 소관이에요. 사장님이 화면을 보고 마음에 안 드는 부분은 대개 이 표 안에 있어요.
| 정하는 것 | 가게로 치면 | 예를 들면 |
|---|---|---|
| 색 | 벽 페인트와 간판 바탕색 | 버튼은 진한 파랑, 본문 글씨는 진회색 |
| 글씨 크기와 굵기 | 메뉴판 글자 크기 | 제목은 크고 굵게, 설명은 작고 보통 굵기로 |
| 여백 | 진열대 사이 통로 폭 | 제목 아래를 한 손가락 정도 띄우기 |
| 배치 | 테이블을 한 줄로 놓을지 두 줄로 놓을지 | 사진은 왼쪽, 설명은 오른쪽에 나란히 |
| 모서리와 그림자 | 간판 코너를 둥글릴지, 조명을 넣을지 | 버튼 모서리를 둥글게, 카드에 옅은 그림자 |
| 움직임 | 자동문이 열리는 속도 | 버튼에 마우스를 올리면 살짝 밝아지기 |
| 숨기고 보이기 | 성수기에만 내놓는 입간판 | 폰에서는 긴 표를 접어 두기 |
글꼴 자체를 고르는 일도 여기 들어가요. 글꼴은 따로 챙길 게 많아서 글꼴 문서로 빼 뒀어요.
규칙 한 줄은 이렇게 생겼어요
규칙 한 줄은 늘 세 토막이에요. 이 세 토막만 알면 개발자가 화면을 공유하며 설명할 때 무슨 얘긴지 따라갈 수 있어요.
- 1누구에게 적용할지. "제목 글씨", "가입 버튼"처럼 대상을 콕 집어요. 이 부분을 개발자들은 선택자라고 불러요.
- 2무엇을 바꿀지. 색인지, 글씨 크기인지, 여백인지 항목을 고르는 자리예요.
- 3얼마로 할지. 진한 파랑, 16, 둥글게 같은 실제 값이에요.
숫자 뒤에 붙는 px
숫자 뒤의 px 는 화면의 점 개수예요. 본문 글씨는 보통 16px 쯤이고, 눈에 확 들어오는 제목은 30px 을 넘겨요. "글씨 두 단계만 키워 주세요"보다 "본문을 16에서 18로"라고 말하면 서로 오해가 없어요.
값을 직접 타이핑하는 건 사장님 일이 아니에요. 바이브캠퍼스에서는 말로 부탁하거나, 캔버스 편집기에서 바꿀 곳을 눌러 색과 크기를 고르면 규칙표가 알아서 다시 쓰여요.
왜 뼈대와 옷을 굳이 나누나
이유는 셋인데, 셋 다 사장님 돈과 시간에 직접 닿아요.
- 1한 번에 통일돼요. 페이지가 열 장이어도 버튼 모양이 다 같아요. 새 페이지를 늘려도 저절로 같은 옷을 입어요.
- 2바꾸는 값이 싸요. 겉모습만 만지는 일은 뼈대 공사보다 빠르고 위험이 작아요. 견적과 기간이 다르게 나오는 게 정상이에요.
- 3뜯어 고쳐도 기능이 남아요. 결제나 예약 같은 동작은 뼈대 쪽에 있어서, 옷을 갈아입혀도 그대로 굴러가요.
대신 하나 각오할 게 있어요. 규칙표는 여러 화면이 함께 쓰는 공용 문서예요. 한 줄을 고치면 그 줄을 쓰는 모든 자리가 같이 바뀌어요. 편한 점이자, 예상 못 한 곳이 따라 바뀌는 이유이기도 해요.
사장님이 실제로 겪는 장면
장면 1 · 외주 개발자가 말했다
“구조는 안 건드려요. CSS만 손보면 되니까 반나절이면 됩니다.”
이제 해석돼요. 벽을 허무는 공사가 아니라 페인트칠이라는 뜻이에요. 그래서 짧고 값싸게 잡은 거예요. 반대로 "구조를 바꿔야 한다"고 하면 견적과 기간이 크게 달라지는 게 자연스러워요. 같은 "디자인 수정"이라도 어느 쪽인지 물어보면 금액이 납득돼요.
장면 2 · 컴퓨터에서는 멀쩡한데 폰에서 글씨가 겹친다
“제 노트북에서는 예쁘게 나오는데, 손님이 폰으로 보면 글씨가 잘려요.”
고장이 아니라 좁은 화면용 규칙이 없는 것이에요. 폭을 딱 고정해 두면 넓은 화면에만 맞아요. 화면 폭에 따라 규칙을 다르게 주는 방법이 따로 있고, 그 이야기는 반응형에 있어요. 사장님은 "폰 화면에서 깨져요"라고만 말해 주면 충분해요.
장면 3 · 한 곳만 고쳤는데 다른 페이지도 바뀌었다
“소개 페이지 제목만 키워 달랬더니 공지 제목까지 커졌어요.”
두 곳이 같은 규칙 한 줄을 함께 쓰고 있던 거예요. 실수가 아니라 규칙표가 원래 그렇게 동작해요. 이럴 때는 "공지 제목만 따로 두고 싶어요"라고 말하면 됩니다. 그러면 공지용 규칙을 한 줄 갈라 줘요.
흔한 증상과 전달하는 말
겉모습 문제는 원인을 사장님이 알 필요는 없어요. 대신 증상을 정확히 말하면 고치는 시간이 확 줄어요. 자주 나오는 네 가지예요.
| 증상 | 대개 이런 상황이에요 | 이렇게 말해 주세요 |
|---|---|---|
| 폰에서 글씨가 잘리거나 겹친다 | 좁은 화면용 규칙이 없거나, 폭이 숫자로 고정돼 있어요 | "폰 화면에서 깨져요. 화면 좁을 때 규칙을 봐 주세요" |
| 내 컴퓨터에서만 글씨체가 예쁘다 | 그 글씨체가 손님 기기에 없어서 다른 걸로 대신 나와요 | "제 컴퓨터에만 있는 글씨체 아닌지 확인해 주세요" |
| 색을 바꿨는데 한 군데만 바뀐다 | 같은 색이 여러 규칙에 흩어져 적혀 있어요 | "이 색을 쓰는 곳을 한 곳으로 모아 주세요" |
| 분명히 바꿨는데 화면이 그대로다 | 다른 규칙이 이기고 있거나, 브라우저가 옛 규칙표를 기억하고 있어요 | "저는 그대로 보여요. 새로 고쳐도 같아요" |
고쳤다는데 안 바뀌면 먼저 이것부터
브라우저는 규칙표를 한 번 받아 두고 재사용해요. 이럴 때는 새로 고침을 한 번 더 세게 하거나 다른 기기에서 열어 보세요. 다른 기기에서는 바뀌어 보인다면 고쳐진 거예요. 이 확인을 먼저 하면 서로 붙잡고 헤매는 시간을 아껴요.
자주 묻는 것
- Q. 제가 CSS를 배워야 하나요?
- 값을 직접 적을 일은 없어요. 다만 "어떤 일인지"는 알아 두는 게 이득이에요. 겉모습만 바꾸는 일과 뼈대를 바꾸는 일은 견적도 기간도 위험도 다르니까요. 바이브캠퍼스에서는 말로 부탁하거나 눌러서 바꾸면 규칙표가 알아서 다시 쓰여요.
- Q. AI에게 어떻게 부탁하면 원하는 대로 나와요?
- 규칙 한 줄과 똑같이 세 토막으로 말해 주세요. "버튼 좀 예쁘게"가 아니라 "가입 버튼 배경을 진한 파랑으로, 글씨는 흰색으로, 모서리는 둥글게"요. 대상·항목·값이 다 들어가면 한 번에 맞아요.
- Q. 디자인을 바꾸면 기능도 망가지나요?
- 보통은 아니에요. 옷만 갈아입는 일이니까요. 단 버튼이 화면 밖으로 밀려서 손님이 누를 수 없게 되면 그건 기능 고장과 똑같아요. 바꾼 뒤에 폰으로 열어 실제로 눌러 보는 것까지가 한 세트예요.
- Q. 가게 색을 나중에 한 번에 바꾸고 싶어요
- 가능해요. 브랜드 색을 규칙표 맨 위에 이름을 붙여 한 번만 적어 두라고 부탁하세요. 그러면 나중에 그 한 줄만 고쳐도 사이트 전체 색이 바뀌어요. 색을 어떻게 고를지는 브랜드 기본에 있어요.
- Q. 테일윈드니 부트스트랩이니 하는 말을 들었어요
- 규칙표를 맨땅에서 쓰지 않고, 미리 만들어 둔 규칙 모음을 가져다 쓰는 방식들이에요. 완성품은 결국 같은 CSS예요. 사장님이 고를 문제는 아니고, 만드는 사람이 손에 익은 걸 쓰면 돼요.
- Q. 글씨를 무조건 크게 하면 좋은 건가요?
- 본문이 너무 작으면 나이 있는 손님이 못 읽어요. 반대로 다 크면 어디가 중요한지 알 수 없어요. 크기 차이로 순서를 만드는 게 핵심이에요. 읽기 편함을 더 챙기려면 접근성을 보세요.
확인해 보세요
개발자가 "구조는 그대로 두고 CSS만 손보면 됩니다"라고 했어요. 무슨 뜻일까요?
하나 더
버튼 색을 바꾸고 싶어요. 어느 쪽이 한 번에 원하는 대로 나올까요?
직접 해보기
스튜디오에서 겉모습만 바꿔 보세요
만든 화면에서 제목이나 버튼을 눌러 색과 글씨 크기를 바꿔 보세요. 뼈대는 그대로인데 분위기가 달라지는 걸 눈으로 보면, 이 문서 내용이 한 번에 붙어요. 마음에 안 들면 되돌리면 돼요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
이름의 C 는 계단식이라는 뜻이에요 · 여러 규칙이 같은 자리를 가리키면 하나가 이겨요. 대체로 더 좁게 콕 집은 규칙과 나중에 적힌 규칙이 이겨요. 물이 계단을 타고 내려가듯 순서가 정해져 있어서 계단식이라고 불러요. "고쳤는데 왜 안 바뀌지"의 절반은 고장이 아니라 다른 규칙이 이기고 있는 상황이에요.
억지로 이기게 하는 표시 · 규칙 끝에 강제 표시를 붙이면 순서를 무시하고 이겨요. 급할 때는 통하는데, 남발하면 나중에는 아무 규칙도 이길 수 없어서 고치는 값이 오히려 비싸져요. 개발자가 "이런 강제 표시를 걷어내며 정리하겠다"고 하면 빚을 갚는 작업이라고 보면 돼요.
px 말고 다른 단위 · 점 개수를 고정하는 px 외에, 글씨 기준의 배수나 화면 폭의 비율로 적는 단위도 있어요. 비율로 적어 두면 큰 화면과 작은 화면에 알아서 맞춰지고, 손님이 기기에서 글씨를 키워 놨을 때도 따라 커져요. 폰에서 자주 깨지는 화면은 대개 px 로 폭을 못 박아 둔 경우예요.
이것만 기억하세요
- ·CSS 는 색·글씨 크기·여백을 모아 적은 규칙표예요. 뼈대는 그대로 두고 겉모습만 바꿔요
- ·규칙 한 줄은 대상·항목·값 세 토막이에요. 부탁할 때도 이 세 토막으로 말해요
- ·한 줄을 고치면 그 줄을 쓰는 모든 자리가 같이 바뀌어요. 장점이자 놀라는 이유예요
- ·겉모습 수정은 뼈대 공사보다 빠르고 위험이 작아요. 견적 차이의 근거예요
- ·바꾼 뒤에는 폰으로 열어 버튼을 실제로 눌러 보는 것까지가 한 세트예요