순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

🏆 이런 내용을 배워요.

🚀 웹 트랜드인 메인 이미지들이 회전하는 상단 캐로셀과 스크롤시 최상단의 네비게이션의 스타일이 바뀌며 달라붙는 sticky-top 네비게이션 바와 컨텐츠 내용에 따라서 자동으로 메뉴가 활성화되는 scrollspy를 html, css, js 코드를 직접 짜서 구현

💻📱 데스크탑, 타블렛, 스마트폰에서 컨텐츠의 사이즈와 레이아웃의 위치가 바뀌는 반응형 웹을 @mediaquery를 활용하여 구현

🎨 마우스 호버시 자연스럽게 이미지의 크기나 버튼의 색이 변화되는 css3의 transition, animation 과 디바이스 사이즈에 따라 레이아웃의 모양이 바뀌는 컨텐츠 구현

👁‍🗨 데스크탑, 타블렛에서는 보이고 스마트폰에서는 없어지는 컨텐츠와 토글 버튼을 클릭시 보이고 숨겨지는 컨텐츠를 html, css, js를 통해 직접 코딩으로 구현

🎬 강의소개

부트스트랩의 최대의 단점인 판박이처럼 찍어내는 비슷한 디자인과 구성요소를 활용하는 것이 아닌, 본인이 원하는 유니크한 반응형 웹 실무 사이트 싱글 페이지를 직접 코딩을 하여 제작해 봅니다.

이 강의에서는 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 페이지 개발을 위해 순수하게 html로 구조를 짜고 css로 스타일을 만드는 방법을 100% 활용하여 제작실습을 통해 완성도 있으면서도 유니크한 반응형 웹사이트를 제작할 수 있는 실력을 다질 수 있습니다.

웹 디자인, 반응형 웹을 제작하기 위한 HTML/CSS/js 이론에 대한 기본 지식이 있는 분들을 대상으로 하지만, 기본 지식이 부족하더라도 강의를 반복적으로 시청하며 따라할 수 있도록 제작하였으며 실무에서 사용하는 단축키를 이용하여 html 코드를 빠르게 만드는 방법인 emmet의 사용법도 학습할 수 있습니다.

강의내용인 제작실습을 눈으로 보는 것만이 아닌 실제로 따라 하면서 본인 스스로 반응형 웹 구성요소를 하나하나 구축하다 보면 어느새 코딩능력도 향상되고 퀄리티 있는 반응형 웹사이트가 자연스럽게 완성됩니다.

부트스트랩 같은 프레임워크를 이용하면 프레임워크들이 가지고 있는 다소 한정적인 스타일의 클래스명을 사용하거나, 이미 만들어져 있는 컴포넌트를 사용하기 때문에 웹페이지의 결과물이 다소 비슷하게 만들어지는 단점이 있는데 이를 극복하기 위하여 부트스트랩 같은 프레임워크를 사용하지 않고도 본인만의 유니크한 반응형 웹사이트를 직접 코딩을 통하여 제작하는 방법을 디테일하게 실습해 보실 수 있습니다.

완강 후에는 막연히 어렵게만 생각했던 반응형 웹 제작이 생각보다 쉽다라는 것을 느끼고 앞으로는 본인만의 반응형 웹을 손쉽고 다양하게 제작하게 될 것입니다.

✨ 이 강의의 특징

📌 반응형 레이아웃을 만들기 위한 css의 @mediaquery 사용법을 배우고 반복적으로 실습합니다.

📌 개발자가 원하는 레이아웃이나 스타일로 변형하는 부분 또한 반복적으로 실습합니다.

📌 동적으로 반응하는 요소도 직접 만들어보기 위해 실무에서 가장 많이 활용되는 캐로셀 요소와 스크롤시 상단의 네비게이션 메뉴의 활성화 스타일이 바뀌는 구성요소를 js 코드를 통해 구현합니다.

📌 실제 웹사이트에서 많이 활용되는 애니메이션 기법을 연습하여 원하는 요소에 마우스 호버시 디자인 요소가 애니메이션되는 인터랙티브 웹을 실습합니다.

📌 외부 플러그인을 연결하여 내가 만든 코드에 다양한 기능을 손쉽게 활용할 수 있는 라이브러리를 추가하는 방법을 실습합니다.

😃 이런 분들께 추천해요

👀 비전공자를 위한 풀스택 과정에서는 각 코스 과정별 무엇을 배우나요?

✔STEP01 | 비전공자를 위한 [HTML 스타터] 부트캠프 [해당강의 바로가기]

html의 의미와 기본코드 작성방법 및 레이아웃 짜기

웹개발을 한다는 것은 누구나 올 수 있는 상점을 온라인 상에 만드는 것과 같습니다. HTML은 Hyper Text Markup Language 의 약자로 웹페이지의 주요 핵심내용이 되는 정보들을 가지고 기본뼈대를 만드는 작업을 배웁니다.

✔STEP02 | 비전공자를 위한 [CSS스타일부터 애니메이션까지] 부트캠프 [해당강의 바로가기]

