All Lectures
RouteNoticeQ&A

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

부트스트랩을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기 실전 제작수업입니다.

Lecture Introduction
Difficulty
Normal
Category
Web Programming - Programming
Tag
부트스트랩, 자바스크립트, CSS, HTML, jQuery
Certificate
You can issue a certificate of completion
time taken
5 hours
Target Audience
- 판에 박힌 스타일보다는 본인만의 유니크한 웹을 구현하고 싶은 분
- 부트스트랩 같은 프레임워크를 사용하지 않고도 반응형 웹을 구현하는 실무 스킬까지 마스터하고 싶은 분
- frontend 개발자로 취업하기 위해 포트폴리오 제작을 앞두고 있는 분

 초급자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

✔ html을 활용하여 웹의 구조 생성하기
✔ css3를 활용하여 구조에 스타일 입히기
✔ js를 활용하여 클릭이나 스크롤같은 사용자의 이벤트시 동작하는 요소 만들기
✔ 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 메인 페이지를 clonning 해요
✔ 부트스트랩의 최대의 단점인 판박이처럼 찍어내는 비슷한 디자인과 구성요소를 활용하는 것이 아닌, 본인이 원하는 유니크한 반응형 웹 실무 사이트 싱글 페이지를 직접 코딩을 하여 제작해봐요
✔ @mediaquery를 이용하여 디바이스별로 스타일 다르게 변경하기


🏆 이런 내용을 배워요.

 

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

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

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

  



🎬 강의소개

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

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

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

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

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

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



 이 강의의 특징

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

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

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

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




🎓
수강 전
참고사항
수업에 사용되는 이미지나 완성된 파일을 다운받아 활용하실 수 있습니다.
📚
선수 지식,
필요할까요?
html, css, js 에 대한 기본 지식

Preview
  • 01
    순수하게 html/css/jQuery만을 활용한 반응형 웹페이지 만들기 실전편[2024년 최신판]
  • step01 @미디어쿼리를 활용한 초간단 반응형 레이아웃 맛보기
    step02 반응형 사이트 클론코딩 | html 구조 만들기
Curriculum
  • 01
    순수하게 html/css/jQuery만을 활용한 반응형 웹페이지 만들기 실전편[2024년 최신판]
  • step01 @미디어쿼리를 활용한 초간단 반응형 레이아웃 맛보기
    step02 반응형 사이트 클론코딩 | html 구조 만들기
    step03 공통된 스타일부터 먼저 스타일링하기
    step04 상단 네비게이션 스타일 만들기
    step05 스크롤시 네비게이션의 종류 동적으로 변경하기
    step06 회전목마처럼 컨텐츠가 돌아가는 캐로셀 제작하기
    step07 자동으로 변경되는 캐로셀 활성화 버튼과 버튼 클릭시 캐로셀 동작이 충돌하는 부분 해결하기
    step08 디바이스 사이즈에 따라 사이즈가 줄어드는 메뉴 컨텐츠
    step09 디바이스 사이즈에 따라 레이아웃의 위치가 바뀌는 [스토리] 컨텐츠
    step10 디바이스 사이즈에 따라 레이아웃의 모양이 바뀌는 [브랜드 철학] 컨텐츠
    step11 디바이스 사이즈에 따라 사진의 위치가 바뀌는 [성분] 컨텐츠
    step12 디바이스 사이즈에 따라 보이고 숨겨지는 [more] 컨텐츠
    step13 스마트폰에서는 토글 컨텐츠로 바뀌는 [footer] 컨텐츠
    step14 클릭시 혹은 스크롤시 활성화되는 네브바의 메뉴 스크립트로 완성하기
Recent Update|2024. 03. 06
Instructor Introduction
👩 영코디 킴쌤 [ 비전공자도 쉽고 재미있게 배우는 코딩! ] 을 목표로 15년 넘게 풀스택(백엔드, 프론트엔드) 및 영상, 코딩, 디자인을 강의하며 개발자 인력양성에 진심인 현직 직업훈련교사 [컴퓨터 1도 모르는 사람이 부업으로 월100만원 수입내보기 첫걸음] 의 저자 NCS 국가직무능력강의 고용노동부 평가 2018, 2019 2년연속 A등급 강사선정 수원그린컴퓨터아카데미 우수강사선정(2017, 2018, 2019 3년연속 최우수1등상 수상) 전) 삼성ODD 기획 개발 마케팅 담당 전) SF필름스쿨 강의 가톨릭대학교 컴퓨터공학부 특강 용인송담대학 멀티미디어학부 특강

Lecture Reviews
39,600

Average Rating
0.0
Difficulty
Normal
Lecture Period
52Weeks 1Day after payment
time taken
5 hours