순수하게 html/css/js만을 활용한 반응형 웹페이지 만들기 실전편[2024년 최신판]

🏆 이런 내용을 배워요.

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

💻📱 데스크탑, 타블렛, 스마트폰에서 컨텐츠의 사이즈와 레이아웃의 위치가 바뀌는 반응형 웹을 @mediaquery를 활용하여 구현
🎨 마우스 호버시 자연스럽게 이미지의 크기나 버튼의 색이 변화되는 css3의 transition, animation 과 디바이스 사이즈에 따라 레이아웃의 모양이 바뀌는 컨텐츠 구현

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

🎬 강의소개

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

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

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

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

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

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

---

✨ 이 강의의 특징

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

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

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

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