HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, animation 까지
표준 HTML부터 flex/grid 모던 레이아웃, Bootstrap, Sass, CSS 애니메이션 등
웹페이지 디자인과 퍼블리싱에 필요한 모든 내용을 배우실 수 있습니다.
최근 스타트업, 대기업 등에서 적극 사용하고 있는 최신 스타일 HTML과 CSS 문법을 배워가도록 합시다.
꽉차보이는 포트폴리오를 만들 수 있는 여러가지 UI 예제들이 준비되어있지만
닥치고 선생님 코드 받아적기만 하면 정말 그것밖에 못만들기 때문에
여러분들이 무엇을 보든 직접 만들 수 있도록 CSS 동작 원리를 알려주는 내용들이 많습니다.
[커리큘럼 요약]
- HTML5 기초
- 기본 float position display 레이아웃
- flex/grid 등 새로운 스타일 레이아웃 기법
- 최신스타일 깔끔한 코드로 만드는 반응형 웹
- Bootstrap, font-awesome, google fonts 필수 라이브러리 사용법
- 자바스크립트 없는 pure CSS 애니메이션
- Sass CSS 전처리 엔진
- 관리가능한 CSS 작성법 (아키텍처)
- Emmet 등 생산성을 위한 툴
- 20개 이상의 포트폴리오용 UI elements
- 3개의 실전 프로젝트 (반응형 랜딩페이지, SNS프로필 페이지, 통계관리 Admin 페이지)
[필요한 사전지식]
없음
[업데이트 사항]
- 3D 애니메이션 강의 추가
- 신년기념 전체강의 업데이트 끝
커리큘럼
| 기초모듈 | |||
| HTML 기초와 개발환경 셋팅 | 무료 | 00:05:00 | |
| HTML 기본 태그로 글 작성해보기 | 무료 | 00:09:00 | |
| 기본적인 웹페이지 스타일링 | 무료 | 00:12:00 | |
| CSS 파일 만들고 첨부하는 법 | 무료 | 00:11:00 | |
| 웹레이아웃의 기초 : div를 이용한 네모네모 박스 디자인 | 무료 | 00:12:00 | |
| 레이아웃 만들기 1 : 호환성 좋은 float | 무료 | 00:13:00 | |
| 레이아웃 만들기 2 : 귀찮은 inline-block | 00:11:00 | ||
| 레이아웃 만들기 숙제 : Blog 글목록 만들기 | 00:12:00 | ||
| 셀렉터를 이용해 CSS 코드 양 줄이기 | 00:12:00 | ||
| 배경 이쁘게 넣는 스킬들 & margin collapse | 00:12:00 | ||
| position과 좌표 레이아웃 만들기 | 00:11:00 | ||
| position 숙제 & 반응형 width & box-sizing | 00:11:00 | ||
| form & input | 00:09:00 | ||
| form & input 숙제 : Contact Us 섹션 만들기 | 00:15:00 | ||
| 쓸데 많은 Table 레이아웃과 vertical-align속성 | 00:12:00 | ||
| Table 레이아웃 숙제 : Cart 페이지 만들기 | 00:14:00 | ||
| pseudo-class로 인터랙티브 버튼 만들기 | 00:09:00 | ||
| 코드양이 줄어드는 class 작명법 (OOCSS, BEM) | 00:12:00 | ||
| 중급모듈 | |||
| HTML CSS 웹폰트 넣는 법과 안티앨리어싱 | 무료 | 00:11:00 | |
| 레이아웃 만들기 3 : 편리한 Flexbox | 무료 | 00:12:00 | |
| HTML CSS 코드짤 때 유용한 Emmet 그리고 부가기능들 | 무료 | 00:05:00 | |
| head 태그에 들어갈 내용 정리 | 00:05:00 | ||
| 반응형 레이아웃 만들기 | 00:13:00 | ||
| 반응형 레이아웃 숙제 : 가로정렬 레이아웃 | 00:10:00 | ||
| 개발자도구 잘쓰기 | 00:08:00 | ||
| Font Awesome 아이콘 넣기 | 00:10:00 | ||
| Transition 속성으로 CSS 애니메이션 구현하기 | 00:11:00 | ||
| Transition 숙제 : 상품진열 레이아웃과 애니메이션 | 00:12:00 | ||
| Portfolio 실습 1 : Landing Page | 00:00:00 | ||
| Portfolio 실습 1 : Landing Page (해설편) | 00:00:00 | ||
| Bootstrap 설치와 사용법 | 00:11:00 | ||
| Bootstrap Grid 레이아웃 | 00:11:00 | ||
| Bootstrap Grid 레이아웃 숙제 해설 | 00:12:00 | ||
| CSS 덮어쓰기 잘하는 법 & 어떤 코드가 좋은 코드인가요 | 00:10:00 | ||
| Portfolio 실습 2 : SNS Profile | 00:00:00 | ||
| Portfolio 실습 2 : SNS Profile (해설편) | 00:00:00 | ||
| 고급모듈 | |||
| 약간 쓸데없는 Pseudo-element | 무료 | 00:09:00 | |
| 딥다크한 어둠의 공간 Shadow DOM | 무료 | 00:12:00 | |
| 만든 사이트 발행하기 | 무료 | 00:05:00 | |
| 쉽게 배우는 Sass 기초 1편 : 셋팅 | 무료 | 00:09:00 | |
| 쉽게 배우는 Sass 2편 : 핵심문법 | 00:09:00 | ||
| 쉽게 배우는 Sass 3편 : Mixin, use 등 | 00:13:00 | ||
| 쉽게 배우는 Sass : 숙제 해설 | 00:13:00 | ||
| HTML video, audio 다루기 | 00:07:00 | ||
| transform & animation으로 애니메이션 만들기 | 00:14:00 | ||
| transform & animation 숙제 해설 (움직이는 메뉴) | 00:13:00 | ||
| 레이아웃 만들기 4 : CSS Grid 레이아웃 | 00:12:00 | ||
| 레이아웃 만들기 4 숙제 (인스타그램 격자 레이아웃) | 00:08:00 | ||
| position : sticky 활용하기 | 00:08:00 | ||
| Portfolio 실습 3 : Admin Page | 00:00:00 | ||
| Portfolio 실습 3 : Admin Page (해설편) | 00:00:00 | ||
| CSS 3D animation : 종이처럼 뒤집히는 프로필사진 만들기 | 00:12:00 | ||
수강생 리뷰
관련강좌
도커 Docker & Container
웹서버를 만들든 파이썬으로 AI모델을 돌리든 뭘하든 도커와 컨테이너라는 용어를 자주 듣게 될텐데 왜냐면 이전과 다르게 프로그램을 컨테이너로 싸매서 배포 & 실행하는 경우가 많아졌기 때문입니다. …
신청하기50,000₩30,000₩
쉽게 배우는 Spring Boot & JPA
옆집 철수도 백엔드 개발자되는 시대라길래 6개월짜리 학원 며칠 다녀봤지만 막상 스프링 부트 배워보면 1. 어렵고 복잡함 2. 암기식임 3. 노잼 이런 이유 때문에 매년 …
신청하기180,000₩85,000₩
Next.js로 웹서비스 만들기
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때문에 React, Vue만 사용해서 만든 …
신청하기160,000₩75,000₩
다른 강의 다 이해 하~~~~~~~~~~나도 안되는데
이 사람의 강의만 들으면 귀신같이 이해가 되는 것을 보니 영상에 약이라도 탔나 생각하게 된다
누나 사랑해
국비 6개월 수료생인데 취업이 어려워 기본기부터 다시 잡아가 보고자 구매했습니다.
생초보 it문맹 문과도 할 수 있게 처음부터 차근차근 진도를 나감
장점 : 이거 완강하면 웬만한 레이아웃은 다 만들 수 있음
하지만 당연히 모르는 게 있을 수 있는데 그런 건 혼자 공부하면서 만들 수 있을 정도로 기본기를 잡아줌
단점은 진짜 기본기만 잡아줌
사랑해 누나 이제 js 들으러 갈게..
기본기 하나는 확실히 잡힌듯
덕분에 못만드는 페이지가 없게 됐구요.
이제 js랑 노드J애스랑 리액트 들으러 가겠읍니다.