웹 기본
CSS(Cascading Style Sheets)
CSS는 웹페이지의 색상·크기·간격·배치처럼 화면에 보이는 모양을 지정하는 언어입니다.
쉬운 설명
AI에게 “신청 버튼을 초록색으로 바꿔 줘”라고 요청하면 CSS를 수정할 수 있어요. HTML이 제목이나 버튼 같은 요소를 만들고, CSS는 그 요소가 어떻게 보일지 정해요. 같은 내용도 CSS에 따라 색과 간격, 배치가 달라져요. 버튼을 눌렀을 때 신청 정보를 저장하는 기능은 스타일과 별도로 구현해야 해요.
이런 상황에서 만나요
스터디 신청 버튼은 잘 작동하지만 눈에 잘 띄지 않아요. 버튼의 문구와 기능을 유지하면서 배경색과 안쪽 여백을 바꾸려는 상황이에요.
신청 버튼의 모양만 바꿔요
<button class="apply">신청하기</button>
.apply {
background: #175b45;
color: #ffffff;
padding: 12px 24px;
}- 1apply 클래스가 붙은 버튼을 꾸미는 예시예요.
- 2배경색·글자색·안쪽 여백을 지정해요.
- 3같은 문구에 스타일을 적용한 모양이에요. 신청 기능을 실행하는 버튼은 아니에요.
AI에게 “신청 버튼의 배경색과 안쪽 여백을 바꾸되, 다른 버튼에도 적용되는 스타일인지 확인해 줘”라고 요청해 보세요. 수정한 뒤에는 글자가 잘 읽히는지, 모바일에서 버튼이 잘리지 않는지 확인해요.
헷갈리기 쉬운 점
CSS를 바꾸면 버튼 기능도 생기나요?
CSS는 주로 보이는 모양을 정해요. 색을 바꾸거나 누를 수 있어 보이게 꾸며도 신청 데이터를 저장하는 기능이 생기지는 않아요. 기능 구현과 실제 동작 확인은 별도로 필요해요.
같은 요소에 여러 스타일이 적용될 수 있어요. 색이 안 바뀐다면 새 규칙을 계속 덧붙이기보다 개발자 도구에서 어떤 규칙이 최종 적용됐는지 확인하세요.
왜 알아야 할까요?
AI에게 디자인을 요청할 때 색상·안쪽 여백·글자 크기처럼 바꿀 대상을 구체적으로 말할 수 있어요. 화면의 모양 문제와 기능 오류도 나눠 설명하기 쉬워져요.
조금 더 자세히
CSS는 Cascading Style Sheets의 약자입니다. 선택자는 스타일을 적용할 요소를 고르고, 선언은 속성과 값을 지정합니다. 예를 들어 .apply는 apply 클래스를 가진 요소를 선택하고 background는 배경색을 정합니다.
여러 규칙이 같은 속성을 지정하면 캐스케이드와 우선순위에 따라 결과가 정해집니다. 작성 순서만으로 결정되는 것은 아닙니다. CSS는 배치와 반응형 스타일도 담당하며, 프로젝트에 따라 별도 파일이나 컴포넌트 안에서 작성할 수 있습니다.
직접 사용할 때 확인해 보세요
- 바꿀 요소와 스타일의 적용 범위를 확인한다
- 글자 대비와 좁은 화면을 확인한다
- 모양과 별개로 기능도 시험한다
참고 자료
관계 지도
