플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities) - 인프런

블라켓츠(Brackets) 다운로드 및 에밋 설치

강의명 : 플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

수강 기한 : 무제한

진도율 : 0강/97강 (0%) | 시간 : 0분/1306분

나가기

미수강

이전수업

다음수업

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

수강 기한 : 무제한

진도율 : 0강/97강 (0%) | 시간 : 0분/1306분

강의소개

[미리보기 및 제작노트] 플렉스(Flex) 실전 반응형 웹사이트 제작

10분

수업내용 상세소개 및 수강생 다운로드 파일 사용설명서

18분

텍스트 에디터 사용법(Brackets, Visual Studio Code)

[필독] brackets 편집기 Adobe 지원종료에 관해서(설치파일 다운로드)

1분 미만

[필독] brackets 편집기 Adobe 지원종료에 관해서(설치파일 다운로드)

1분 미만

블라켓츠(Brackets) 다운로드 및 에밋 설치

6분

블라켓츠(Brackets) 사용법 및 단축키 활용

23분

블라켓츠(Brackets)에서 에밋(Emmet) 사용법 및 단축키 활용)

34분

비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정

47분

비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법

26분

비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지

19분

플렉스(Flex) 핵심이론

플렉스(Flex) – 부모요소 자식요소 개념 정리

11분

플렉스(Flex) - 부모요소에 쓰는 속성(display: flex)

8분

플렉스(Flex) - 부모요소에 쓰는 속성(justify-content)

17분

플렉스(Flex) - 부모요소에 쓰는 속성(align-items)

10분

[응용 예제] 부모요소 자식요소 중첩해서 수직 수평 중앙 정렬

8분

플렉스(Flex) - 부모요소에 쓰는 속성(flex-direction)

6분

플렉스(Flex) - 부모요소에 쓰는 속성(flex-wrap)

6분

플렉스(Flex) - 부모요소에 쓰는 속성(flex-flow)

4분

플렉스(Flex) - 부모요소에 쓰는 속성(align-content)

7분

플렉스(Flex) - 자식요소에 쓰는 속성(flex-grow, flex-shrink, flex-basis)

25분

플렉스(Flex) - 자식요소에 쓰는 속성(flex)

16분

플렉스(Flex) - 자식요소에 쓰는 속성(order)

9분

플렉스(Flex) - 자식요소에 쓰는 속성(align-self)

5분

플렉스(Flex) - 자식요소 사용하는 마진(margin) 속성

10분

플렉스(Flex) 유형별 UI 응용 예제

[응용 예제] 부모자식으로 중첩된 div를 가로 배치하기

7분

[응용 예제] 플렉스 시멘틱 레이아웃(반응형)

18분

[응용 예제] 플렉스 가로 세로 혼합 레이아웃

18분

[응용 예제] 스크롤 없는 높이 100% 레이아웃

15분

[응용 예제] 반응형 헤더영역(로고, 검색, 네비게이션)

14분

[Flex 그리드 예제] 플렉스(Flex) 가로(row) 그리드

9분

[Flex 그리드 예제] 플렉스(Flex) 세로(column) 그리드

10분

[웹사이트 레이아웃 예제] 플렉스(Flex) 레이아웃 설계(1)

14분

[웹사이트 레이아웃 예제] 플렉스(Flex) 레이아웃 설계(2)

12분

[웹사이트 레이아웃 예제] 플렉스(Flex) 레이아웃 설계(3)

15분

[웹사이트 레이아웃 예제] 플렉스(Flex) 레이아웃 설계(4)

10분

[응용 예제] 플렉스(Flex)로 카드 UI 수직 정렬 맞추기

10분

[응용 예제] flex-wrap과 flex-basis를 활용한 태블릿 레이아웃

14분

[응용 예제] 플렉스(Flex) 자식요소 패딩 마진 조절하기

13분

플렉스(Flex) 실전 UI 제작

Flex UI 실전 제작(1) – 반응형 로그인 폼 디자인(1)

12분

Flex UI 실전 제작(1) – 반응형 로그인 폼 디자인(2)

19분

Flex UI 실전 제작(1) – 반응형 로그인 폼 디자인(3)

7분

Flex UI 실전 제작(2) – 반응형 카드 UI 디자인(1)

17분

Flex UI 실전 제작(2) – 반응형 카드 UI 디자인(2)

12분

Flex UI 실전 제작(3) – 반응형 헤더 네비게이션(1)

11분

Flex UI 실전 제작(3) – 반응형 헤더 네비게이션(2)

9분

Flex UI 실전 제작(3) – 반응형 헤더 네비게이션(3)

16분

Flex UI 실전 제작(3) – 반응형 헤더 네비게이션(4)

