SHOPPING MALL - OnLine VIDEO LECTURE
   
ID/PW 찾기 My페이지 |  처음사용자 이용안내 |  이용문의 |  VIP 전과정 자유이용권
한달 9,900원으로 모든 동영상강의를 프리패스로 이용하세요~ :)

[2018 신규 - 코딩 중고급] 쇼핑몰 부분디자인 HTML5 CSS3 코딩 따라하기
1 Part 1 강의 업로드 완료!    
2 Part 1 - 갤러리 레이아웃 [일괄다운]     동영상다운
3 강의개요 - 갤러리 레이아웃    
4 강의파일 구성 및 설명    
5 갤러리 레이아웃 마크업1 - div 구성    
6 갤러리 레이아웃 마크업2 - 마무리    
7 갤러리 레이아웃 CSS 코딩1 - 구성    
8 갤러리 레이아웃 CSS 코딩2 - 상단쪽    
9 갤러리 레이아웃 CSS 코딩3 - inline-block 속성 이해하기    
10 갤러리 레이아웃 CSS 코딩4 - 박스크기 및 마우스 on 색상반전 처리    
11 갤러리 레이아웃 CSS 코딩5 - 원만들기1    
12 갤러리 레이아웃 CSS 코딩6 - 원만들기2    
13 포토샵으로 이미지 잘라서 갤러리 멋있게 꾸미기    
14 전체적인 갤러리 디자인 밸런스 조정 - 마무리    
15 Tip - li 태그 사이의 불필요한 간격을 없애주려면 - CSS로 처리    
16 Tip - li 태그 사이의 불필요한 간격을 없애주려면    
17 Tip - li 태그 사이의 불필요한 간격을 없애주려면 - 마이너스 사용    
18 Part 2 강의 업로드 완료!    
19 Part 2 - 콘텐츠영역 레이아웃 디자인(폰트 아이콘) [일괄다운]     동영상다운
20 강의개요 - 콘텐츠영역 레이아웃 디자인    
21 HTML 마크업1 - 컨테이너 작성    
22 HTML 마크업2 - 아이템 마크업    
23 HTML 마크업3 - 아이템 li 태그 요소들 정리    
24 HTML 마크업4 - Div 클래스명 정리    
25 CSS 코딩1 - 각 요소들 선택자 정의    
26 CSS 코딩2 - 패딩 옵션 3개짜리 설명    
27 CSS 코딩3 - h2 p 간격 설정    
28 CSS 코딩4 - p 글자 간격 line-height    
29 CSS 코딩5 - innerbox 정의    
30 CSS 코딩6 - inline과 float left 속성 차이점    
31 CSS 코딩7 - li 한개요소 정의    
32 CSS 코딩8 - 애니메이션 영역 block 속성    
33 CSS 코딩9 - position relative absolute 완벽 이해시키기    
34 CSS 코딩10 - 기준점이 없으면    
35 CSS 코딩11 - 소제목 타이틀 정의    
36 지금까지의 CSS 코드 정리하기    
37 font-awesome 사용법1 - cdn 주소삽입 및 폰트 아이콘 사용하기    
38 font-awesome 사용2 - 아이콘 확대 축소 - 가운데 정렬 - 스핀 애니메이션    
39 font-awesome 사용3 - 스킨 애니메이션 크게 도는거 수정하려면    
40 font-awesome 사용4 - 나머지 사용법들을 익히려면    
41 li 태그 맨 우측 부분의 여백이 안나타나게 하려면    
42 li 태그 맨 우측 부분의 여백이 안나타나게 하려면2    
43 li 태그 맨 우측 부분의 여백이 안나타나게 하려면 - span 블럭으로 처리1    
44 li 태그 맨 우측 부분의 여백이 안나타나게 하려면 - span 블럭으로 처리2    
45 선택자 소속 관계 찾아들어가는 다양한 방법들    
46 li 태그 맨 우측 부분의 여백이 안나타나게 하려면 - 플랜B 차선책    
47 강의를 마무리하면서..    
48 Part 3 강의 업로드 완료!    
49 Part 3 - 하단디자인 레이아웃 [일괄다운]     동영상다운
50 강의개요 - 하단디자인 레이아웃    
51 Basic CSS 파일 설명    
52 하단디자인 마크업1 - 기본 프레임 구성    
53 하단디자인 마크업2 - 푸터 콘텐츠 영역 작성    
54 하단디자인 마크업3 - 푸터 콘텐츠 영역 마무리코딩    
55 하단디자인 CSS 코딩1 - 스타일정의    
56 하단디자인 CSS 코딩2 - footer 및 footer-top    
57 하단디자인 CSS 코딩3 - footer-wrap    
58 하단디자인 CSS 코딩4 - footer-wrap 마무리    
59 하단디자인 CSS 코딩5 - 로고영역    
60 하단디자인 CSS 코딩6 - 푸터 컨텐츠 나머지영역 간격    
61 하단디자인 CSS 코딩7 - title    
62 하단디자인 CSS 코딩8 - 전화번호    
63 하단디자인 CSS 코딩9 - 계좌정보    
64 하단디자인 CSS 코딩10 - 색상정리    
65 하단디자인 CSS 코딩11 - P태그 A태그 정의    
66 하단디자인 CSS 코딩12 - 하이라이트 효과 만들기    
67 하단디자인 CSS 코딩13 - 폰트아이콘    
68 하단디자인 CSS 코딩14 - 폰트아이콘으로 디자인완성도 높이기    
수강기간 : 2개월 / 수강료 : \77,000

