노트북 or PC
총 7개의 작품 만들기

한 작품을 만들어 보는데에 1시간~5시간 정도가 소요됩니다.

실무에서 자주 사용하는 메뉴 (1차 + 2차 + 3차)

마우스 호버시 펼쳐지고 따라다니는 사이드 바
게시물 슬라이더

텍스트 효과1

텍스트 효과2

상품 슬라이더

스크롤을 내리면 멋지게 나타나는 상품 리스트

이런 걸 배울 거예요

실무에서 자주 사용하는 HTML, CSS 기초

실무에서 필요한 것만 골라서 개념 설명뿐만 아니라 숙련도를 올려드립니다.

CSS display 속성의 개념과 활용

CSS에서 가장 중요한 속성인 display의 숙련도를 높여드립니다.

CSS position 속성의 개념과 활용

CSS에서 주로 쓰이는 position의 숙련도를 높여드립니다.

상단 바 만드는 방법

웹 사이트의 핵심, 상단 바 만드는 방법을 알려드립니다.

사이드바 레이아웃 만드는 방법

따라다니는 사이드바를 만들어 봅니다.

게시물 슬라이더 만드는 방법

게시물들을 보여주는 슬라이더를 만들어 봅니다.

텍스트 쉐도우 효과 1

텍스트 쉐도우를 통해 다양한 효과를 공부해 봅니다.

텍스트 쉐도우 효과 2

텍스트 쉐도우를 통해 다양한 효과를 공부해 봅니다.

스와이퍼를 이용한 상품 슬라이더

가장 인기 있는 슬라이더 라이브러리! 스와이퍼의 활용법을 배웁니다.

스크롤을 내리면 스르륵 나타나는 멋진 리스트

요새 최고 핫한 GSAP 스크롤트리거를 활용법을 학습합니다.

웹 코딩이 뭐예요?

📍말 그대로 웹(web)을 만들기 위한 코딩이에요.

구체적으로는 HTML, CSS, Javascript 등을 활용하여 웹 페이지를 만드는 것을 말합니다. 주로 웹 디자이너, 퍼블리셔 그리고 웹 개발자가 많이 하는 작업이죠.

웹 코딩의 결과물로는 크롬, 인터넷 익스플로러, 사파리와 같은 브라우저에서 실행될 수 있는 페이지 등이 있겠습니다.

당신이 당장 웹 코딩을 배워야 하는 이유

📍어디 웹이 아닌 게 있던가요?

요즘 거의 모든 IT 서비스가 웹으로 통합되고 있기 때문에, 웹의 중요성이 더더욱 부각되고 있습니다.

그에 맞춰 기업들은 맥OS, 윈도우, 리눅스, 블랙베리, 안드로이드 등 다양한 환경에서 견고하게 작동하는 웹페이지를 제작할 수 있는 기술자를 더더욱 많이 요구하고 있죠.

많은 안드로이드나 iOS 네이티브 앱도 웹 코딩 기술을 이용한, 하이브리드 웹이나 PWA 앱으로 대체 되어가고 있습니다. 즉, 앱을 만들 때도 웹 코딩이 많이 활용됩니다.

앞으로 사물인터넷(IoT) 기술이 더욱 발달한다면, 냉장고부터 보일러까지 거의 모든 기기에 웹 브라우저가 장착되는 날이 옵니다. 그때가 되면 웹 코딩 관련 일거리는 엄청나게 많아질 거라 예상됩니다.

또한 웹 개발자가 아니더라도, 웹 코딩은 모든 개발자들의 기본교양이 되어가고 있습니다. 어떠세요? 이 정도면 웹 코딩은 더 이상 미룰 이야기가 아니란 거 아시겠죠?

저는 회사 다니며 강의하는 개발자, 몰입코딩입니다.

📍3,000시간 이상을 강의한 베테랑 교육자 & 현업 개발자

저는 오프라인 현장에서 웹 디자인만 5년 동안 교육했으며, 3,000시간 이상 강의를 해왔습니다. 그간의 오프라인 수업내용 중에서 필수 요소만 엄선하여 여러분께 선보이게 되었네요.

