CSS

처음 접하는 개념부터 원리와 설계 적용까지, 필요한 단계부터 시작하세요.

개념 노트 10개 · 직접 실습 0개

시작 전 HTML의 요소·class·문서 구조를 먼저 알아두면 좋습니다.

순서는 권장 경로입니다. 이미 아는 내용은 건너뛰어도 됩니다. 선택자로 대상을 고르고 여백과 기본 배치를 조절할 수 있다면 JavaScript를 시작해도 좋습니다.

시작하기

HTML에 스타일을 연결하고 한 속성을 바꿔 봅니다.

CSS는 선택한 HTML 요소에 스타일 규칙을 적용합니다.

스타일 대상·여백·간단한 배치를 작은 예제로 익힙니다.

클래스 선택자는 같은 스타일을 적용할 요소를 묶습니다.

padding은 상자 안쪽 여백이고 margin은 바깥 간격입니다.

부모에 display: flex를 주면 자식 요소를 한 축으로 배치할 수 있습니다.

박스·캐스케이드·배치·반응형의 규칙과 비용을 확장합니다.

작은 화면과 키보드에서도 사용할 수 있는 버튼 영역을 구성합니다.

예매 요청·취소 버튼을 나란히 배치하고 좁은 화면에서는 넘치지 않도록 바꿔 보세요.

과제는 직접 작성·확인하는 연습입니다. 자동 채점이나 완료 기록은 제공하지 않습니다.