Thumbnail
개발 · 프로그래밍 웹 개발

입문자를 위한 반응형 웹 기초 강의 대시보드

(5)
96개의 수강평 ∙  3,747명의 수강생

무료

지식공유자: 유노코딩
총 16개 수업 (2시간 47분)
수강기한: 
무제한
수료증: 미발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

다양한 기기와 화면에서 서비스를 제공할 수 있는 '반응형 웹사이트'를 만들기 위해 필요한 기본적인 스킬을 확실하게 익힐 수 있는 강의입니다.

✍️
이런 걸
배워요!
HTML
CSS
가변 그리드
가변 이미지
미디어 쿼리

웹사이트 개발 필수 스킬,
반응형 웹에 대해서 알아보자!

필수 스킬을 담백하게 정리한
반응형 웹 기초 강의 📖

반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 그것을 만들기 위해 사용하는 기법 등을 뜻하는 말입니다. 본 강의는 반응형 웹을 만들기 위해 필요한 필수 스킬들을 소개하는 강의입니다.

각 수업은 다음과 같은 흐름으로 진행됩니다. 

  • 기초 이론 : 주요 개념들을 알기 쉽게 설명합니다.
  • 실습 안내 : 학습한 내용을 직접 실습하며 확인합니다.
  • 내용 정리 : 학습 내용을 정리하며 마무리합니다.

강의 목표 📜

HTML, CSS에 대한 경험을 가지고 있는 분들이라면 누구나 부담없이 공부하실 수 있도록 하기 위해, 꼭 필요한 주요 개념 위주로 내용을 구성했습니다. 이 강의는 오랜 시간을 투자하지 않고도 반응형 웹을 만들 때 필요한 기본기를 갖추실 수 있도록 돕는 데 초점을 두고 제작한 강의입니다. 

이 강의를 들은 후 여러분은,

  • 👉🏻 반응형 웹의 개념을 이해할 수 있어요.
  • 👉🏻 반응형 웹을 만들기 위해 필요한 스킬들을 익힐 수 있어요.
  • 👉🏻 반응형 웹을 디자인하는 기본적인 방법에 대해 알 수 있어요. 

이 강의에서 배우는 것들 🐈

반응형 웹의 개념

반응형 웹이 무엇인지, 왜 필요한지, 어디서부터 어떻게 시작해야 하는지에 대해 알아봅니다. 

반응형 웹 스킬 학습

가변 그리드, 가변 이미지, 미디어 쿼리 등 다양한 스킬에 대해 알아봅니다. 

반응형 웹 디자인 학습

효율적인 디자인 방법론에 대한 소개와, 그에 대한 접근법에 대해 알아봅니다. 


반응형 웹 실습하기 ☕️

기초 이론에 대한 학습 후에는, 함께 간단한 반응형 웹페이지를 만들어 볼 거예요. 


수강 전, 안내 사항을 확인하세요 🔍

하나. HTML과 CSS를 알고 있어야 해요!

본 강의는 유노코딩의 기존 무료 강의인 '입문자를 위한 HTML 기초 강의'와 '입문자를 위한 CSS 기초 강의' 수강생 분들에게 보충 수업을 제공하고자 만든 강의입니다. 인프런 또는 유노코딩 유튜브 채널에서 해당 강의들을 참고하셔도 좋고, 기존 HTML, CSS 학습 경험이 있으시다면 바로 강의를 수강하셔도 좋습니다!

둘. 다음과 같은 준비물을 챙겨주세요!

  • 💻 컴퓨터
  • 💻 코드 에디터 (수업에서는 Visual Studio Code를 사용해요)
  • 💻 영타 능력 (속도가 느려도 괜찮아요)

셋. 수강 전 미리 알려드려요!

대부분의 영상에는 코드를 작성하는 장면이 등장하는데, 자칫 영상이 지루해질 수 있다고 판단해 대부분 배속 처리를 하였습니다. 따라서 코딩 실습을 따라하시는 경우 일시정지 기능을 적절히 활용해 가시면서 실습을 진행하시길 추천합니다!


이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
HTML/CSS를 공부 중이거나 공부해 본 사람
CSS 스킬업을 원하는 사람
반응형 웹 만들기에 관심이 있는 사람
📚
선수 지식,
필요할까요?
HTML
CSS

안녕하세요
유노코딩 입니다.
유노코딩의 썸네일

개발자 출신 십잡스 크리에이터.
프로그래밍 강사 겸 작가로 활동하고 있습니다.
유튜브 <유노코딩> 채널 운영 중입니다.

 

배움의 과정에서 겪는 불필요한 고통들이 사라지길 바라고, 또 그래야만 한다고 믿습니다.
경험자의 진정성과 경험을 나누면 고통은 줄어들 수 있습니다.

 

저의 모든 강의 콘텐츠에서 그런 마음을 느끼실 수 있도록 노력하겠습니다.
많은 분들이 코딩을 재미있게 느끼고, 단순하게 이해할 수 있도록 돕기 위해 항상 노력하고 있습니다.

 

감사합니다^^

커리큘럼 총 16 개 ˙ 2시간 47분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 반응형 웹 기초 강의
강의 소개 미리보기 04:01 반응형 웹 개요 미리보기 10:39 상대 단위 em rem 미리보기 14:11
뷰포트 단위 vw vh vmin vmax 08:22
가변 레이아웃 (가변 그리드) 14:35
CSS 함수 개념과 calc() 10:34
미디어 쿼리 11:40
가변 이미지 11:08
가변 동영상 12:16
모듈화 디자인 09:51
소스 코드 다운로드
섹션 1. 반응형 웹 연습하기
컴포넌트 만들기 - 헤더 상 07:01
컴포넌트 만들기 - 헤더 하 18:13
컴포넌트 만들기 - 네비게이션 13:34
컴포넌트 만들기 - 썸네일 17:18
강의 마무리 03:48
강의 게시일 : 2022년 01월 14일 (마지막 업데이트일 : 2022년 01월 14일)
수강평 총 96개
수강생분들이 직접 작성하신 수강평입니다.
5
96개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
김상진 thumbnail
5
2024-04-24
김성현 thumbnail
5
좋은 강의 감사합니다.
2024-04-22
leaver77 thumbnail
5
도움되었어요
2024-01-05
일월 thumbnail
5
반응형이 대충 어떻게 구현해야 하는 지 있었어요
2024-01-20
김이주 thumbnail
5
깔끔하고 쉬운 설명 너무 좋아요! 프론트엔드 개발자 준비하고 있는데, 생각보다 잘 모르는 내용이 많아서 정리하는데 도움이 됩니다!
2023-09-26