핵심만 골라 배우는 CSS3

초급

핵심만 골라 배우는 CSS3

프론트엔드 입문자들은 필수적으로 익혀야하는 CSS3!! 기초부터 시작해서 고급에 이르기까지 CSS3를 샅샅히 파헤쳐봅니다!

22
22개의 챕터
체계적인 챕터 구성
187
187개의 동영상
평균 7분 내외
45
약 45 시간
학습 권장 시간
5.0
수강평
11명 참여

59,800원

코스 소개

핵심만 골라 배우는 CSS3는
[입문자]를 위해 준비한 강좌입니다.

아직도 주먹구구식으로 스타일을 적용하세요!?
이제는 스타일도 체계적으로 배워서 올바르게 적용해보세요.
CSS는 HTML과 함께 웹 개발의 기초가 되는 기술입니다.
한 번도 공부한 적이 없는 분들은 물론이고,
CSS를 공부했지만 정확하게 안다고 자신할 수 없는 분들까지
모두에게 추천하는 강의입니다.

혹시 수코딩이 집필한 CSS 책을 보셨나요?

[코딩 자율학습 HTML+CSS+자바스크립트] 완독 후에
어떻게 공부해야 하냐구요?

수코딩이 집필한 [코딩 자율학습 HTML+CSS+자바스크립트]!! (구매링크)
무료 강의까지 제공하는 이 책을 완독하셨다면, 이제 어떻게 공부해야 할까요?
지금 당장!! [핵심만 골라 배우는 CSS] 유료 강의를 통해
더 확장되고 넓은 범위의 HTML과 CSS를 배워보세요.
책에서는 미처 소개하지 못한 고급 기술을 배울 수 있습니다.

학습 기술

이 강의에서 배울 수 있는 기술

CSS3
최신 CSS3 문법과 실무에서 자주 사용하는 실전 팁을 배울 수 있습니다.
CSS3(with HTML5)
HTML5로 작성된 문서에 효율적으로 스타일을 적용하는 방법을 배울 수 있습니다.
레이아웃
Position, Float 등을 사용한 레이아웃 정리 기법을 배울 수 있습니다.
Flex + Grid
최신 CSS3의 핵심이라고 할 수 있는 Flex와 Grid를 배울 수 있습니다.
반응형
반응형 스타일을 적용하는 방법을 배웁니다.
애니메이션
CSS3의 고급개념과 애니메이션 기법을 배울 수 있습니다.

실전 예제

이 강의에서 만들어보는
역대급으로 다양한 미니 프로젝트

Basic Practice충실한 기초실습

학습 진행상황에 맞는 기초 실습을 통해 CSS3를 체계적으로 배웁니다.

Layout심플 갤러리

레이아웃 설계 방법을 배우면서 심플한 갤러리 페이지를 만들어봅니다.

ResponsiveWorks Together

기본에 충실한 HTML5 마크업과 CSS3 적용, 그리고 미디어쿼리를 사용한 반응형까지 완벽하게 배워볼 수 있는 실습입니다.

transition트랜지션 마스터

단순하게 이론으로만 트랜지션을 배우는 건 아니죠? 탄탄한 실습과 함께 트랜지션을 마스터해요.

GridGrid Layout Card

그리드 레이아웃을 배우면서 카드형식의 UI를 만들어봅니다.

Final Project 1수스타그램

인스타그램과 같은 형식의 메인 화면을 클론 코딩하면서 레이아웃을 설계하는 방법을 체계적으로 배워봅니다.

Final Project 2Google Clone

구글 메인 화면을 구글 로고부터 검색창까지 완벽하게 클론 코딩합니다.

Final Project 3여행블로그

체계적인 HTML5 구조는 물론 완벽한 CSS3 스타일링을 배울 수 있는 프로젝트입니다. 당연히 반응형도 챙겨가야죠!

Final Project 4Chatting App

100% 모바일에 반응하는 채팅 앱을 만들어봅니다. HTML5, CSS3, Grid, Flex 총 출동~

Final Project 5Living Room

연습하고 또 연습하고! 최신 HTMl5 문법과 CSS3의 스타일 적용을 통해서 메인 화면을 만들어 봅니다. 반응형은 기본이죠!

Final Project 65Pm

드디어 마지막 프로젝트!! 진짜 퍼블리셔가 되신 것을 축하합니다. 제 모든 노하우를 전수해드렸습니다. 더는 가르쳐드릴 게 없어요. 하산하세요 :)

