본문 바로가기

Course

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

CSS 완벽 가이드
(Flexbox, Grid
& Sass 포함)

CSS의 기초부터 고급 트랙, 더 나아가
전문가 트랙 단계로 나눠서 구성된
완벽 가이드: 이론과 실제 예시를
모두 다룹니다. 강의를 통해 프로젝트
하나를 완전히 구축해보세요!

배울 내용

CSS를 쉽게 배우는 방법, 왜 CSS가 대단한지 알게 됩니다.

Flexbox, 그리드, 애니메이션, 트랜지션, 폰트, 미디어 쿼리 등등 CC의 모든 것을 배웁니다.

콘텐츠만큼이나 보기 좋은 웹사이트를 구축해 봅니다.

CSS의 기본 기능뿐만 아니라 고급 기능까지 학습합니다.

CSS와 특정 CSS 기능의 개념과 이론을 이해할 수 있습니다.

Maximilian Schwarzmüller

AWS 인증 프로페셔널 웹 개발자 및 강사


이런 분들에게 추천해요

CSS를 처음 배우는 분과 이미 보유한 CSS 최신 웹 개발 기술에 관심이 있으신 분

Flexbox, CSS 그리드 또는 CSS 변수와 같은 최신 CSS 기능을 습득하고 싶은 분

CSS를 알고는 있으나 좀 더 깊이 공부하고 싶은 초보 개발자 및 취업준비생

● 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

평생 이용권22.5시간 동영상
TV&모바일 엑세스 강의 수료증