현 SBS 아카데미학원 C, C++, 자바, 웹 퍼블리싱, DB, SERVLET/JSP, PHP, 스프링, 리눅스, 안드로이드 등 다수 강의 (2016~)
이케아, iism, fiberpro, 아몬즈, 삼성, 크레인/중장기 전문 신호수 양성, 필기/실기 시험 솔루션 등 다양한 외주 프로젝트 진행 (2016~)
온라인 세포게임, 한국 서버 운영 및 유지 보수 : http://agar.ddack.oa.gg/ (2015)
한국 선박해양연구소 선박 운행 시뮬레이션 구현 (2015)
자동차 신문사 모터 그래프 CMS 개발/유지 보수 (2014~2015)
스포츠/연예 언론사 OSEN CMS 개발/유지 보수 (2014~2015)
금단비가, 피부/마사지/경략 숍 CRM 고객 관리 서비스 (2013)
이츠미물류 동대문 의류시장 배송대행 프로젝트 (2008~2013)
이츠미 동대문 의류 상품 촬영 대행 프로젝트 (2008~2013)
아사달 웹 쇼핑몰 제작 (2008)
아이샤피 미니홈피 + 쇼핑몰 프로젝트 (2006~2008)
고용노동부 직업훈련교사 3급 취득
정보처리기사 취득
한경대학교 컴퓨터공학과(졸업)

이번 강의는 제가 클래스101에서 여러분께 선보이는 첫 번째 강의로서, 제대로 된 웹 코딩 입문을 다루겠습니다.

몰입코딩에게 배우는 웹 코딩은 무엇이 다를까?

📍웹 서비스 전 과정을 개발할 수 있도록 훈련시켜 드립니다.

오프라인 3,000시간 이상의 교육을 통한 노하우를 통해 여러분의 시간을 절약하고, 뭘 어떻게 해야 실력자가 되는지 명확히 알려 드립니다.

웹기획, UI 구현, 프런트엔드/백엔드 구현, 서버를 이용한 배포 및 운영까지 배우시게 될 예정이며, 전문 웹 개발 강사가 선별한 내용만 골라서 공부할 수 있습니다.

📍웹 코딩 실무에 필요한 내용만 추렸습니다.

제 수업은 실제로 웹을 서비스할 때 유지 보수 용이성 및 확장성을 고려합니다. 그런 부분에서 살짝 어려울 수 있지만 결국 진짜 서비스를 하려고 할 때 실무를 깊게 접하고 싶은 수강생에게 좋은 내용일 거라고 확신합니다.

저는 수십 개의 사이트를 퍼블리싱하고, 개발하고, 서비스/유지 보수를 하면서 각각의 단계에서 무엇이 중요하고, 중요하지 않은지 잘 알고 있습니다. 그래서 쓸데없는 내용이라고 생각되면 과감하게 생략합니다.

여러분이 코딩에서 마주하는 문제들

📍이런 문제들로 매번 고생하지 않았나요?

대부분 공감하듯, 이론 위주의 수업은 너무 따분해요. 그리고 학생의 숙련도에 대한 고려 없이 나열되는 개념 위주 예제는 우리를 지치게 하죠.

정리되지 않고 난잡한 CSS와 HTML는 우리를 슬프게 하고, 대충 때려 맞추는 CSS 레이아웃은 유지 보수가 중요한 프로젝트에서 문제가 됩니다.

결과만 나오면 그만인 엉망인 소스코드는 나중에 협업하는 개발자가 욕합니다. 코딩 결과물을 넘겨받은 개발자가 보면 화가 나는, 확장성 없고 질서 없는 소스코드를 배우면 안 됩니다.

그러면 몰입코딩 클래스의 특장점은 뭘까요?

📍모던한 코딩, 쉬운 코딩, 질서 있는 코딩을 지향합니다.

HTML, CSS 기초 중 꼭 필요한 기초를 쉽게 알려 드립니다.
합리적인 HTML/CSS 작성법을 통해 스파게티처럼 복잡한 코드에서 벗어납시다.
BEM 명명법을 배웁니다. 이는 전 세계적으로 많이 쓰이는 CSS 명명법으로 처음부터 공부하면 두고두고 유용하게 써먹을 수 있습니다.
calc, var 등의 모던 CSS 요소를 통해, 당신의 CSS 코드를 더욱 간단하고 쉽게 바꿔드립니다.
block과 inilne-block의 개념과 활용법은 레이아웃의 기본 중에 기본입니다!
flex 활용법을 배웁니다. 구 IE(인터넷익스플로러)의 몰락으로 드디어 마음 놓고 쓸 수 있는 최신 레이아웃 기법을 배울 수 있습니다.
각종 웹 폰트 사용법을 배웁니다. 현대 웹 디자인에서 웹 폰트는 필수입니다.
폰트어썸 등 생산성을 끌어올려 줄 여러 가지 도구들의 사용법을 알려 드립니다.
absolute와 relative의 개념과 활용법을 배웁니다. display로 풀지 못하는 문제는 position 속성에게 맡길 수 있어요.
display 속성과 position 속성을 조합하여 풀어보는 30개 이상의 문제를 제공하고, 배운 내용을 응용하여 만들어 볼 수 있는 4종류의 실전 웹을 갖게 됩니다.

웹 코딩이 여러분을 기다립니다.

📍웹 분야 지망생부터 1인 개발을 원하는 사람까지 모두 환영해요.

