쇼핑몰 부분디자인 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 코딩 과정입니다.
따라서 기본적인 HTML, CSS 등에 대한 이해 및 선행학습이 필요합니다.
사이트내에 "어서와~ HTML5/CSS3는 처음이지~" 강의가 있습니다.
이 강의를 먼저 공부하시면 됩니다.

기초가 부족하다 생각되면 이러한 코딩과정을 바로 학습하지 마세요.
먼저 HTML5/CSS3 등을 공부해주세요.
그리고 사이트내에 있는 "웹표준 강좌"와 "메인페이지 웹표준으로 코딩하기" 강좌들도 같이 공부하시면 좋습니다.

코딩을 한다해서 무슨 프로그래밍을 하는 것은 아닙니다.
HTML이나 CSS는 일반적으로 프로그래밍 한다는 표현을 쓰지않고 코딩한다는 표현을 씁니다.
따라서 초보자들도 누구라도 배우면 다 코딩할 수 있다는 뜻입니다.

이러한 것을 배우고 할 수 있게 되면 내 홈페이지나 쇼핑몰 디자인을 보다 내가 원하는대로 자유롭게 꾸밀 수 있고 바꿀 수 있게 됩니다.
외주 업체나 프리랜서에게 돈주고 맡기지 않아도 내가 직접 할 수 있다는 뜻입니다.
물론 초보자라면 조금 열공하셔야 하는 부분은 있습니다.^^

아무튼 관심있는 분들은 위에서 언급드린 대로 먼저 "어서와~ HTML5/CSS3는 처음이지~" 강의를 먼저 보시고 이후에 이 강좌들을 봐보세요~ :)


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


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




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



.
.

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

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

.

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

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

.


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

끝으로,
긴글 정리좀 해드리면요..


- 하단디자인 내가 직접 코딩해보기
- 메인페이지 중간영역의 콘텐츠영역 디자인 내가 직접 코딩해보기
- 갤러리 레이아웃 디자인 내가 직접 코딩해보기
- 웹사이트 디자인 퀄리티를 높여주는 폰트 아이콘 사용법


등을 배울 수 있습니다.
다시한번 말씀드리지만 HTML5 CSS3 등을 모르신다면,
사이트내 제가 촬영해놓은 아래 강좌를 먼저 꼭 공부하세요~

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


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