CSS의 의미와 기본코드 작성방법부터 원하는 스타일을 html에 적용하여 웹디자인하기

CSS는 Cascading Style Sheet 의 약자로 Cascading은 계층적인, 폭포수 같은 의미를 가지고 있는 단어입니다. css는 말 그대로 html 구조의 부모, 자식 관계를 계층적으로 선택하여 원하는 요소에 원하는 스타일의 색이나 모양, 애니메이션을 입혀 사용자가 보기에 지루하지 않고 흥미롭고 아름다운 웹을 디자인 할 수 있는 시트를 만들어 적용합니다. 또한, css에 자신이 생길 때까지 다양한 실무 사이트의 웹디자인을 다양하게 제작하는 경험을 쌓습니다.

✔STEP03 | 비전공자를 위한 [JS부터 React까지] 부트캠프

바닐라 스크립트와 자바 스크립트 es6문법 익히고 React 활용하기

혹시, 리액트를 공부하다가 좌절하신 적이 있나요? 킴쌤 클래스에서는 리액트의 기초가 되는 자바스크립트를 단계적으로 학습하기 위해 바닐라 스크립트부터 자바스크립트 es6문법, 제이쿼리 등의 기본문법부터 다양한 실습예제를 통해 스크립트의 기본을 탄탄히 다진 후에 React의 다양한 문법의 이해와 실습을 통해 컴포넌트, state, 메모이제이션을 활용한 게시판과 회원기능을 구현하고 타입스크립트 문법을 익혀 ToDoList 실습예제를 제작하는 등, 포기하지 않고 리액트로 가는 길을 열어드립니다.

✔STEP04 | 비전공자를 위한 [반응형 웹 제작] 부트캠프 [현재 과정]

반응형 웹을 만들기 위한 @미디어쿼리의 이해와 사용법을 익히고 쉽게 반응형을 제작할 수 있는 프레임워크인 부트스트랩 습득하고 활용하기

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지 개발을 위해 부트스트랩(BOOTSTRAP)을 활용하는 방법에 대한 이론과 실습을 적절하게 분배하여 부트스트랩의 구성요소들을 이해하며 실습을 통하여 바로바로 확인해보고 실제 반응형 웹사이트를 구현해 완성해봅니다.

또한, 부트스트랩의 정해진 스타일대신 나만의 개성있는 스타일의 반응형 웹을 제작하고 싶은 분들을 위해 부트스트랩을 활용하지 않고 순수하게 html/css/jQuery 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 실습을 한솥 도시락 반응형 웹제작을 통해 마스터해 봅니다.

✔STEP05 | 비전공자를 위한 [JAVA기초] 부트캠프

가장 기본적인 문법의 이해와 실습부터 시작하여 자바 기초와 중급문법 익히기

웹개발 백엔드의 가장 기본언어인 자바를 가장 기본적인 문법부터 시작하여 점진적으로 중급까지 익히고 다양한 예제실습을 통하여 스스로 원하는 프로그램을 코딩할 수 있는 능력을 자연스럽게 습득하게 됩니다.

✔STEP06 | 비전공자를 위한 [JAVA고급부터 DB실습까지] 부트캠프

자바 고급문법과 JDBC와 servlet의 이해와 실습

자바의 컬렉션 프레임워크는 collection 말 그대로 수집, 즉 저장하는 클래스를 자체적으로 내장하고 있는 내부 라이브러리로 데이터의 다양한 타입들을 한군데 묶어서 관리하고 저장할 수 있는 다양한 문법들을 익히고, 데이터베이스(DB)에 읽고 쓰고 수정, 삭제하는 CRUD 실습을 통해 SQL문법을 배우고 실습함으로써 웹개발 백엔드의 초석을 튼튼히 하는 밑바탕을 만듭니다.

✔STEP07 | 비전공자를 위한 [JSP부터 SpringBoot까지] 부트캠프

JSP부터 스프링 부트까지

혹시 최근 실무에서 가장 많이 사용되고 있는 스프링 부트부터 공부하다가 좌절한 경험이 있으신가요?

킴쌤 클래스에서는 스프링 부트를 완벽하게 이해하기 위해 가장 기초문법인 JSP부터 학습하여 이전세대에서 현재세대로의 백엔드 문법의 진화를 직접 체감하며 자연스럽게 개념과 사용법을 체득하고 웹개발 백엔드를 자동으로 알아서 구현해주는 스프링부트가 동작하는 원리를 이해합니다.

ORM, JPA, 엔티티의 기본개념과 활용, 스프링 시큐리티의 이해와 시큐리티를 활용한 회원기능 구현, junit test 의 실습과 h2콘솔의 사용법 등의 실습을 토대로 스프링 부트를 활용하여 회원과 게시판 기능이 있는 실무 웹사이트를 구현하고 깃허브로 협업하기까지 포트폴리오 제작을 위한 기본기를 완벽하게 숙지합니다.

수강 전 참고 사항