Thumbnail
개발 · 프로그래밍 웹 개발

코딩은 처음이라 with 웹 퍼블리싱 - CSS 대시보드

(5)
15개의 수강평 ∙  789명의 수강생

무료

지식공유자: 깨끗한 캥거루
총 33개 수업 (9시간 12분)
수강기한: 
무제한
수료증: 미발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공
폴더에 추가 공유

입문자를 위해 준비한
[웹 개발, 웹 퍼블리싱] 강의입니다.

CSS 기초부터 애니메이션, 반응형까지 학습합니다. 실전 예제를 통해 학습한 내용을 복습하면서 확실하게 기본기를 다집니다.

✍️
이런 걸
배워요!
CSS 선택자
CSS 서체 글자 스타일
CSS 레이아웃 - float, position
CSS 애니메이션, 반응형

HTML 다음은 CSS!
CSS로 돋보이는 웹페이지를 만드세요 ⭐

코딩은 처음이라 with 웹퍼블리싱

웹 문서 완성도를 높이는 CSS 🎨

CSS는 웹 문서에서 모양을 담당합니다. HTML 요소에서 대상을 선택하고 선택한 대상의 색상, 배경, 위치, 애니메이션 등을 설정하여 보기 좋고 사용도 편리한 웹문서를 만들 수 있어요.

이번 강의는 <코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초>에 이어지는 강의로, HTML 학습이 되었다는 전제로 웹페이지 스타일 설정에 필요한 필수 테크닉을 학습합니다.

CSS는 HTML 요소에서 스타일 대상을 정확하게 선택하는 것이 우선입니다. 이번 강의에선 CSS 선택자를 확실하게 학습할 수 있어요. 반응형 기초를 확실하게 습득해서 다양한 너비의 기기에서 최적화되어 표현되는 웹 페이지를 구현합니다. transition 및 animation, transform 속성을 활용하여 애니메이션을 구현하는 방법까지 배워보세요.

강의를 들은 후 여러분은 CSS 선택자를 통해 원하는 요소를 정확하게 선택하고, 선택한 요소의 스타일을 자유자재로 설정할 수 있게 될 거예요!

✔️ 도서 저자 직강 강의를 만나보세요!

  • 본 강의는 영진닷컴의 도서 <코딩은 처음이라 with 웹 퍼블리싱>의 저자가 도서 내용을 기반으로 강의를 진행합니다. 도서와 함께 보시면 학습에 더 도움이 되실 거예요.
  • '코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초' 강의를 수강한 후 본 강의를 이어 학습해주세요.
  • 보충학습이 필요하시다면 저자의 유튜브 채널에서 추가 강의를 만나보세요.

이런 분들께 추천해요 🙋‍♀️

HTML 기초는 있지만
CSS 기초가 부족한 분

반응형, 애니메이션 구현이
어려운 분

Flex를 활용한 유연한
레이아웃을 배우고 싶은 분


강의 특징 ✨

CSS 스타일 설정에 필요한 속성
하나하나 학습해요!

수년간의 강의 경력을 바탕으로
이해하기 쉽게 설명해드려요!

심플한 예제로
기본을 확실하게 다져요!

Flexbox를 통한
효율적인 레이아웃을 배워요!


이런 걸 배워요 📚

1) CSS 선택자를 확실하게 학습합니다. CSS의 시작은 대상을 정확하게 선택하는 것에서부터 시작합니다.


2) 서체 관련 스타일을 학습합니다.


3) 레이아웃과 관련된 필수 속성을 학습합니다.


4) 배경 관련 속성을 모두 학습합니다.

 


5) Flexible 레이아웃의 핵심 flex를 학습하여 더욱 다양한 레이아웃을 쉽게 구현합니다.


6) 애니메이션의 기초를 학습합니다.


7) 반응형의 기초를 확실하게 학습하고 실습합니다.

데스크탑 화면

태블릿 화면

모바일 화면


8) 앞 강의에서 작성한 HTML 웹페이지를, CSS를 활용하여 구현합니다. 


Q&A 💬

Q. 비전공자도 들을 수 있는 강의인가요?

