수업 1폰트 선택과 루트 및 body에 폰트 적용 (font-family, 대체 폰트)웹 폰트를 선택하고 적용하는 방법을 발견합니다. 루트와 body에 font-family 설정, 합리적인 대체 폰트 정의, 폰트 스택이 외관, 성능, 크로스 디바이스 일관성에 미치는 영향을 이해합니다.
세리프, 산세리프, 모노스페이스 기본html과 body에 기본 폰트 설정신뢰할 수 있는 font-family 스택 만들기시스템 폰트 vs 웹 폰트Google Fonts 안전하게 로드수업 2간단한 페이지용 레이아웃 기본: 블록 vs 인라인 요소와 가운데 정렬 기술블록과 인라인 요소를 사용한 레이아웃 기본을 배웁니다. 콘텐츠 가운데 정렬, 요소 흐름 제어, 고급 레이아웃 시스템 없이 간단한 페이지 구조를 구축하여 작은 초보자 프로젝트에 이상적입니다.
블록 vs 인라인 vs 인라인-블록text-align으로 텍스트 가운데 정렬auto 마진으로 블록 가운데 정렬전폭 섹션과 고정폭 콘텐츠간단한 레이아웃을 위한 섹션 쌓기수업 3색상과 배경: background-color, color, hex/RGB/HSL 값 사용CSS를 사용한 색상과 배경 제어를 배웁니다. background-color와 color 적용, hex, RGB, HSL 형식 비교, 텍스트가 읽기 쉬운 간단하고 접근 가능한 색상 팔레트 구축합니다.
텍스트와 배경 색상 설정Hex, RGB, HSL 색상 형식간단한 색상 팔레트 만들기대비와 기본 접근성섹션과 버튼용 배경수업 4제목과 리스트 스타일링: 요소, 클래스, 요소 선택자 타겟팅요소, 클래스, ID 선택자를 사용하여 제목과 리스트를 스타일링하는 방법을 배웁니다. 특정 콘텐츠 타겟팅 연습, 지나치게 구체적인 규칙 피하기, HTML을 깨끗하게 유지하면서 페이지 구조에 대한 정밀한 제어 획득합니다.
제목과 리스트용 요소 선택자반복 패턴 스타일링을 위한 클래스 사용ID 선택자로 특정 항목 타겟팅순서 있음 vs 순서 없음 리스트 스타일링리스트 불릿 제거 및 사용자 정의수업 5버튼 스타일링: 배경, 색상, 테두리, border-radius, 패딩, 커서와 호버 상태클릭 가능하고 일관되게 보이는 버튼을 스타일링하는 방법을 배웁니다. 배경, 색상, 테두리, 패딩, border-radius, 커서, 호버 상태를 제어하여 접근 가능하고 재사용 가능한 버튼 스타일을 만듭니다.
기본 버튼 스타일 초기화패딩과 히트 영역 크기배경, 텍스트 색상, 테두리border-radius로 둥근 모서리호버와 액티브 시각 피드백수업 6타이포그래피 기본: font-size, line-height, font-weight, text-align핵심 CSS 속성을 사용한 견고한 타이포그래피를 구축합니다. font-size, line-height, font-weight, text-align을 조정하여 읽기 쉬운 단락, 명확한 제목, 페이지 전체 일관된 텍스트를 만듭니다.
기본 폰트 크기 선택편안한 line-height 설정강조를 위한 font-weight 사용다양한 레이아웃용 텍스트 정렬제목 vs 본문 텍스트 스타일링수업 7작은 페이지용 반응형 고려사항: max-width, 뷰포트 단위, 간단한 미디어 쿼리작은 페이지용 기본 반응형 기술을 이해합니다. max-width, 뷰포트 단위, 간단한 미디어 쿼리를 사용하여 복잡한 프레임워크 없이 휴대폰, 태블릿, 작은 노트북 화면에서 레이아웃이 읽기 쉽게 유지되도록 합니다.
읽기 쉬운 텍스트 블록용 max-width 사용유연한 크기를 위한 뷰포트 단위메타 뷰포트 태그 설정작은 화면용 간단한 미디어 쿼리좁은 뷰포트에서 요소 쌓기수업 8박스 모델 필수 요소: margin, padding, border, box-sizing요소가 예상대로 동작하도록 CSS 박스 모델을 마스터합니다. margin, padding, border, box-sizing을 사용하여 공간 제어, 레이아웃 깜짝 놀람 방지, 깨끗하고 예측 가능한 페이지 구조 구축합니다.
콘텐츠, 패딩, 테두리, 마진DevTools에서 요소 박스 시각화box-sizing: border-box 사용요소 간 간격 제어일반적인 박스 모델 레이아웃 문제수업 9외부 스타일시트 올바르게 연결하고 캐스케이드 기본 이해외부 스타일시트를 올바르게 연결하고 캐스케이드를 이해하는 것으로 시작합니다. 소스 순서, 특이성, 상속이 동일한 요소를 타겟팅하는 여러 CSS 규칙 중 어떤 것이 승리하는지 확인합니다.
HTML head에서 link 태그 사용여러 CSS 파일 안전하게 로드캐스케이드가 충돌 해결 방법특이성: 요소, 클래스, ID일반 텍스트 속성 상속수업 10간격과 시각적 계층: 마진, 패딩, 섹션 래퍼 사용마진, 패딩, 래퍼가 시각적 계층을 만드는 방법을 탐구합니다. 섹션 분리, 관련 콘텐츠 그룹화, 다양한 화면 크기에서 작동하는 일관된 간격을 사용하여 시선을 유도하는 방법을 배웁니다.
마진과 패딩 차이div로 섹션 래퍼 생성제목과 텍스트 간 수직 리듬리스트, 이미지, 버튼 간격붕괴되거나 혼잡한 레이아웃 방지
