VIP 프리패스 전과정 자유이용권 혜택보기

ALL FREEPASS | C# | ASP.NET | CORE | .Net FrameWork | WPF | JAVA | I/O Thread | JSP | MVC JSP | Spring / SpringBoot FrameWork
Python | Android / Kotlin | Android Pro | Unity 2D/3D | C / C++ / MFC | Algorithm | Data Structure | Design Pattern | Console Game | ASP | PHP | Git / IDE
HTML5 | CSS3 | JavaScript | jQuery / Mobile | Ajax / JSON / DOM | Angular | Node.js | Windows Server / Azure / Cloud | SQL Server | Linux | Oracle | FREE ( 무료 동영상강좌 )
CSS 기반의 웹사이트 레이아웃 정복하기 Part 4




There is no sample lecture.




1 001_강의개요     동영상다운
2 002_캐러셀 슬라이드 배너 적용하기 위한 CDN 삽입하기     동영상다운
3 003_부트스트랩 삽입 후 레이아웃 깨지는 현상 원인과 해결 방법     동영상다운
4 004_각각의 엘리먼트 용어(영어단어) 암기하기     동영상다운
5 005_캐러셀 슬라이드 배너를 위한 기본 마크업 하기     동영상다운
6 006_무료로 이미지와 동영상을 이용할 수 있는 사이트 알아보기     동영상다운
7 007_슬라이드 배너 이미지 삽입하기     동영상다운
8 008_이미지 삽입 후 레이아웃이 일부 깨지는 현상에 대해서     동영상다운
9 009_command tag를 사용하여 캐러셀 슬라이드 배너 동작시키기     동영상다운
10 010_캐러셀 슬라이드 배너에 자막 넣기     동영상다운
11 011_초보자를 위한 css 오류 잡는 방법     동영상다운
12 012_이미지 사이즈 일괄수정 클래스 적용 및 캡션 배경색 넣기     동영상다운
13 013_이미지에 링크 걸고 링크 없는 이미지 고려하여 2개 클래스 적용하기     동영상다운
14 014_가독성을 위한 배경색 클래스 지정하고 대소문자 적용하기     동영상다운
15 015_Left and Right Controls 구현     동영상다운
16 016_indicators 동작 구현     동영상다운
17 017_캐러셀 슬라이드 배너 핵심 pt 정리     동영상다운
18 018_아이콘 이미지 수정하기(1)     동영상다운
19 019_아이콘 이미지 수정하기(2)     동영상다운
20 020_아이콘 이미지 수정하기(3)     동영상다운
21 021_캐러셀 이미지 가로 너비 조절하기     동영상다운
22 022_부트스트랩 3 버전과 4 버전의 호환성 및 차이점(1)     동영상다운
23 023_부트스트랩 3 버전과 4 버전의 호환성 및 차이점(2)     동영상다운
24 024_part2_001_네비게이션 상단 메뉴 만들기 개요 및 전체 구조 미리보기     동영상다운
25 025_part2_002_상단메뉴 마크업 및 CSS 코딩(1) - 로고, (2) - li     동영상다운
26 026_part2_003_상단메뉴 마크업 및 CSS 코딩(3) - 센저리프 계열 폰트 적용, (4) - flexbox     동영상다운
27 027_part2_004_우측 로그인 버튼 만들기 및 메뉴 수평 정렬     동영상다운
28 028_part2_005_스무스한 애니메이션 적용을 위한 Transition 속성 사용하기     동영상다운
29 029_part2_006_트랜지션 속성 4가지 정리하기     동영상다운
30 030_part2_007_트랜지션 옵션들 정리     동영상다운
31 031_part2_008_Transition linear ease 옵션의 차이점 눈으로 확인하기     동영상다운
32 032_part2_009_상단메뉴 우측 회원가입 버튼 디자인 클래스 처리하기(1)     동영상다운
33 033_part2_010_상단메뉴 우측 회원가입 버튼 디자인 클래스 처리하기(2)     동영상다운
34 034_상단 네비게이션 디자인과 하단 디자인 PT 정리     동영상다운
35 035_part3_001_하단 디자인 레이아웃(1)     동영상다운
36 036_part3_002_하단 디자인 레이아웃(2)     동영상다운
37 037_part3_003_하단 디자인 레이아웃(3)     동영상다운
38 038_part3_004_하단 디자인 레이아웃(4) 마무리     동영상다운
39 039_part4_001_Grid 강의개요 및 Grid 이전의 전통적인 레이아웃 구성     동영상다운
40 040_part4_002_Grid 기술을 사용한 레이아웃 구성(1) - grid     동영상다운
41 041_part4_003_Grid 기술을 사용한 레이아웃 구성(2) - fr 단위     동영상다운
42 042_part4_004_Grid 기술을 사용한 레이아웃 구성(3) - columns     동영상다운
43 043_part4_005_Grid 기술을 사용한 레이아웃 구성(4) - areas     동영상다운
44 044_part4_006_Grid 기술을 사용한 레이아웃 구성(5) - other options     동영상다운
45 045_part4_007_Grid 기술을 사용한 레이아웃 구성(6) - perpendicular merge     동영상다운
46 046_part4_008_그리드의 새로운 단위 fr 개념 좀 더 자세히 이해하기(1)     동영상다운
47 047_part4_009_그리드의 새로운 단위 fr 개념 좀 더 자세히 이해하기(2)     동영상다운
48 048_part4_010_그리드 fr 단위 auto 자세히 이해하기     동영상다운
49 049_part4_011_그리드 레이아웃을 상단메뉴에 활용하는 실전 연습(1)     동영상다운
50 050_part4_012_그리드 레이아웃을 상단메뉴에 활용하는 실전 연습(2)     동영상다운
수강기간 : 2개월 / 수강료 : \220,000

