반응형
지난 HTML 강의에 이어 CSS에 대한 강의를 시작합니다. CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 디자인과 스타일링을 담당하는 언어입니다. CSS를 사용하면 HTML로 작성된 내용을 아름답고 멋진 디자인으로 꾸밀 수 있습니다.
이 강의에서는 CSS의 기본 개념과 기능을 알려드리고, 실제 예시와 함께 CSS를 활용한 웹 페이지 스타일링을 직접 경험해보겠습니다.
이번에도 목차 먼저 공개!
1. CSS 소개
2. 요소 선택자
- 클래스 선택자: 웹 디자인의 다양성을 위한 강력한 도구
- ID 선택자: 웹 디자인의 독특한 식별자
- 그룹화 선택자: 여러 요소에 일괄적으로 스타일 적용하기
- 가상 클래스와 가상 요소: CSS의 미세한 디자인 제어
- CSS 스타일 규칙: 디자인의 핵심 원리
3. 속성과 값
- 인라인 스타일과 내부 스타일 시트
- 외부 스타일 시트와 연결
- CSS 주석
- 박스 모델
4. 너비와 높이 설정
- 여백 (마진과 패딩)
- 테두리 (border)
- 박스 모델의 영역 (content, padding, border, margin)
- 레이아웃
5. 위치와 정렬 (position, float)
- 블록 요소와 인라인 요소
- Flexbox 레이아웃
- 그리드 레이아웃
- 텍스트 스타일링
6. 글꼴 설정
- 텍스트 색상과 배경색
- 텍스트 정렬과 간격
- 텍스트 장식 (텍스트 그림자, 텍스트 효과)
- 배경과 그라디언트
7. 배경 색상과 이미지
- 배경 크기와 위치
- 그라디언트 배경
- 변환과 애니메이션
8. 요소 변환 (회전, 크기 조절)
- 애니메이션 효과 추가
- 키프레임 애니메이션
- 반응형 디자인
9. 미디어 쿼리 소개
- 뷰포트 설정
- 미디어 쿼리를 사용한 반응형 디자인
- CSS 전처리기
10. SASS/SCSS 소개
- 변수와 믹스인 활용
- SASS 컴파일과 활용
- CSS 프레임워크
11. Bootstrap 소개
- Bootstrap 그리드 시스템
- 부트스트랩 컴포넌트 활용
- 브라우저 호환성과 웹 성능
12. 브라우저 호환성 이슈
- CSS 최적화와 성능 향상 방법
- 실전 프로젝트 예시
13. 간단한 웹 페이지 레이아웃 구성
- 이미지 갤러리 디자인
- 반응형 랜딩 페이지 구현
반응형
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."