( 아래 샘플강좌들은 화면 우측하단쪽 확대버튼을 눌러보세요! )

본 과정은 HTML5, CSS3 100% 실전/실무 코딩과정입니다.
따라서 기초적인 HTML, CSS 등에 대한 이해 및 선행학습이 필요합니다.
혹 기초가 부족하다 생각되면 이러한 실무 코딩과정을 바로 학습하지 마시고 기초적인 HTML, CSS 등을 먼저 공부해주세요.
그리고 사이트내에 있는 "웹표준 강좌"와 "메인페이지 웹표준으로 코딩하기" 강좌도 보시면 좋습니다.
왜냐하면 이 과정은 실무 코딩과정이기 때문입니다.


★ 아래는 [컨텐츠영역 부분디자인] 샘플강좌입니다 ★


★ 아래는 [하단디자인 레이아웃] 샘플강좌입니다 ★




아래는 위 하단디자인을 블랙버전으로 만들어본겁니다.
이렇게 디자인 코딩하여 고도몰5 하단디자인으로 적용해줍니다.



.
.

HTML5, CSS3 등을 배우면 쇼핑몰의 여러 레이아웃 요소와
부분디자인을 내가 원하는대로 만들 수 있습니다.
이 과정은 그러한 예제들을 실제 코딩을 통해 배워보는 과정입니다.

이 과정에서는 총 3개의 실전 부분디자인 예제를 코딩하여 만듭니다.
아무것도 없는 빈 여백에서 하드 코딩을 정교하게 해나가면서 예제 결과물을 만들어냅니다.
따라서, 이러한 과정을 통해서 학습자는 어떻게 부분디자인이 만들어지고 코딩되는지를 한눈에 볼 수 있습니다.
HTML, CSS를 책으로 공부했을 때와는 비교가 안될 것입니다.

.
.

현대의 모던한 HTML5, CSS3 기반의 웹사이트, 쇼핑몰 구축을
정적인 책을 통해서 공부한다는 것은 매우 힘듭니다.
가급적 HTML5, CSS3 강의는 동영상강의를 통해서 그 예제가 어떻게
코딩이 되어져서 변화되어져 가는지를 눈으로 보면서 학습할 것을 권장합니다.

그러면 어렵게 느껴지는 HTML, CSS 코딩도 보다 쉽게 이해가되고
여러분도 강사와 같은 수준의 예제들을 코딩해 낼 수 있습니다.

.
.


아울러 이 과정은 직접 이러한 부분디자인을 직접 코딩해서 고모돌5 솔루션에 적용해보고자 하는 사람이라면 누구든지간에 공통적으로 볼 수 있는 강좌입니다.
고도몰5 쇼핑몰 솔루션 사용자라면 자신이 사용하는 스킨에 상관없이 이 강좌를 볼 수 있습니다.
어떤 스킨을 사용하는지는 전혀 상관이 없습니다.

끝으로,
본 과정을 마스터하면 부분적으로 아래와 같은 레이아웃 디자인을 직접 코딩해서 내 쇼핑몰에 적용하고 입힐 수 있습니다.


- 하단디자인. (완전 다 바꿉니다)
- 메인페이지 중간영역의 콘텐츠영역 디자인.
- 사이트 디자인을 높여주는 폰트 아이콘 사용법.
- 갤러리 레이아웃 디자인.


등을 HTML5, CSS3를 사용해서 직접 만들고 내 쇼핑몰에 적용할 수 있습니다.
다시한번 말씀드리지만 HTML5 CSS3 등을 모르신다면,
사이트내 아래 강좌를 먼저 공부하세요~

★ 어서와~ HTML5 CSS3 는 처음이지~ ★


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



   
   
홈 회사소개 이용약관 개인정보 보호정책 이용안내 Q&A FAQ Guide