HTML & CSS 정복 캠프
기간 05-16(화) ~ 07-11(화) 총 8주
* 6/6(화) 현충일로 인한 휴강
일정 화요일 19:30 ~ 22:30, 토요일 09:30 ~ 13:30
준비물 개인 랩탑 필수
장소 신관 5층 A강의실
(지도보기)
담당자 김용성 매니저 02-517-0686 / 02-517-0652
궁금하신 사항이 있으면 언제든 연락주세요!
* 본 캠프는 마감되었습니다. 출시알림을 신청해주시면 다음 기수 오픈 시 가장 먼저 연락을 드립니다!

다시는 HTML, CSS를 무시하지 마라

웹 개발의 근간을 이루는 중요한 언어인 HTML, CSS. 문법을 조금 틀려도, 웹 접근성(정보 접근성)같은건 별로 신경쓰지 않아도 어떻게 사이트가 만들어지긴 하니 쉽고 단순한 언어라고 오판하기 일쑤입니다.

HTML, CSS에 대한 오해를 완전하게 풀어준다

산업표준이 있듯, 웹 문서의 뼈대를 만드는 HTML(마크업) 그리고 CSS로 스타일을 입히는 작업에도 권장되는 ‘표준안’ 이 있으며, 모든 웹 개발자는 입문 수준이건 실무에서 오래 일했건 이에 대한 중요성을 뼈저리게 알고 있어야 합니다.

제대로 배울 기회, 바로 여기에 있다

이제 막 HTML, CSS를 배우려는 분들에게는, 어딜 가든 ‘제대로 배웠다’ 는 자부심을 가질 수 있도록 깊은 이해를 심어드립니다.

이미 실무에서 HTML, CSS를 사용하고 있지만 솔직히 접근성이나 각종 이슈에 대비하는 능력이 부족한 분들께 클리닉과 같은 역할을 해드립니다.

icon-img-001

내가 짠 웹사이트, 다른 환경에서 보니 엉망

HTML과 CSS는 변경 사항이 금세 눈으로 보이기 때문에, 의도한대로 내 눈에 보이기만 하면 아무 문제 없다고 여기는 경우가 많습니다.

하지만 지금 내가 보는 페이지를 다른 브라우저에서, 크기가 다른 기기에서 본다면 어떤 일이 벌어질까요? 내가 의도한 바가 전혀 드러나지 않고 제멋대로 깨진 페이지를 보게 되는 경우가 대부분입니다. 바로 크로스 브라우징 이슈 때문입니다.

결국 고민만 계속하다가 이미지로 대체해버리거나, 특정 웹 환경에만 맞추어 웹사이트를 만드는 결단 을 해버리는 분들이 많습니다.

icon-img-002

원리를 모르면 엉망은 계속됩니다

코딩이 안되서 웹사이트를 이미지로 대체하고, 다양한 환경을 고려할 수 없어 사용자의 환경을 제한하고.. 잠깐은 이런 해결책이 편하겠지만, 가변성이 큰 프론트엔드 영역에서 이런 식의 주먹구구 해결책을 반복할 순 없는 노릇입니다.

이런 굴레에서 벗어나려면 HTML과 CSS를 활용한 웹사이트 구현의 원리를 정확히 파악해야만 합니다. 본 캠프에서는 많은 HTML & CSS 사용자들이 놓치는 프론트엔드의 핵심 개념, 전세계적으로 다뤄지는 주요 이슈를 낱낱히 짚어드립니다.

img-title-005

본 캠프를 수강하면

icon-img-003

웹 표준을 지켜 잘 설계된 HTML, CSS 코드를 작성하는 법을 체화하게 됩니다.

icon-img-004

누가, 어떤 환경에서, 어떤 브라우저로 봐도 정돈된 웹사이트를 만들 수 있습니다.

icon-img-005

강사님이 다년간 현업에서 다져온 프론트엔드 개발 꿀팁을 온전히 얻을 수 있습니다.

HTML & CSS의 속을 파내는 커리큘럼