HTML 강의를 수강했거나, 기초가 있으면 가능합니다.

Q. 수업 내용을 어느 수준까지 다루나요?

선택자부터 반응형까지 방대한 양을 다룹니다. 과욕은 금물입니다. 앞부분부터 차근차근 학습하면 수강 완료하실 수 있습니다.

Q. 완강한 다음엔 어떤 학습을 하면 좋을까요?

다양한 디자인을 참조하여 HTML과 CSS를 활용하여 웹페이지 제작을 연습해보세요. 그 후 Javascript 학습을 추천합니다.


지식공유자 소개 ✒️

안녕하세요. rock's easyweb 유튜브 채널 운영자 김동주 강사입니다.  

주요 도서

  • 웹디자인 & 웹 퍼블리싱을 위한 피그마 완벽 활용서 - 비제이퍼블릭 출판사

  • 코딩은 처음이라 with 웹 퍼블리싱 - 영진닷컴

Contact Me

오프라인 강의 정보, 추가 영상 등을 확인하실 수 있습니다. 


이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
HTML을 학습하신 분
반응형 구현이 힘든 분
애니메이션 기초가 부족한 분
📚
선수 지식,
필요할까요?
HTML
포토샵

안녕하세요
깨끗한 캥거루 입니다.
깨끗한 캥거루의 썸네일

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱 강사
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭
코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

커리큘럼 총 33 개 ˙ 9시간 12분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. CSS 기초
CSS 기본문법, 색상 미리보기 18:25
CSS 단위 19:22
CSS 선택자 - 전체, tag, id, class, 자손, 자식 14:26
CSS 선택자 - 형제, 속성, 의사 클래스 선택자 19:03
CSS 선택자 - 구조, 형태구조, 상태, 부정선택자 19:38
CSS 선택자 우선순위 07:29
서체 - 폰트 로드, 폰트 적용 16:24
글 스타일 - 크기, 두께, 장식, 스타일 14:53
글자 정렬, 글자 간격, 들여쓰기 14:50
글자 변경, 세로 정렬, 리스트 스타일 12:23
overflow 18:32
background - color, image, attachment 15:51
background-position, size 13:26
box model 16:02
Layout - float 16:25
Position - relative, absolute 15:14
Position - fixed, stickty, z-index 14:29
Flex - part 1 / basic, direction, wrap, flow, justify-content 19:48
Flex - part 2 / order, flex 12:55
섹션 1. CSS 중급
text-shadow, box-shadow 미리보기 10:37
gradient 18:39
transition 13:28
animation 17:35
transform - translate, scale 21:20
transform - rotate, skew 09:15
Responsive - 반응형 기초, 연습1 19:31
반응형 연습 2 - 헤더 반응형 17:32
실전예제 - caption animation, Aside Navigation 24:29
섹션 2. 디자인 참조 - CSS 완성하기
디자인 참조 CSS 작성, CSS리셋, 구글 웹폰트, 공통요소 CSS 27:27
디자인 참조 CSS 작성, Header 파트 CSS 14:51
디자인 참조 CSS 작성, About Me 파트 CSS 미리보기 17:25
디자인 참조 CSS 작성, Latest Articles 파트 CSS 19:54
디자인 참조 CSS 작성, Contact, Footer CSS 완성 20:37
강의 게시일 : 2022년 10월 07일 (마지막 업데이트일 : 2023년 01월 05일)
수강평 총 15개
수강생분들이 직접 작성하신 수강평입니다.
5
15개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
아라레 thumbnail
5
좋은 강의 감사합니다.
2023-06-22
knyatom thumbnail
5
감사합니다
2023-04-02
hesshes thumbnail
5
입문자에게 간결하고 쉽게 설명
2023-05-29
yeegok3 thumbnail
5
책 잘 보고 있습니다.
2023-05-06
seung lee thumbnail
5
지금 강의 듣고있는데 계속 듣고싶어서 멈출 수가 없습니다! 좋은 강의 무료로 풀어주셔서 정말 감사합니다 추후 javascript나 서버, 프레임워크 강의 계획은 없으신가요??
2023-03-23