Devlec.com Javacstudy.com
My페이지 |  처음사용자 이용안내 |  이용문의 |  회사소개

[2019 신강좌] HTML5 CSS3 모던 웹사이트 레이아웃 - 활용편1
1 Chapter. 01_강의개요 (40분)
2 강의개요 및 전체 과정 로드맵과 선수학습 안내 (샘플 무료강좌 참고)
3 Chapter. 02_기본 문서구조 형태와 Div 박스 성질의 이해 (2시간 20분)
4 가장 기본적인 형태의 HTML 문서파일 동영상다운
5 Div 박스 성질(1) 동영상다운
6 Div 박스 성질(2) 동영상다운
7 Div 박스 성질(3) 동영상다운
8 Div 박스 성질(4) 동영상다운
9 Div 박스 성질(5) 동영상다운
10 Div 박스 성질(6) 동영상다운
11 Div 박스 성질(7) 동영상다운
12 Div 박스 성질(8) - 위 아래 세로 틈 없애기 동영상다운
13 Chapter. 03_가로 2단 박스 너비 지정과 클리어픽스 (2시간 14분)
14 float 속성을 사용한 좌우 정렬 동영상다운
15 float 속성을 사용한 좌우 정렬 - 연습 동영상다운
16 float 속성을 사용해서 3개 박스 배치시키기 연습 동영상다운
17 Div 박스에 height 값이 퍼센트로 적용 안되는 문제를 해결하려면 동영상다운
18 Div 박스에 height 값이 퍼센트로 적용 안되는 문제를 해결하려면(2) 동영상다운
19 레이아웃 깨짐을 방지하는 box-sizing 동영상다운
20 float 속성 사용에 따른 문제점 리뷰 동영상다운
21 float 속성 사용에 따른 문제점 해결 - 클리어픽스 동영상다운
22 clearfix - 슈도클래스 after before 리뷰 동영상다운
23 Chapter. 04_div 레이아웃 예제1 (1시간 5분)
24 div 박스 레이아웃 예제 만들기(1) 동영상다운
25 div 박스 레이아웃 예제 만들기(2) - 텍스트 세로 정렬1 동영상다운
26 div 박스 레이아웃 예제 만들기(3) - 텍스트 세로 정렬2 동영상다운
27 div 박스 레이아웃 예제 만들기(4) - Css 코드 축약 동영상다운
28 Chapter. 05_clearfix 다양한 예제 (1시간 25분)
29 clearfix 다양한 예제(1) 동영상다운
30 clearfix 다양한 예제(2) 동영상다운
31 clearfix 다양한 예제(3) 동영상다운
32 이미지옆 텍스트 배치시 클리어픽스 적용하는 법 동영상다운
33 고정된 박스 높이에서의 auto 스크롤 나타나보이기 동영상다운
34 Chapter. 06_pseudo class (54분)
35 nth-child 슈도클래스 사용법(1) 동영상다운
36 nth-child 슈도클래스 사용법(2) 동영상다운
37 Chapter. 07_div 레이아웃 예제2 (2시간 30분)
38 Div 레이아웃 다양한 예제 - 4개 박스 좌우배치 새 클리어 처리기법과 문제점 동영상다운
39 Div 레이아웃 다양한 예제 - 퍼센트가 나누어 떨어지지 않는 홀수 갯수 정렬은 동영상다운
40 Div 레이아웃 다양한 예제 - 스탠다드한 요즘의 레이아웃 구조 동영상다운
41 Div 레이아웃 좌우배치 퍼센트배치(1) 동영상다운
42 Div 레이아웃 좌우배치 퍼센트배치(2) 동영상다운
43 Div 레이아웃 좌우배치 퍼센트배치(3) - 문제풀이 동영상다운
44 DIV 레이아웃 퍼센트배치 - 패딩으로 내용물 가운데 정렬하기 동영상다운
45 DIV 레이아웃 퍼센트배치 - border-box와 content-box 차이 동영상다운
수강기간 : 2개월 / 수강료 : \220,000

본 강좌는 HTML5/CSS3 레이아웃 강좌입니다.
레이아웃을 코딩한다는 것은 건물의 뼈대와 같은 작업을 의미합니다.
건물을 짓기 위해서 골격을 만들고 뼈대를 세우듯이 쇼핑몰, 홈페이지, 대부분의 웹사이트들은 먼저 레이아웃을 만들면서 전체적인 틀을 잡습니다.
이 강좌는 이러한 기초 레이아웃을 공부하는 강좌입니다.

따라서 기본적인 HTMl5/CSS3 문법은 알아야 이해가 됩니다.
사이트내 HTML5/CSS3 기본강좌를 먼저 보세요.
무료 제공되는 샘플강좌를 보면 선수학습에 대한 안내가 있습니다.
먼저 무료 샘플강좌를 보면서 가이드를 참고해주세요.

.
.

HTML5 & CSS3 모던 웹사이트 레이아웃 - 활용편1
HTML5 & CSS3 모던 웹사이트 레이아웃 - 활용편2

1,2편 전체 합해서 20시간 30분 정도 됩니다.
당연히 먼저 활용 1편을 학습한 후 2편을 이어서 공부합니다.

.
.

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


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

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


grid나 flex 같은 최신 레이아웃을 잡는 기술들은 추후 개설될 "실무"편 강좌에서 섹션별 강좌로 이어나갈 예정이니 차후에 "실무"편 강좌 시리즈가 나오면 유심히 봐주시면 고맙겠습니다.
실무편은 워낙 카테고리도 많고 다양한 주제라서 섹션별로 업데이트가 될 것입니다.
실무편은 레이아웃만 다루지 않고 반응형, 제이쿼리 등 무척 다양한 카테고리가 접목됩니다.
본 강좌 공부하시면서 참고해주시고요.

.
.

중요한건 본 강좌에서 다루는 예제들은 잘 연습해서 마스터하세요.
예제를 강사가 코딩하듯이 똑같이 그리고 빠르게 코딩을 쳐서 만들어야 합니다.
그러기 위해서는 먼저 강좌를 보고 레이아웃이 어떻게 만들어져 가는지를 이해하십시오.
그런 후 복습을 통해서 숙달을 시켜주세요.
시간을 재면서 전체적인 코딩 시간이 얼마나 걸렸는지 체크하세요.

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

화이팅입니다.^^


[AD] 데브렉 사이트 VIP Freepass 전과정 자유이용권 혜택보기
   
   
홈 회사소개 이용약관 개인정보 보호정책 이용안내 Q&A FAQ Guide