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 3




There is no sample lecture.




1 chapter1_01_아톰 에디터 최신버전 설치하기     동영상다운
2 chapter1_02_기존 예제의 원본 6단계 수정 과정     동영상다운
3 chapter1_03_레이아웃 수정 코딩 실습 1-2단계     동영상다운
4 chapter1_04_레이아웃 수정 코딩 실습 3-4단계     동영상다운
5 chapter1_05_박스 3개를 메인이미지 박스 위로 띄워서 겹치기(1)     동영상다운
6 chapter1_06_박스 3개를 메인이미지 박스 위로 띄워서 겹치기(2)     동영상다운
7 chapter1_07_박스 3개를 메인이미지 박스 위로 띄워서 겹치기(3)     동영상다운
8 chapter2_01_아톰 기본설정 변경하기     동영상다운
9 chapter2_02_좌우 컨테이너 박스 가운데 정렬 및 부유 시키기     동영상다운
10 chapter2_03_포지션 속성에 따른 z, y, z축 공간좌표 이해     동영상다운
11 chapter2_04_3차원 공간좌표 z축 포지션 속성 실습     동영상다운
12 chapter2_05_포지션 속성의 다른 속성 값들 이해 및 마무리     동영상다운
13 chapter3_01_반응형 웹사이트 레이아웃 - 마크업 및 기본 구조     동영상다운
14 chapter3_02_반응형 웹사이트 레이아웃 - PC버전 CSS 코딩하기     동영상다운
15 chapter3_03_반응형 웹사이트 레이아웃 - 박스 너비 수치 정확히 계산하기     동영상다운
16 chapter3_04_반응형 웹사이트 레이아웃 - 보더값이 들어간 경우의 계산 및 박스사이징 사용     동영상다운
17 chapter3_05_미디어쿼리를 사용한 모바일 최적화 코딩     동영상다운
18 chapter3_06_height값을 auto로 수정했을 경우 반응형 사이트의 모습은     동영상다운
19 chapter4_01_Full Coding - 기본 프레임 구축하기     동영상다운
20 chapter4_02_Full Coding - inner-div-box 삽입하기     동영상다운
21 chapter4_03_Full Coding - inner-div-box 각 영역에 삽입하기     동영상다운
22 chapter4_04_Full Coding - 메인박스에 박스 3개 삽입하기     동영상다운
23 chapter4_05_Full Coding - 박스 3개 부유시키기     동영상다운
24 chapter5_01_position 속성에 대한 기초이론1     동영상다운
25 chapter5_02_position 속성에 대한 기초이론2     동영상다운
26 chapter5_03_position 속성에 대한 기초이론3     동영상다운
27 chapter6_01_플렉스박스 수평 정렬1     동영상다운
28 chapter6_02_플렉스박스 수평 정렬2     동영상다운
29 chapter6_03_플렉스박스 수직 정렬1     동영상다운
30 chapter6_04_플렉스박스 수직 정렬2     동영상다운
31 chapter6_05_baseline 첫번째 예제 - 별도의 클래스 만들어서 적용하기     동영상다운
32 chapter6_06_Tip 박스 정사각형 모양으로 만들기 팁 2가지     동영상다운
33 chapter6_07_baseline에 대한 고찰     동영상다운
수강기간 : 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 전과정 자유이용권 혜택보기