부트스트랩(BOOTSTRAP)4를 활용한 반응형 웹페이지 만들기 실전편[2024년 최신판]
부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기 실전 제작수업입니다.
- 부트스트랩을 짧은 시간에 마스터하여 바로 반응형 웹을 만들고자 하는 분
- 내가 원하는 스타일을 추가하고, 원하는 외부 플러그인을 적용하여 유니크한 반응형 웹을 제작하고자 하는 분
초급자를 위해 준비한
[웹 퍼블리싱, Bootstrap] 강의입니다.
부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.
✔ 부트스트랩(Bootstrap)의 구성요소 및 스타일을 실무 페이지에 적용
✔ 부트스트랩에서 제공하는 제이쿼리를 활용하여 실무 페이지에 적용
✔ 부트스트랩 이론편에서 학습한 내용들을 실무 웹페이지에 적용하면서 응용하기
✔ 기본적으로 가지고 있는 부트스트랩의 스타일을 개발자가 원하는 스타일로 커스터마이징하는 스킬
✔ 제이쿼리 외부 플러그인을 적용하여 원하는 동적인 요소 추가
🏆 이런 내용을 배워요.
디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩을 활용하여 직접 제작해 봅니다!
이 강의에서는 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지나 웹앱, 웹디자인 개발을 위해 부트스트랩4(BOOTSTRAP)를 100% 활용하여 제작하는 실습을 통해 완성도 있는 반응형 웹 사이트를 제작할 수 있도록 구성하였습니다.
웹페이지, 웹앱, 반응형 웹을 제작하기 위한 HTML/CSS/ jQuery/bootstrap 이론에 대한 기본 지식이 있는 분들을 대상으로 하지만, 기본 지식이 부족하더라도 강의를 반복적으로 시청하며 따라할 수 있도록 제작하였으며 실무에서 사용하는 단축키를 이용하여 html 코드를 빠르게 만드는 방법인 emmet의 사용법도 학습할 수 있습니다.
강의내용인 제작실습을 눈으로 보는 것만이 아닌 실제로 따라 하면서 본인 스스로 반응형 웹 사이트를 하나하나 구축하다 보면 어느새 반응형 코딩능력도 향상되고 퀄리티 있는 웹사이트가 자연스럽게 완성됩니다.
부트스트랩을 활용하면서 초보자가 가장 어려워 하는 부분인 개발자 입맛에 맞게 커스터마이징 하는 부분에 대한 내용도 다수 포함하여 수업내용을 구성하였기 때문에 기본적으로 가지고 있는 부트스트랩의 스타일을 개발자가 원하는 스타일로 변형할 수 있도록 구성하였으며, 기본적으로 부트스트랩이 가지고 있는 동적인 기능 이외에도 제이쿼리의 외부 플러그인을 활용하여 동적인 요소 또한 추가하는 방법을 소개함으로써 부트스트랩의 가장 단점이라고 할 수 있는 동일한 스타일의 판박이처럼 찍어낸 웹페이지가 아닌 기존의 부트스트랩의 정형화된 스타일 틀을 벗어나 커스터마이징하여 재구성하는 부분도 디테일하게 학습할 수 있도록 구성하였습니다.
✨ 이 강의의 특징
📌 부트스트랩4의 그리드 시스템 개념을 이해하고 실제 웹페이지에 적용해 반응형 레이아웃을 만듭니다.📌부트스트랩4의 다양한 구성요소인 컴포넌트를 실제 웹페이지의 적재적소에 적용해 활용합니다.
📌부트스트랩의 스타일을 활용할 뿐만 아니라 개발자가 커스터마이징하여 원하는 스타일로 변형하는 부분을 다양하게 실습합니다.
📌동적으로 반응하는 요소를 만들기 위해 부트스트랩에서 제공하는 자바스크립트를 활용해 동작하도록 하는 방법 뿐만 아니라 외부의 플러그인을 활용하거나 직접 코딩하여 원하는 동적인 요소들을 추가하는 방법도 실습합니다.
실습파일,
강의자료
수업에 사용되는 이미지나 완성된 파일을 다운받아 실습에 활용하실 수 있습니다.
선수 지식,
필요할까요?
html, css, js 에 대한 기본 지식
- 01부트스트랩4를 활용하여 반응형 실무 웹 만들기[실전편]
- 01부트스트랩4를 활용하여 반응형 실무 웹 만들기[실전편]