추천대상

핵심만 골라 배우는 CSS3는
누가 들으면 좋을까요?

입문자

CSS를 한 번도 공부한 적이 없는 초보자 & 입문자

경험자

CSS3를 알긴 하지만, 정확하게 안다고 자신할 수 없는 경험자

실무자

아직도 대충 감으로만 CSS3를 사용하는 실무자

부담없이 쉽게

복잡한 설명 없이 단순하고 쉽게 배우고 싶은 사람

FAQ

자주 묻는 질문

Q. 사전에 학습해야 하는 것들이 있나요?
네, 본 강좌를 원활하게 듣기 위해서는 HTML5에 대한 사전 학습이 필요합니다.
Q. HTML 유료 강좌를 꼭 들어야만 내용이 이해가 가도록 구성되었나요?
아닙니다. 수코딩의 HTML5 유료 강좌가 아니더라도 HTML을 학습하신 상태라면 이 강좌를 듣는 데 전혀 불편함이 없습니다.
Q. 피그마를 한 번도 사용해본 적이 없습니다. 그래도 강좌를 듣는데 불편함이 없을까요?
해당 유료 강좌에서는 UI 실습 및 프로젝트에 해당하는 디자인을 피그마로 제공합니다. 강의를 듣는데 필요한 최소한의 피그마 사용법은 강좌에서 다루고 있기 때문에 피그마를 사전에 모르고 계셔도 괜찮습니다.
Q. [코딩 자율학습 HTML+CSS+자바스크립트] 책에서 제공되는 무료 강좌와 차이점이 있나요?
많은 차이가 있습니다. 유료 강좌는 온라인으로 학습하기에 최적화된 커리큘럼을 기반으로 제작했습니다. 따라서 강좌의 내용 구성이 책에서 제공된 무료 강좌와 차이가 크게 납니다. 또한, 책의 지면상의 이유로 자세히 설명하지 못했던 부분도 유료 강좌에서는 폭넓게 다루고 있습니다. 그리고 동영상의 편집 및 퀄리티도 압도적으로 유료 강좌가 더 좋습니다.

수코딩이 보장하는

커리큘럼

총 레슨 187개
영상: 134
실습: 38
노트: 14
객관식: 1

