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

CSS 레이아웃 - flex & grid 대시보드

(5)
40개의 수강평 ∙  1,296명의 수강생

무료

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

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

CSS 레이아웃 기술의 대표 주자 flex와 grid의 개념 및 사용법을 공부할 수 있는 강의입니다.

✍️
이런 걸
배워요!
CSS 레이아웃
플렉스박스
그리드 레이아웃

반응형 웹을 만들고 싶으신 당신,
flex & grid는 제대로 배우고 시작할까요? 😁

필수 스킬을 담백하게 정리한
CSS 레이아웃 강의 📖

웹 페이지의 요소들을 깔끔하게 정리해 사용자에게 시각적인 만족감을 제공하고, 기기나 화면의 크기에 따라 페이지의 레이아웃을 변경할 수 있는 최신 CSS 레이아웃 기술을 정리했습니다.

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

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

  • 👉🏻 CSS 레이아웃의 개념을 이해할 수 있어요.
  • 👉🏻 레이아웃 기술을 활용해 접근성과 가독성이 뛰어난 웹 페이지를 만들 수 있어요. 
  • 👉🏻 반응형 웹을 만들기 위해 필요한 레이아웃 스킬들을 익힐 수 있어요. 


이 강의에서 배우는 것들 💪

최신 CSS 레이아웃 기술의 개념 및 사용법

최신 CSS 레이아웃 기술의 대표 주자인 flex와 grid에 대해 이해할 수 있습니다. 

 

레이아웃 요소 다루는 방법

요소를 배치 및 정렬하는 방법을 비롯하여 다양한 레이아웃 스킬에 대해 알아봅니다.


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

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

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

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

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

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

대부분의 영상에는 코드를 작성하는 장면이 등장하는데, 영상이 지루해질 수 있어 배속 처리를 했습니다. 따라서 코딩 실습을 따라하시는 경우 일시정지 기능을 활용하며 실습을 진행해주세요.

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
CSS 스킬업을 원하는 사람
CSS 레이아웃 기술에 관심이 있는 사람
📚
선수 지식,
필요할까요?
HTML
CSS

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

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

 

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

 

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

 

감사합니다^^

커리큘럼 총 16 개 ˙ 1시간 56분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 준비하기
강의 준비 미리보기 04:07
강의 자료 다운로드하기
섹션 1. 플렉스박스
플렉스박스(flexbox)란? 09:35
flex-direction, flex-wrap, flex-flow 10:38
justify-content 08:20
align-items, align-self, align-content 09:58
flex-grow, flex-shrink 08:16
flex-basis, flex 07:20
order 05:59
섹션 2. 그리드 레이아웃
그리드(grid) 레이아웃 방식 미리보기 03:08 grid-template-columns, grid-template-rows, gap(grid-gap) 미리보기 13:05
repeat, minmax, auto-fill & auto-fit 07:57
grid-row, grid-column 07:09
grid-template-areas, grid-area 07:32
align-items, align-self, justify-items, justify-self 08:08
align-content, justify-content 05:41
강의 게시일 : 2022년 04월 19일 (마지막 업데이트일 : 2022년 04월 19일)
수강평 총 40개
수강생분들이 직접 작성하신 수강평입니다.
5
40개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
homeyonly thumbnail
5
2024-04-19
하늘 thumbnail
5
굿
2024-04-15
wooggy75 thumbnail
5
생활코딩보다 이해하기 쉬워요
2024-01-29
승민 thumbnail
5
2024-04-11
topofreach thumbnail
5
도움 많이 되었습니다. 감사합니다.
2024-01-30