단순한 사용법은 인터넷 검색을 통해서도 배울 수 있습니다. 그러나, 원리를 알지 못한다면 단편적인 지식이 모여 엉망으로 짜인 웹사이트가 탄생할 뿐입니다. 본 강의는 HTML과 CSS의 도구적인 측면에 집중하지 않고, 웹페이지를 구성하는 핵심 기술로서의 원리를 파헤치는 데에 집중합니다. 또한 JavaScript 기초도 조금씩 다루며, 동적인 UI를 구현하는 방법도 배울 수 있습니다.

주차 학습 목표
1주 HTML과 CSS 성공적으로 입문하기

  1. 웹 표준이란 무엇인가? 왜 지켜서 짜야하는가?
  2. HTML(HyperText Markup Language)
    1. 문법
    2. 의미있는 HTML 코드 작성하기(Semantic HTML)
    3. 콘텐츠 모델과 속성
    4. 좋은 HTML 코드란 무엇인가? 예시 코드를 뜯어보며 좋은 예를 익혀보자
  3. CSS(Cascading Style Sheets)
    1. 문법
    2. 셀렉터
    3. 셀렉터 우선순위
    4. 속성(width, height 등)
    5. CSS3 속성(벤더 프리픽스와 최신 CSS)
    6. CSS 모듈화
2주 HTML 이해하기

  1. 시맨틱 HTML – 눈에 보이는 것이 다가 아니다. 의미 있는 웹 문서를 작성하자.
  2. HTML 콘텐츠 모델
  3. HTML 작성해보기
  4. 멋진 HTML 폼
3주~6주 CSS 를 이해하고 사이트 구현 실습하기

  1. 브라우저의 간단한 동작방식
  2. CSS 문자 및 색상
  3. CSS 레이아웃 (박스모델, Flow 등등)
  4. CSS 포지션
  5. CSS 단위
  6. CSS Flexbox
  7. CSS Grid
  8. CSS 애니메이션 (Transition, Transform, static)
  9. CSS Shadow
6.5주 SASS & gulp

  1. CSS 를 효율적으로 관리하기
  2. gulp를 활용해 더 쉽게 CSS 작성하기
7주 자바스크립트 기초와 DOM 스크립트

  1. 자바스크립트 문법, 변수, 함수
  2. 자바스크립트로 HTML 요소를 선택하고, 속성을 부여하고, 이벤트 부여하기
8주 배운 내용을 총동원하여 웹사이트 구현하기

평소 눈여겨보던 사이트, 혹은 꼭 내 손으로 만들어보고 싶은 디자인의 웹사이트를 수강생 한 명 당 하나씩 선정하여 그대로 구현해보는 실습을 진행합니다. 그야말로 바닥부터 끝까지 내 손으로 모두 HTML, CSS, JS(자바스크립트)까지 구현하는 것이죠. 이 과정을 거치며 강사님과 끊임없이 배운 내용을 반복학습하고, 필요하다면 커리큘럼에서 다루지 않은 내용까지 추가적으로 배우며 학습을 마무리합니다.

8주 후 누군가 소스코드 좀 보자고 했을 때, 자신있게 공개할 수 있게됩니다!

profile

조은 강사님

우아한 형제들 프론트엔드 개발자
KIPFA 인터넷에코어워드 퍼블리싱 부문 최우수상

“8주간 수강생분들께 HTML과 CSS의 원리에 대해 꼼꼼히 알려드리고,
제가 몇 년간 실무에서 경험한 다양한 내용을 ‘꿀팁’ 으로서 여러분께 전하겠습니다.”

 [주요약력]

– (현) 우아한형제들 프론트엔드 개발자

– (전) NHN Technology Services, SK Communications UI 개발

– GDG Korea WebTech 운영자

디자이너의 코딩 스킬 향상을 위한 그룹, ‘코딩하는 디자이너’ 교육 담당

– 웹표준 커뮤니티 ‘Clearboth’, 페이스북 그룹 ‘프론트엔드개발그룹’ 운영자

– 한국 웹표준 프로젝트 멤버

– W3C 권고안 번역한국인터넷전문가협회(KIPFA) W3C 권고안 번역 검수위원

수강료

마지막 등록 기회!
100만 원

월 6만원 수준(무이자 12개월 할부시)

인터넷 결제시 5개월 무이자 할부 지원!