본 강좌는 "CSS 기반의 웹사이트 레이아웃 정복하기" 시리즈 강좌입니다.
파트1편 부터 파트4편 까지 강좌가 있습니다.

기본적인 HTML/CSS에 대한 선학습이 되어져있어야 합니다.
이 시리즈 강좌는 기초학습 후 주로 CSS기반의 레이아웃 관련된 문법을 알아보고 예제를 만들어보는 강좌입니다.
레이아웃을 코딩한다는 것은 건물의 뼈대와 같은 작업을 의미합니다.
건물을 짓기 위해서 골격을 만들고 뼈대를 세우듯이 쇼핑몰, 홈페이지, 대부분의 웹사이트들은 먼저 레이아웃을 만들면서 전체적인 틀을 잡습니다.
이 강좌는 이러한 기초 레이아웃을 공부하는 강좌입니다.

따라서 기본적인 HTMl5/CSS3 문법은 알아야 이해가 됩니다.
사이트내 HTML5/CSS3 기본강좌를 먼저 보세요.

.
.

기존의 레이아웃은 테이블 태그를 많이 사용했습니다.
그러면서 현대의 모던한 웹사이트들은 Div 태그를 사용하기 시작했습니다.
이러한 레이아웃도 시대의 흐름과 유행이 있습니다.

float를 사용하여 레이아웃을 잡는다든지,
position을 속성을 사용하여 사이트 레이아웃을 잡는다든지,
grid 시스템을 사용하기 까지 무척 다양하고 계속 변화하고 발전하고 있습니다.

grid나 flex 같은 최신 기술은 브라우저가 다 지원하지 않다보니 업계 전체의 보편적인 기술로 받아들여지기 까지 상당한 시간이 걸립니다.
하지만 미래를 준비하는 차원에서 grid나 flex 공부를 어느정도 해놔야합니다.
이러한 grid나 flex 최신 기술은 파트3,4편에서 주로 다룹니다.
1, 2편에서는 다루지 않습니다.

.
.

먼저 강좌를 보고 레이아웃이 어떻게 만들어져 가는지를 이해하십시오.
그런 후 복습을 통해서 숙달을 시켜주세요.
시간을 재면서 전체적인 코딩 시간이 얼마나 걸렸는지 체크하세요.

아무것도 없는 백지 상태에서 코딩을 쳐서 예제를 똑같이 만들어내세요.
그렇게 해야지만 이 예제들이 완전히 내것이 됩니다.
이 정도 예제는 빠르게 코딩해야 이후 실무편 강좌를 잘 따라올 수 있으니
명심하시고 많은 반복학습과 코딩을 통해 마스터하세요.

화이팅입니다.^^


VIP Freepass 전과정 자유이용권 혜택보기