입문 · 6개 강의
CSS 기초: 한 페이지 완성하기
기존 HTML 자기소개 페이지에 CSS를 연결하고 스타일과 배치를 단계적으로 적용해 다양한 화면에서 읽기 좋은 한 페이지를 완성하는 실습 코스입니다. 학습 시간은 추정치입니다.
첫 강의 시작하기
이 코스에서 배우는 것
- 외부 CSS 파일을 HTML에 연결하고 선택자로 원하는 요소에 스타일을 적용한다.
- 색상, 글꼴, 박스 모델을 활용해 자기소개 페이지의 가독성과 간격을 개선한다.
- Flexbox와 미디어 쿼리로 화면 크기에 맞는 배치를 만들고 완성된 페이지를 점검한다.
이런 분에게 추천해요
HTML 기초를 익히고 첫 웹페이지에 직접 스타일을 적용해 보고 싶은 입문자
시작하기 전에
- HTML 문서의 기본 구조와 제목·문단·링크·이미지·목록 요소를 이해한다.
- 기존 자기소개 HTML을 사용하거나 각 강의에서 제공하는 전체 예제 파일로 시작할 수 있다.
- 프로필 일러스트는 예제 파일에 포함되어 있으며 자신의 사진으로 바꿔도 된다. 별도 JavaScript 없이 실습할 수 있다.
강의 목록
위에서부터 순서대로 따라오세요CSS 연결과 선택자
자기소개 HTML과 같은 폴더에 CSS 파일을 만들고 연결한다. 제목과 소개 영역에 요소 선택자와 클래스 선택자를 적용해 스타일이 반영되는지 확인한다. 실습 결과: 외부 CSS가 연결되고 제목과 소개 영역이 구분되는 페이지.
색상과 글꼴로 읽기 쉽게 만들기
기존 선택자를 활용해 배경과 글자색을 정하고 제목과 본문의 글꼴 크기와 줄 높이를 조절한다. 실습 결과: 제목과 본문의 위계가 드러나고 글자가 배경과 구분되는 페이지.
박스 모델로 간격 정리하기
소개 영역과 관심사 영역에 안쪽 여백, 테두리, 바깥 여백을 적용한다. 개발자 도구에서 각 영역의 박스를 살펴본다. 실습 결과: 내용과 영역 사이의 간격이 정돈된 페이지.
Flexbox로 프로필 배치하기
프로필 이미지와 소개 글을 감싸는 영역에 Flexbox를 적용하고 정렬과 간격을 조절한다. 실습 결과: 이미지와 소개 글이 나란히 정렬된 프로필 영역.
화면 크기에 맞춰 배치 바꾸기
프로필 영역의 가로 배치를 좁은 화면에서 세로로 전환하고 이미지와 페이지 너비를 조정한다. 실습 결과: 넓은 화면과 좁은 화면에서 모두 읽기 편한 자기소개 페이지.
완성 페이지 점검과 수정
서로 다른 화면 너비에서 페이지를 열어 가로 스크롤, 글자 대비, 간격, 이미지와 링크를 확인하고 발견한 문제를 수정한다. 실습 결과: 점검을 마친 최종 자기소개 페이지.
예상 시간은 설명 읽기·실행·연습을 포함한 추정치입니다. 읽는 속도와 경험에 따라 달라집니다.