코딩 실력까지 탄탄하게 갖추길 원하는 웹 디자이너 지망생
눈 코딩, 입 코딩이 아닌, 원하는 결과를 빠르게 만들 실력을 원하는 웹 퍼블리셔 지망생
백엔드의 완성은 프런트엔드! 멋진 서비스를 디자인으로 완성하고 싶은 웹 개발자 지망생
감으로 하는 코딩에서 벗어나고 싶은 분
구조적이고 합리적인 방식으로 코딩하길 원하는 분
취미로 나만의 웹 사이트를 만들고 싶으신 분

이제 제대로 된 코딩에 도전하세요!

그럼, 클래스에서 뵙겠습니다.

준비물 · 코칭권

👨🏻‍💻몰입코딩이 직접 알려주는 1:1 웹 코딩 코칭(2회)

📍웹 코딩을 제대로 하기 위한 1:1 코칭!

1회 코칭권 당 총 2가지의 질문을 하실 수 있습니다.
1개의 질문 당 250자 내외의 답변을 작성해서 보내드립니다.

웹 코딩을 공부하다가 발생하는 오류 해결을 코칭해 드립니다.
특정 개념이나 실습이 이해 안 되는 부분은 이해될 때까지 코칭 해드립니다.
웹 디자인/웹 개발 관련 방향성과 진로 고민에 대해 코칭 해드립니다.
DB 설계에 대한 조언도 해드립니다.

이외의 클래스와 관련된 질문은 답변 한도 내에서 성심껏 코칭 해드립니다.
코칭은 질문 접수일 기준으로 차추 순차적으로 답변됩니다. 최소 7일~10일 정도 걸릴 수 있습니다.
코칭권은 구매일로부터 20주간 사용하실 수 있습니다.
기간 내 미사용 시 환불되지 않습니다.

📩 키트는 일부 변동될 수 있으며, 변동될 시 충분히 안내됩니다.

커리큘럼

크리에이터

몰입코딩

반갑습니다, 크리에이터 몰입코딩 입니다.

📍일찌감치 시작한 개발자 생활, 그리고 교육자가 되기까지.

저는 컴퓨터공학과를 졸업하고, IT 병역 특례를 통해 일찍 일을 시작했습니다. 2006년부터 웹 개발자로 일하기 시작해서 SI, 인트라넷, 정부 사업, 웹게임 등 다양한 분야에서 웹 개발을 하며 경력을 쌓았습니다.

2015년부터는 학원에서 강의도 겸하며 바쁘지만 감사한 삶을 살고 있습니다.

저는 저의 수업을 듣는 수강생들이 똑똑하다고 가정하지 않습니다. 수강생들의 집중력과 열정도 그리 길게 유지되지 않는다고 생각합니다.

수강생들의 관심을 유지하려면 그들이 수업 중간에 자주 의미 있는 결과물을 얻을 수 있어야 한다고 생각합니다. 즉, 공부가 즐거워야 한다고 생각하죠.

📍그래서 저는 대부분 학생들이 만든 작품을 서비스하는 내용을 담습니다.

실제 서버를 임대하고 도메인을 연결하고, SSL 인증서 설치 등을 하는 과정을 통해서, 1인 개발 및 1인 서비스 운영이 가능하도록 도와드립니다.

또한 저 역시도 집중력 부족을 겪는 현대인으로서, 학생들에게 필요한 건 교육이 아닌 훈련이라고 생각합니다.

저를 믿고 따라오시면, 결과물이 나오는 과정을 약속드리겠습니다.

현 SBS아카데미학원 C, C++, 자바, 웹퍼블리싱, DB, SERVLET/JSP, PHP, 스프링, 리눅스, 안드로이드 등 다수 강의 (2016~)
현 이케아, iism, fiberpro, 아몬즈, 삼성, 크레인/중장기 전문 신호수 양성, 필기/실기 시험 솔루션 등 다양한 외주 프로젝트 진행 (2016~)
온라인 세포게임, 한국서버 운영 및 유지보수 : http://agar.ddack.oa.gg/ (2015)
한국선박해양연구소 선박운행 시뮬레이션 구현 (2015)
자동차 신문사 모터그래프 CMS 개발/유지보수 (2014~2015)
스포츠/연예 언론사 OSEN CMS 개발/유지보수 (2014~2015)
금단비가, 피부/마사지/경략숍 CRM 고객관리 서비스 (2013)
이츠미물류 동대문 의류시장 배송대행 프로젝트 (2008~2013)
이츠미 동대문 의류상품 촬영대행 프로젝트 (2008~2013)
아사달 웹 쇼핑몰 제작 (2008)
아이샤피 미니홈피 + 쇼핑몰 프로젝트 (2006~2008)

감사합니다.

몰입코딩