HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, animation 까지
표준 HTML부터 flex/grid 모던 레이아웃, Bootstrap, Sass, CSS 애니메이션 등
웹페이지 디자인과 퍼블리싱에 필요한 모든 내용을 배우실 수 있습니다.
최근 스타트업, 대기업 등에서 적극 사용하고 있는 2020년 + 스타일 HTML과 CSS 문법을 배워가도록 합시다.
꽉차보이는 포트폴리오를 만들 수 있는 여러가지 UI 예제들이 준비되어있지만
닥치고 선생님 코드 받아적기만 하면 정말 그것밖에 못만들기 때문에
여러분들이 무엇을 보든 직접 만들 수 있도록 CSS 동작 원리를 알려주는 내용들이 많습니다.
[커리큘럼 요약]
- HTML5 기초
- 기본 float position display 레이아웃
- flex/grid 등 2020스타일 레이아웃 기법
- 최신스타일 깔끔한 코드로 만드는 반응형 웹
- 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₩
최신 문법들 괜찮아요
아직 못배운 최신 CSS 문법들 배울 수 있어서 좋았습니다.
나중에도 참고용으로 계속 써야겠습니다.
강의 추천
상담 감사합니다..
책사서 책부터 먼저 봤었는데 강의한번 듣는게 훨씬 이해가 빠르네요!
아직 고급파트는 어려워서 복습 열심히하겠습니다!
HTML 강의
다른데보다 싼데 강의도 새로운내용들 많아서 좋네요 잘배우고갑니다~ 감사해요
쉽고 재미있게 가르쳐줍니다.
강추합니다 ^^
살짝 아쉽지만 좋은 강의 였습니다.
마지막에 부트스트랩으로만 작업하는걸 보여주셔서 조금 아쉽네요.
기본을 알아가기엔 좋은 강의였습니다.
HTML/CSS 예쁘게 잘하고싶어요
젤 오래 공부 했는데(2개월), 젤 힘든거 같아요. 여기서 보충수업 해봅니당
강사님 목소리가
underkg 리뷰어 목소리랑 너무 비슷함.
기본부터 멋진 결과물까지 나오게 해주는 강의
HTML, CSS 알고 있다고 생각했지만 복습을 위해 강의를 들었습니다.
그러나 제가 모르는 개념들도 많았고 신기한 내용들이 많아서 배우는데 즐거웠어요!
shadow DOM이나 Bootstrap, SCSS 모르는 것들을 배울 때는 힘들면서도 행복했네요.
col-6, col-md-4 실제로 제가 만들었을 때는 더 뿌듯했어요ㅋㅋㅋ
마지막에 자꾸만 다른 강의로 넘어가고 싶은 제 멘탈을 붙잡고 오늘 겨우 강의 100% 달성했습니다!! 야호!!
만점중에 만점 강의,,
국비 6개월 배우고 취업 준비하는데 포폴 만들때 마다 자꾸 기본기가 부족한 느낌이 있어서
온라인 강의 이것저것 찾아보다가 우연히 리액트 맛보기 강의를 듣고 패키지로 결제했어요~
HTML/CSS 강의부터 듣고있는데 아는내용이 어느정도 있어서 이해하기 쉬웠어요
아예 쌩초보 입장은 아니여서 뭐라 말 못하지만 확실한건 포인트를 딱딱 알려주셔서 좋아요
저처럼 의지력 약한 사람은 한 강의당 30분 넘어가면 완강 못 할텐데ㅠ 평균 10~15분정도라 집중하기 딱 좋았어요
그리고 영상 강의만 있는게 아니고 밑에 강의 내용에 관한 코드랑 설명 적혀있어서 복습할때는 그거 보고 했어요ㅎㅎ
암튼 100% 달성해서 뿌듯해요~!
CSS 강의중 최고였습니다
강의 들으면서 포트폴리오사이트 제작중인데 웹에 올라온 어떤 포트폴리오 페이지든 다 만들수 있을거같아요
재밌고 좋아요
쉽게 잘 가르쳐주세요!!
넘나 선녀같다
html/css 강의를 몇 개 들어봤지만 혼자서도 뚝딱뚝딱 만들어낼 수 있는 실력을 만들어줄 수 있는 강의는 코딩애플 강의네요
짧은 텀으로 숙제를 계속 내줘서 계속 배운걸 응용해볼 수 있고 강의력도 좋으십니다
아직 완강은 아니지만...
강의 몇 개만 들어봐도 돌출되는 강의력은 오버 플로우 히든 불가능.
국비 듣는 중인데 뭔가 요상하게 설명하던 거 듣고 대체 뭔 소리야??????? <- 이 상태로 터덜터덜 집에 돌아와서 다시 들으면 바로 이해 쌉가능입니다.
강의가 직관적이기도 하고 정리도 잘 돼있고, 예제와 해야 할 숙제 많은 게 제일 마음에 드는 변태입니다. 다른 것도 3개월 안에 다 끝내버릴 거임.
20일만에 완강
일단 강의가 재밌어서 좋고 무엇보다 자막을 중간중간에 달아줘서 이해하기 편했어요.
확실히 완강하고 나니 무언가를 만들 수 있겠다는 자신감이 들었습니다. 아직은 헷갈리는 부분도 많아서 복습도 많이 하겠습니다!
바로 js 강의로 넘어가겠슴다 ^^7
현재 4일째
2017년도 웹퍼블리셔과정으로 국비를 수령했지만 사정상 여의치 않아서 개발자의 길을 포기했었는데
어쩌다가 개발쪽 온라인영상을 조사해보다가 코딩애플을 알게되어 패키지가 너무 알차보여서 멋모르고 결재해버렷다
웹퍼블리셔과정 강사님이 가르키던 것처럼
엄청 잘 가르치시고 게다가 추가적으로 안써봤던 기능들도 몇몇 알게 되서 재밌게 진행하고 있습니다
안한지 5년이 됐지만 그래도 했던 경험이 있었던지 이해를 금방금방 하고 넘어가네요
얼렁 졸업하고 JS로 넘어가겠습니다
학생에게 가장 필요한 강의
여태까지 찾아다녔던 구성의 강의였습니다. 기본을 다지고 실제 업무에 활용하기 위해 배워야 하는 것들이 구체적으로 무엇인지 각각 주제에 따라 나뉘어 있습니다. 강의로서 당연해 보이는 덕목이지만 개인적으로 저는 웹개발에 관련해서는 그런 학습자료를 찾지 못해 고생했습니다. 매 주제를 완료할 때마다 복습을 위한 과제를 줍니다. 사실 초보에게는 과제 소스를 찾는 것만 해도 쉽지 않은데, 구체적으로 과제를 제시해줍니다. 또한 강사가 직접 고른 과제이기 때문에 중요한 부분에 관해 복습할 수 있을 거란 믿음이 있습니다. 스스로 실습할 때에는 정작 중요한 내용은 빠뜨리거나 엄한 곳에서 헤맬 수 있는 위험이 큽니다. 그렇기 때문에 여러모로 매번 주어지는 과제가 마음에 들었습니다. 마지막으로 포트폴리오 실습 과정이 세 번 있습니다. 아주 큰 분량이 아니면서 충분히 배운 걸 모두 활용해 볼 수 있는 작업을 세 번씩이나 할 수 있다는 건 기쁜 일입니다. 앞으로 개인 포트폴리오 작업을 할 때 어떤 방식으로 해야 할 지 충분히 방향을 제시해주었다고 생각합니다. 그 외에도 실제 업계에서 중요하게 생각하는 것들이 무엇인지 실전적인 관점을 보여주는 것, 강의 가격이 합리적인 것 등등 장점이 너무 많습니다. 누가 웹개발을 배운다고 말하면 무조건 이 강의를 추천할 것 같습니다.
좋은 강좌입니다.
무엇보다 숙제가 많아서 좋습니다.
혼자서 해볼만한 숙제를 계속 내주셔서 실습을 많이 하게 되네요.
스스로 자주 하다보니 기억에도 오래 남고, 실력도 상승합니다.
진짜 200km/h로 달립니다.
안전벨트 꽉 메세요..
수강완료 체크 리셋 기능 요청합니다.
저같은 개초보 특딱은 한번 들어도 먼 말인지 몰라서 여러 회독을 반복해서 들어야 될 것 같습니다.
우선 1회독 째는 그냥 후딱 듣기만 했고요, 이제 2회독 째는 실습도 좀 해가며 제대로 들을라고 합니다.
근데 강의가 전부 수강완료 체크가 돼 있다보니 2회독 하면서 들을 순서 찾기가 헷갈립니다.
그래서 수강완료 체크 리셋을 할 수 있다면 다시 순서를 체크해가면서 들을 수 있을테니 좀 편할거 같습니다.
강의는 군더더기 없이 속도감있고 말씀도 위트있어서 흥미롭게 들었습니다.
국비 4개월 과정 3일만에 학습가능
실화냐??!