ALL FREEPASS | C# | ASP.NET | ASP.NET Core | MVC Framework | WPF | JAVA | I/O Thread | JSP | MVC JSP | Spring / SpringBoot
Python | Data Analysis | Android / Kotlin | Android Pro | Unity | C / C++ | Algorithm | Data Structure | Design Pattern | Console Game | ASP/PHP | Git / IDE
HTML5 / CSS3 | JavaScript | jQuery | JSON / Ajax / DOM | Node.js / React / Vue.js | Angular | Server | SQL | Linux | Oracle | Notion | FREE ( 무료 강좌 )

내PC로 동영상강좌 다운로드 CSS 기반의 웹사이트 레이아웃 정복하기 (전반부)

위 강좌 이미지를 클릭하시면 강의목차(table of contents)로 바로 이동합니다. 본 강좌는 다운로드 방식 강좌입니다. 따라서, 수강신청 후 내pc로 다운 저장하여 학습합니다.

수강기간 VIP 프리패스로 이용시10개월 단과로 이용시2개월
교육방식 다운로드 방식 - 강의를 내pc로 다운로드 받아서 저장해놓고 학습하는 방식
수강금액 220,000원 / 2개월 (VIP 프리패스로 이용시는 무료 이용이며, 프리패스 수강기간이 적용)
자료제공 제공되는 자료가 있는 경우 1회차 목차에서 강의소스 및 첨부파일 제공

상세설명 및 참고사항


이 시리즈 강좌는 최소한의 HTML/CSS 기초학습 후 레이아웃을 알아보고 만들어보는 강좌입니다.
레이아웃을 코딩한다는 것은 건물의 뼈대와 같은 작업을 의미합니다.
건물을 짓기 위해서 골격을 만들고 뼈대를 세우듯이 쇼핑몰, 홈페이지, 대부분의 웹사이트들은 먼저 레이아웃을 만들면서 전체적인 틀을 잡습니다.

이 강좌는 이러한 기초 레이아웃을 공부하는 강좌입니다.

사이트내 HTML5/CSS3 기본강좌들도 병행하면서 같이 공부해도 좋습니다.
 





아래의 맛보기 샘플강좌는 무료로 볼 수 있습니다. 맛보기 샘플강좌








 

TABLE of CONTENTS - CURRICULUM 커리큘럼 처음 사용자분들은 다운전 "처음 사용자 이용안내" 페이지의 가이드 글을 읽고 다운 및 이용해주세요!

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에 대한 고찰