1. 시작하기(공통)
- 수코딩 교육 시스템
- 웹 개발은 어떤 언어로 시작하는 게 좋을까요?
- 개발 환경 구성하기(with Visual Studio Code)
- 비주얼 스튜디오 코드 작업 폴더 설정
- 피그마(Figma) 활용법 - 파일 및 회원가입
- 피그마(Figma) 활용법 - 파일 불러오기
- 피그마(Figma) 활용법 - 리딩 방법
- 동영상 버퍼링 해결법
2. CSS 기본개념
- CSS란?
- CSS 기본 문법
- CSS 적용
- CSS 기본개념 정리
3. 기본 선택자
- 태그 선택자
- 아이디 선택자
- 클래스 선택자
- 그룹 선택자
- 기본 선택자 정리
- [실습] 기본 선택자 연습
- [정답] 기본 선택자 연습
- [퀴즈] 기본 선택자
4. Typography
- 색상 표현 방법
- 크기
- 폰트 크기를 나타내는 단위
- 글꼴 및 구글 웹 폰트
- 글꼴 CSS 파일
- 굵기
- 글자 스타일
- 글자 정렬
- 행간
- 싸인(Sign)
- (정답) 싸인(Sign)
5. 박스모델
- 박스모델
- 크롬 개발자 도구
- 박스성질
- margin
- border
- padding
- width
- 테두리를 둥글게 하려면?
- 그림자 효과 주기
- 박스크기의 비밀
- [실습] 프라이스 플랜
- [해설] 프라이스 플랜
- 프라이스 플랜 최종 코드
6. CSS 원리 이해하기
- CSS 적용 심화
- 기본 스타일 시트와 기본값
- 상속(inherit)
- CSS 속성의 공통 값
7. 배경 다루기
- 배경 색상 지정하기
- 배경 이미지 지정하기 - 上
- 배경 이미지 지정하기 - 下
- (실습) 심플 배너
- (해설) 심플 배너
- 심플 배너 최종 코드
- [실습] 심플 랜딩 페이지
- [해설] 심플 랜딩 페이지
- 심플 랜딩페이지 최종 코드
8. 선택자 심화
- 속성 선택자
- 속성 선택자의 종류
- 가상 클래스 선택자
- 가상 요소 선택자
- 가상 선택자 정리
- 전체 선택자
- 하위 선택자
- 자식 선택자
- 형제 선택자
- (실습) 선택자 지정하기
- (정답) 선택자 지정하기
9. 위치 다루기
- static
- relative
- absolute
- fixed
- sticky
- position 속성 정리
- (실습) 이미지 북마크
- (정답) 이미지 북마크
- float
- (실습) 심플 갤러리
- (해설) 심플 갤러리 - HTML
- (해설) 심플 갤러리 - CSS
- 심플 갤러리 최종 코드
10. Works Together
- (실습) Works Together
- (해설) Works Together - HTML
- (해설) Works Together - CSS 1
- (해설) Works Together - CSS 2
- (해설) Works Together - Media Query
- Works Together 최종 코드
11. 트랜지션
- transition-duration
- transition-property
- transition-timing-function
- transition-delay & transition
- [실습] 트랜지션 실습
- (해설) 트랜지션 실습
- 트랜지션 실습 최종 코드
12. 애니메이션
- 애니메이션이란?
- 애니메이션 속성 - 上
- 애니메이션 속성 - 下
- 애니메이션 속성 정리
- [실습] 로딩 애니메이션 만들기
- (해설) 로딩 애니메이션 만들기
13. 변형
- transform-2d
- transform-3d
14. Flexible Box Layout
- [실습] 워밍업
- [해설] 워밍업
- Flexible Box Layout - 上
- Flexible Box Layout - 下
15. Grid Layout
- [실습] 그리드 워밍업
- [정답] 그리드 워밍업
- 그리드 레이아웃 용어
- 그리드 레이아웃 기본
- fr(fraction)
- minmax, repeat
- gap
- 정렬 속성
- 그리드 넘버 활용하기
- (실습) 그리드 레이아웃 만들기
- (해설) 그리드 레이아웃 만들기 - HTML
- (해설) 그리드 레이아웃 만들기 - CSS
- 그리드 레이아웃 만들기 최종 코드
16. Profile Card
- (실습) Profile Card
- (해설) Profile Card - HTML
- (해설) Profile Card - CSS - 1
- (해설) Profile Card - CSS - 2
- (해설) Profile Card - CSS 3
- Profile Card 최종 코드
17. Media Query
- 반응형 웹과 적응형 웹
- 미디어 쿼리 - 상
- 미디어 쿼리 - 하
- 미디어 쿼리 정리
- 뷰포트
- 뷰포트 정리
18. Google Clone Coding
- Google Clone Coding
- [해설] Google HTML Markup - 1
- [해설] Google HTML Markup - 2
- [해설] Google HTML Markup - 3
- (해설) Google CSS Style - 1
- (해설) Google CSS Style - 2
- (해설) Google CSS Style - 3
- (해설) Google CSS Style - 4
- (보너스) Google CSS Style - 5
- Google Clone 최종 코드
19. Travel
- (실습) 여행 블로그
- (해설) 여행 블로그 - HEADER - HTML
- (해설) 여행 블로그 - HEADER - CSS
- (해설) 여행 블로그 - HEADER - CSS (수정)
- (해설) 여행 블로그 - Banner - HTML
- (해설) 여행 블로그 - Banner - CSS
- (해설) 여행 블로그 - POST - HTML
- (해설) 여행 블로그 - POST - CSS
- (해설) 여행 블로그 - POST - CSS ( 수정)
- (해설) 여행 블로그 - FOOTER
- (해설) 여행 블로그 - 미디어쿼리
- (보너스) 여행 블로그 - 햄버거 애니메이션
- 여행 블로그 최종 코드
20. Chatting App
- (실습) Chatting App
- (해설) Chatting APP - HTML
- (해설) Chatting APP - CSS - 1
- (해설) Chatting APP - CSS - 2
- (해설) Chatting APP - CSS - 3
- (해설) Chatting APP - CSS - 4
- Chatting App 최종 코드
21. Living Room
- (실습) Living Room
- (해설) Living Room - Header - HTML
- (해설) Living Room - Banner - CSS
- (해설) Living Room - Header - CSS
- (해설) Living Room - ROOM - HTML
- (해설) Living Room - ROOM - CSS
- (해설) Living Room - Review - HTML
- (해설) Living Room - Review - CSS
- (해설) Living Room - Contact Us - HTML
- (해설) Living Room - Contact Us - CSS
- (해설) Living Room - Footer - HTML
- (해설) Living Room - Footer - CSS
- (해설) Living Room - Media Query
- Living Room - 최종 코드
22. clothes store
- (실습) clothes store
- (해설) clothes store - header - html
- (해설) clothes store - header - css
- (해설) clothes store - banner - html
- (해설) clothes store - banner - css
- (해설) clothes store - best - html
- (해설) clothes store - best - css
- (해설) clothes store - arrivals
- (해설) clothes store - footer - html
- (해설) clothes store - footer - css
- (해설) clothes store - media query
- clothes store - 최종 코드

