STUDY.GODO.CO.KR - OnLine VIDEO LECTURE
   
ID/PW 찾기 My페이지 |  처음사용자 이용안내 |  게시판 |  VIP 전과정 자유이용권
월 9,900원으로 전과정 프리패스 이용!

[ 2018 New 고도몰실전 3 ] 부분 디자인(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

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

안녕하세요~ 강사 카플란(ID) 입니다.
본 과정은 HTML5, CSS3 100% 실전/실무 코딩과정입니다.
따라서 기초적인 HTML, CSS 등에 대한 이해 및 선행학습이 필요합니다.
혹 기초가 부족하다 생각되면 이러한 실무 코딩과정을 바로 학습하지 마시고 기초적인 HTML, CSS 등을 먼저 공부해주세요.

그리고 HTML, CSS를 공부하고 나서 사이트내에 있는 "웹표준 강좌"와 "메인페이지 웹표준으로 코딩하기" 강좌 등을 먼저 공부해주십시오.
왜냐하면 이 과정은 실무 코딩과정이기 때문입니다.
그리고 HTML, CSS 기초학습 후 반드시 예제를 통해서 실습을 해봐야 합니다.
사이트내에 잘 되어있는 "웹표준 강좌"와 "메인페이지 웹표준 코딩하기" 강좌에서 다루는 예제들을 선행학습하시면 좋습니다.


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


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




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



HTML5, CSS3 기술을 배우면 쇼핑몰의 여러 레이아웃 요소와 부분디자인을 내가 원하는대로 만들 수 있습니다.
이 과정은 그러한 예제들을 실제 코딩을 통해서 집중적으로 배워보는 과정입니다.
강의목표는,
고도몰5 솔루션으로 쇼핑몰 구축시 스킨디자인 그대로를 사용하지 않고 내가 원하는대로 레이아웃과 부분디자인을 더해서 내쇼핑몰을 좀더 다양하게 구축해보고자 함입니다.


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

현대의 모던한 HTML5, CSS3 기반의 웹사이트, 쇼핑몰 구축을 정적인 책을 통해서 공부한다는 것은 힘듭니다. 가급적 HTML5, CSS3 강의는 동영상강의를 통해서 그 예제가 어떻게 코딩이 되어져서 변화되어져 가는지를 눈으로 보면서 배우십시오.
그러면 어렵게 느껴지는 HTML, CSS 코딩도 보다 쉽게 이해가되고 여러분도 강사와 같은 수준의 레이아웃 예제들을 코딩해 낼 수 있습니다.

...

당연한 얘기겠지만,
이 과정에서 만드는 예제들은 모두 고도몰5로 구축중인 데모 쇼핑몰에 부분디자인으로 적용하기 위해서입니다.

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


궁극적인 강의목표는 스킨을 수정하고, 부분적으로는 새로운 레이아웃 디자인을 만들어서 입히는 것을 강의목표로 합니다.
이 과정은 [2018 NEW 실전] 과정의 한 코스로써 아래의 Step 순서대로 진행되는 과정의 일환이오니 아래 설명을 찬찬히 필독해주세요.

.
.
.

(↓아래는 1~3 Step 과정의 공통설명 글 입니다)

전체적인 강의 Step은 3단계로 진행됩니다.
이 강의는 아래의 3단계에 해당하는 동영상 교육과정입니다.

▶ 1단계 : [ 2018 New 고도몰실전 1 ] Moment 무료스킨 적용, 기본수정 작업들 체크.
▶ 2단계 : [ 2018 New 고도몰실전 2 ] 메인페이지 상품진열 및 Display를 담당하는 고도몰 메인테마 11종류 완전정복.
▶ 3단계 : [ 2018 New 고도몰실전 3 ] 부분 디자인을(HTML5, CSS3) 직접 만들어 쇼핑몰에 적용하기.

현재 2단계 과정까지 강의진행이 완료되서 오픈된 상태입니다.
3단계 과정은 난이도가 조금 있는 100% 실무 코딩(HTML5, CSS3) 과정입니다.
2017년 12월이 다 가기전에 오픈됩니다.

...

고도몰 무료스킨을 사용해본 분들은 잘 아시겠지만 고도몰5 무료스킨을(어떤것이든) 적용하면 바로 사용할 수는 없습니다.
기본적인 수정작업을 내 쇼핑몰에 맞게 수정해줘야하죠.
만약 기존의 사용하던 고도몰5 쇼핑몰에 스킨을 엎어쓰는 경우라면 기존 이미지사이즈나 이런것들도 수정이 필요할 수 있습니다.

그리고 무료스킨 그대로 사용하기 보다는 좀더 내 쇼핑몰에 맞는 컨셉을 잡고 디자인을 기획하는게 좋습니다.
결국 이러한 부분은 HTML, CSS를 사용해서 부분적으로 디자인을 Reform하고 Redesign 하여 내 쇼핑몰에 적용해줘야 합니다.
쉽게 말해 HTML5, CSS3 코딩을 직접하여 내가 원하는대로 부분적인 레이아웃 디자인을 만들어서 적용해야 합니다.
위 3단계 Step까지의 과정이 바로 이러한 것을 하는 과정입니다.

...

예를들면,
하단디자인의 경우는 완전히 바꿔서 새디자인으로 바꿉니다.
그러기 위해서는 먼저 HTML, CSS를 사용해서 하단디자인 레이아웃 코딩을 하고,
관리자모드에서 하단디자인 코딩한 레이아웃을 바꿔 적용해주면 됩니다.

말은 쉽게 썼지만 이 정도를 직접 한다는 것은 초보자가 하기에는 어렵습니다.
기본적으로 HTML, CSS에 대해서 기본은 할줄 알아야 하겠지요..
1, 2단계 과정에 비해서 3단계 과정은 실무 코딩 과정이기 때문에 결국 HTML, CSS에 대한 기본적인 학습과 이해가 어느정도는 있어야 합니다.

...

3단계 실무 코딩 과정은 HTML, CSS 기본은 할줄 아는 사람들을 위한 강의로 먼저 진행하고, 나중에 별도로 코딩(HTML/CSS)을 모르는 유저들을 대상으로 사용자 메뉴얼을 따로 만들 계획입니다.
즉,


- HTML5, CSS3를 모르는 고도몰 사용자분들이나,
- HTML5, CSS3는 배웠지만 초보수준이라 강사가 만드는 예제를 따라하기 힘든 분들이나,
- HTML5, CSS3는 좀 알지만 빨리 내 쇼핑몰에 적용해보고 싶은 분들은


이 사용자 메뉴얼을 보십시오.
강의에서 제가 만든 레이아웃 부분디자인 결과물만 다운받아서 쇼핑몰에 적용해볼 수 있습니다.

...


끝으로,
3단계 Step까지 학습을 진행하면 부분적으로 아래와 같은 레이아웃 디자인을 직접 코딩해서 내 쇼핑몰에 적용하고 입힐 수 있습니다.


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


등을 HTML5, CSS3를 사용해서 직접 만들고 내 쇼핑몰에 적용합니다.

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



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