쇼핑몰 부분디자인 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

★ 1.
먼저 본 과정은 선수학습이 있습니다.

★ 2.
HTML/CSS에 대해서 모르시면 먼저 사이트내 "어서와~ HTML5/CSS3는 처음이지~" 강좌를 보시고 학습할 것을 권장드립니다.

★ 3.
본 강좌의 코딩 결과물을 자신이 사용하는 쇼핑몰 솔루션에 적용해보고자 한다면 쇼핑몰 솔루션내에서 디자인 수정을 담당하고 있는 여러 파일구조 시스템을 어느정도 알아야합니다. 따라서 이와 관련된 강의를 공부하세요.

.
.

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

본 과정은 HTML5, CSS3 코딩 과정입니다.
따라서 기본적인 HTML, CSS 등에 대한 이해 및 선행학습이 필요합니다.
사이트내에 "어서와~ HTML5/CSS3는 처음이지~" 강의가 있습니다.
이 강의를 먼저 공부하시면 됩니다.

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

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

관심있는 분들은 위에서 말한대로 "어서와~ HTML5/CSS3는 처음이지~" 강의를 먼저 보시고 이 강좌들을 보실 것을 권장드립니다.


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


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




아래는 위 하단디자인을 블랙버전으로 만들어본겁니다.
사용하는 쇼핑몰 솔루션 등에 하단디자인으로 적용할 수 있습니다.



.
.

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

이 과정에서는 총 3개의 실전 예제를 코딩하여 만듭니다.
아무것도 없는 빈 여백에서 하드 코딩을 직접 하나하나 타이핑 쳐나가면서 예제 결과물을 만들어냅니다.
따라서, 이러한 과정을 통해서 학습자는 어떻게 결과물이 만들어지고 코딩되어지는지를 한눈에 볼 수 있으므로 이해가 잘 될 것입니다.

따라서 HTML, CSS를 책으로 공부했을 때의 막막하고 무슨 설명인지 도통 모르겠는 그런 상황은 거의 생기지 않을 것입니다.^^
물론 선수학습은 위에서 말한대로 먼저 하셔야 합니다.

.
.

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

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

.
.

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

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


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


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

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


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