수강생 강의 후기

11명 참여 / 5.0(11 ratings)

100%

정후식

열심히 보고 있습니다.

안예지

CSS 강의 내용이 실무에 바로 적용될 수 있는 내용들로 구성되어 있어서, 학습한 기술들을 프로젝트에 바로 활용할 수 있었습니다.

백이연

CSS 강의에만 다른 곳에서 결제한 돈만 해도 20만원이 넘는데... 이 강의가 예제랑 실습이 다양해서 제일 도움이 되네요 ㅠㅠ 진작 알았으면 좋았을것 같아요..!

sophie

최신 기술도 많이 담겨있어서, 프론트엔드 실무자에게도 큰 도움이 되었습니다! 질문드리면 답변도 정성스레 해주신답니다~! 수코딩 짱짱맨 계신 곳으로 인사올립니다ㅎㅎㅎ🙇🏻‍♀️

임종훈

HTML강의 완강하고 CSS 강의도 완강한 후에 후기 남깁니다. 원래 후기 잘 안남기는데 강의 퀄리티에 비해서 후기가 적은것같아서 남겨요. 일단 확실하게 말할수있는건 강의스타일만 본인과 맞다고 느껴지면 무조건 들으셔야하는 강의입니다. 수십개의 온라인강의를 들어보니까 가르치는사람마다 말투,억양,분위기 이런게 다 다른데 지금까지 들었던 강의중에서는 그래도 저랑 제일 잘맞는 스타일이었던 것같아요. 너무너무 만족스럽게 완강하고 후기까지 남깁니다

수수수숫

국비과정 듣고 바로 퍼블리셔로 취업해서 일하던 퍼블리셔입니다. 사수도 없이 일하다보니 잘하고 있는건가 의문이 들기 시작했었어요. 우연히 유튜브에서 접하게 되어 유료강의로 넘어왔는데 핵심만 쏙쏙 담겨있어서 지하철 타고 다니면서 듣기에도 부담도 덜해요. 자바스크립트도 나오면 좋을 것 같아요 ! : ) 감사합니당

김한올

회사에서 포토샵쓰다가 갑자기 피그마로 디자인 툴이 바뀌면서 당황스러웠는데 이 강의 덕분에 당황하지 않고 할 수 있었어요.감사합니다^^

김민석

와... 진짜 ....... 말해 무엇합니까 무조건 결제하세요. 리얼 인생 강의 ....

한수진

단언하건데 현존하는 최고의 CSS 강의인것 같아요. 제가 여러 강의를 들어봤지만 전부다 이론만 알려주는 경우가 많았는데 수코딩님의 강의에서는 현업에서 하는 것처럼 피그마를 이용해서 실습을 진행하니까 이게 너무나 도움이 되요!!!! 현재 회사에서도 피그마로 디자인을 하고 있기 때문에 저는 더 도움이 되는 것 같아요. 진짜 너무너무너무 추천합니다!!!

최유미

HTML 강의에 이어서 CSS 강의도 결제하고 보고 있는중입니다. 완전 초보인데도 불구하고 설명을 들으면 이해되는게 너무 신기하네요 ㅎㅎㅎ 그렇지만 확실히 HTML 강의보다는 CSS가 훨씬 어렵긴하네요ㅠㅠ 어렵지만 중간중간 실습도 열심히 하고 피드백도 바로 해주시니까 많은 도움이 됩니다. 이거 꼭 다 듣고 자바스크립트 강의도 나오면 꼭 보고싶어요!!!