19분

Flex UI 실전 제작(4) – 반응형 상담 신청하기(1)

10분

Flex UI 실전 제작(4) – 반응형 상담 신청하기(2)

8분

Flex UI 실전 제작(4) – 반응형 상담 신청하기(3)

24분

Flex UI 실전 제작(4) – 반응형 상담 신청하기(4)

15분

Flex UI 실전 제작(4) – 반응형 상담 신청하기(5)

6분

Flex UI 실전 제작(5) – 반응형 헤더영역과 이미지 갤러리(1)

10분

Flex UI 실전 제작(5) – 반응형 헤더영역과 이미지 갤러리(2)

25분

Flex UI 실전 제작(5) – 반응형 헤더영역과 이미지 갤러리(3)

17분

Flex UI 실전 제작(6) – 반응형 퍼블리싱 강좌 리스트(1)

16분

Flex UI 실전 제작(6) – 반응형 퍼블리싱 강좌 리스트(2)

19분

Flex UI 실전 제작(6) – 반응형 퍼블리싱 강좌 리스트(3)

14분

Flex UI 실전 제작(7) – 반응형 블로그 포스트 리스트(1)

17분

Flex UI 실전 제작(7) – 반응형 블로그 포스트 리스트(2)

18분

Flex UI 실전 제작(8) – 개인프로필 카드 UI 호버 이펙트

28분

반응형 애니메이션 모달(HTML+CSS+JQUERY)

1분 미만

플렉스(Flex) 실전 반응형 웹사이트 제작

HTML 와이어프레임 설계 및 CSS 기본설정(1)

15분

HTML 와이어프레임 설계 및 CSS 기본설정(2)

14분

헤더영역과 인트로 영역 상세 퍼블리싱(1)

14분

헤더영역과 인트로 영역 상세 퍼블리싱(2)

24분

About Section 상세 퍼블리싱

20분

CallAction Section 상세 퍼블리싱

28분

Festival Section 상세 퍼블리싱

10분

Footer 상세 퍼블리싱

15분

Ranking Section 상세 퍼블리싱(1)

20분

Ranking Section 상세 퍼블리싱(2)

21분

Testimonial Section 상세 퍼블리싱(1) - Slick Slider

13분

Testimonial Section 상세 퍼블리싱(2) - Slick Slider

12분

Testimonial Section 상세 퍼블리싱(3) - Slick Slider

22분

Testimonial Section 상세 퍼블리싱(4) - Slick Slider

17분

Blog Section 상세 퍼블리싱(1)

27분

Blog Section 상세 퍼블리싱(2)

27분

상세 퍼블리싱(스크롤 헤더 디자인 변경하기)

15분

상세 퍼블리싱(브라우저 가장 상단으로 보내는 Go to top 버튼)

10분

상세 퍼블리싱(부드럽게 슬라이딩 스크롤하는 제이쿼리와 순수 CSS)

15분

반응형 모바일 레이아웃 변환(1) - 세팅작업 및 7개 섹션

29분

반응형 모바일 레이아웃 변환(2) - Blog Section

10분

반응형 모바일 레이아웃 변환(3) - 헤더영역, 네비게이션(1)

20분

반응형 모바일 레이아웃 변환(4) - 헤더영역, 네비게이션(2)

13분

수강생 참고자료 및 완성본 다운로드

[다운로드] Flex 핵심이론 PDF 교재

1분 미만

[다운로드] Flex 응용 예제 완성본

1분 미만

[다운로드] Flex 실전 UI 예제 완성본

1분 미만

[다운로드] Flex 반응형 웹사이트 완성본

1분 미만

[다운로드] 포토샵 UI 디자인 PSD 파일

1분 미만

[다운로드 PDF] 비주얼 스튜디오 코드(Visual Studio Code) 및 에밋(Emmet) 치트키

1분 미만

강의 관련 오류 수정 및 자주 묻는 질문들(FAQ)

[오류수정] 블라켓(Brackets)에서 생기는 표시 오류

1분 미만

[FAQ] Brackets에서 Emmet 코드힌트 안생기는 오류 해결 방법

1분 미만

[FAQ] 블라켓(Brackets) 실시간 미리보기 크롬으로 열리게 하기(기본 브라우저 설정)

1분 미만

[오류수정] 모바일에서 좌우에 미세한 스크롤이 생기는 현상과 해결책(Slick.js 커스텀 CSS 관련)

1분 미만

[FAQ] HTML 내에 파일 링크할 때 꼭! 상대주소로 하셔야 합니다.

1분 미만

[FAQ] 블라켓(Brackets)에서 에밋(Emmet) 수동 설치하기

1분 미만

커뮤니티