초보자를 위한 CSS는 9개의 안내형 랩을 통해 HTML을 스타일링하는 방법을 배우는 실습 입문 과정입니다. 외부 스타일시트를 만들고 연결하는 것부터 시작하여 텍스트, 색상, 배경, 간격, 크기, 주요 페이지 요소에 사용하는 선택자와 속성을 익힙니다.
각 랩은 브라우저 미리보기에서 바로 확인할 수 있는 작은 시각적 변화에 집중합니다. CSS 기초에서 Flexbox, 가로형 목록 내비게이션, 읽기 쉬운 표로 진행하고, 마지막에는 CDN으로 불러온 Tailwind CSS 유틸리티 클래스를 처음 사용해 봅니다.
학습 내용
이 과정을 마치면 다음을 수행할 수 있습니다.
- 외부 스타일시트를 만들어 HTML에 연결하고 요소, 클래스, ID, 그룹, 자손 선택자로 콘텐츠 지정하기
- 색상, 픽셀 단위 크기, 굵기, 정렬, 줄 높이, 글꼴 모음 속성으로 텍스트 스타일링하기
- 16진수 및 RGB 색상, 배경 이미지, 반복 제어, 배경 위치 적용하기
- CSS 박스 모델에서 콘텐츠 너비, 패딩, 테두리, 마진,
box-sizing: border-box이해하기 - 방향, 분배, 정렬, 줄 바꿈 제어로 기본 Flexbox 레이아웃 만들기
- 목록을 가로형 내비게이션으로 바꾸고 테두리, 간격, 헤더, 정렬로 표의 가독성 높이기
- CDN으로 Tailwind CSS를 불러오고 기본 배경, 텍스트, 패딩, Flexbox 유틸리티 조합하기
추천 대상
이 과정은 CSS를 처음 배우는 사람, 간단한 HTML 페이지에 시각적 스타일을 추가하려는 학습자, 핵심 스타일링 원리를 짧게 복습하고 싶은 개발자에게 적합합니다.
선수 지식: HTML 요소와 속성에 대한 기초 지식을 권장합니다. 랩에는 준비된 HTML 파일이 있지만 head, body, div, 목록, 표, class, ID를 이해하면 CSS에 집중하는 데 도움이 됩니다.
학습 환경: 9개 랩은 모두 준비된 프로젝트 파일과 Web 8080 미리보기가 있는 브라우저 기반 Ubuntu 22.04 WebIDE에서 실행됩니다. HTML과 CSS를 직접 편집하고 새로 고치거나 미리보기로 전환하여 시각적 변화를 확인합니다.
자주 묻는 질문
수강 전에 HTML을 알아야 하나요?
고급 HTML은 필요하지 않지만 CSS가 HTML 구조를 선택하고 스타일링하므로 기초 지식이 유용합니다. 실습은 CSS에 집중하며 일반적으로 페이지 마크업을 제공하기 때문에 HTML 문서 작성법을 깊이 가르치지는 않습니다.
완성된 웹사이트나 포트폴리오를 만들게 되나요?
아니요. 과정은 9개의 집중형 안내 랩으로 구성되며 최종 프로젝트나 독립 챌린지는 없습니다. 준비된 페이지를 구체적으로 수정하면서 개별 선택자와 속성의 동작을 관찰합니다.
반응형 웹 디자인을 배우나요?
입문 수준에서만 다룹니다. Flexbox 랩은 유연한 레이아웃에 유용한 방향, 정렬, 분배, 줄 바꿈을 다루지만 미디어 쿼리, CSS Grid, 브레이크포인트, 전체 모바일 우선 설계 과정은 포함하지 않습니다.
Tailwind CSS는 어느 정도 다루나요?
한 개의 랩에서 CDN으로 Tailwind를 불러오고 소수의 배경, 텍스트, 패딩, Flexbox 유틸리티를 사용합니다. 빌드 도구 설치, 설정, 반응형 및 상태 변형, 컴포넌트 설계, 프로덕션 최적화는 다루지 않습니다.
