【한글자막】 CSS 완벽 가이드 (Flexbox, Grid & Sass 포함)

• CSS를 더 깊고 명확히 이해하여 더 완벽하고 멋진 웹사이트를 구축하세요.

• CSS 기초부터 고급 트랙, 나아가 전문가 트랙 단계로 나눠서 구성하였습니다.

• 이론과 실제 예시를 모두 다룹니다. 강의를 통해 프로젝트 하나를 완전히 구축하세요!

[본 강의를 수강해야 하는 이유]

CSS는 Cascading Style Sheets(캐스케이딩 스타일 시트)의 줄임말로서 원시 HTML 페이지를 멋진 웹사이트로 만들 수 있는 ‘프로그래밍 언어’입니다.

본 강의에 모든 내용이 포함되어 있습니다. CSS의 정의, 원리, 사용 방법 같은 아주 기본적인 내용부터 시작해서 점차 심화한 내용을 다룹니다. 본 강의는 실제 예시와 그 이론을 함께 살펴보는 방식으로 진행됩니다.

CSS를 시작하기는 언뜻 쉬워 보일 수도 있으나 사실 CSS는 꽤 깊이 있는 언어입니다. 따라서 본 강의는 여러분의 필요 및 현재의 지식수준을 반영하여 다양한 ‘트랙’ 또는 ‘진입점’을 제공합니다.

[강의 구성]

• 기본 트랙: 처음부터 시작해서 CSS의 기초부터 다집니다. 강의 1부터 순서대로 끝까지 수강하시면 됩니다.

• 고급 트랙: 선택자가 무엇인지 어떻게 작동하는지와 같은 CSS의 기본적인 내용을 알지만 좀 더 깊게 알고 싶고 고급 기능과 사용법을 배우고 싶은 분들에게 적합한 트랙입니다.

• 전문가 트랙: 고급 지식을 갖추었고 Flexbox, CSS 그리드, CSS 변수, Sass. 와 같은 기능에 대해 깊게 파고들고 싶은 분들에게 적합한 트랙입니다.

[본 강의에서 다룰 내용]

#1. 본 강의에서는 이론과 실제 예시를 모두 다룹니다. 강의를 통해 프로젝트 하나를 완전히 구축해 볼 겁니다. 이와 더불어, 다양한 과제, 퀴즈, 도전 과제를 제공해 여러분이 강의 과정에서 배우는 각 개념을 익힐 수 있도록 구성했습니다.

#2. 본 강의의 프로젝트에 대한 설명 - 가상의 웹 호스팅 회사의 프론트엔드 웹을 구축합니다. 여러 부분으로 구성된 시작 화면을 만들고, 사이드 드로어 애니메이션을 활용한 반응형 디자인을 만들어 볼 것입니다. 모달과 폼, CSS 애니메이션, 폰트 스타일 등을 다양하게 활용해 봅니다!

[강의 세부 주제]

강의의 세부 내용은 다음과 같으며 이는 앞서 언급한 강의 프로젝트에도 모두 적용해 볼 겁니다.

• 선택자와 결합자에 대한 기본 사항, 일반 스타일링 규칙 정하는 방법

• 프로퍼티와 값 및 선언

• 명시도와 상속의 원리, ‘캐스케이딩’ 스타일 시트라고 부르는 이유

• ‘박스 모델’과 같은 주요 이론 개념

• 요소가 배치되는 기본 설정값을 변경하는 방법

• 이미지와 배경 이미지 스타일링하기 (예: 그러데이션)

• CSS에서 자주 사용하는 단위와 치수 (px, rem, % 등)

• JavaScript와 CSS가 상호작용하는 방식

• 반응형 디자인과 ‘모바일 최적화’의 의미

• 폼 요소와 폼 입력 요소 스타일링하기

• 텍스트, 폰트 및 텍스트 스타일 작업

• Flexbox! Flexbox의 원리와 사용 방법

• CSS 그리드 사용 방법, Flexbox와 다른 점

• CSS를 활용한 HTML 요소 변형 및 애니메이션 적용

• CSS 변수나 모범 사례가 되는 클래스 이름 등을 활용해 미래에도 사용할 수 있는 CSS 코드를 작성하는 방법

• Sass 사용 방법과 설명

[본 강의의 대상]

이런 분들에게 적합합니다

• 보다 멋진 웹사이트를 구축하고 싶은 웹 개발 초보자

• CSS를 알지만 보다 더 깊이 알고 싶은 분

• 시행착오로 CSS 사용에 지쳐 개선이 필요하신 분 (이제는 바뀌셔야 합니다!)

이런 분들은 좀 더 생각해보시길 바랍니다.

• CSS 실력이 전문가 수준이며 CSS 워킹 그룹 드래프트를 잘 이해하고 있는 분

• 노드나 PHP를 사용하며 HTML이나 프론트엔드 JavaScript는 사용하지 않는 백엔드 전문 개발자

• 웹 개발을 난생처음 배우며 HTML의 기본부터 배워야 하는 분

이런 점들을 고려하여 본 강의를 수강하기로 결정하신 모든 분을 진심으로 환영합니다!

1강에서 뵙겠습니다.

- Maximilian