html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.

 

인프런에서 만나보세요 : https://inf.run/CZ1az

 

초급자를 위해 준비한 [웹 개발, UX/UI] 강의입니다.

 

이런 걸 배워요!

  • Figma 디자인 해석과 이미지 추출하기
  • HTML/CSS 파일 초기 세팅하기
  • CSS 변수 및 글로벌 스타일 작성하기
  • 웹폰트 사용 설정하기
  • 레이아웃 설계: Grid와 Flexbox 활용하기
  • 미디어쿼리 활용 반응형 CSS 구현하기
  • 컨테이너 쿼리 활용 반응형 CSS 구현하기
  • Swiper.js를 활용한 리뷰 슬라이드 제작하기
  • jQuery활용 모바일 메뉴, 장바구니 토글 슬라이드 제작하기
  • GitHub Pages 활용 웹사이트 배포하기

본 과정은 HTML, CSS, Javascript, jQuery 기초가 있어야 원할하게 학습하실 수 있습니다.

각 파트별 학습은 아래 링크를 확인해주세요.

html, css, javascript(jQuery)의 기초는 있지만 종합적으로 적용하기에 막막하다면 본 강의를 확인해보세요. 

디자인에서 레이아웃 및 스타일을 확인하고 반응형까지 구현하는 종합 강의가 되겠습니다. 

많은 관심부탁드립니다. 

 

 

 

반응형
그린컴퓨터아트학원 KDC 온라인과정 안내드립니다.
100%온라인수업입니다. 편한시간에 언제든 수강하실수 있습니다.

[훈련대상]

•국민내일배움카드를 발급받은 자
•「K-디지털 기초역량훈련」수강 신청일 기준, 직업능력개발계좌 유효기간이 남아있는자

[훈련혜택]
• 과정신청시 수강비용의 10% 자비 부담
• 과정 80%이상 수료시 자비부담금 전액 환급

[훈련내용]
•  프로그래밍 언어, 웹∙앱 개발, 데이터베이스 입문 등의 기초 내용으로 구성
•  수준은 초급·중급으로 구분하여 운영, 취향에 맞는 과정을 선택하여 100% 온라인으로 수강
 
[과정소개]
1) 디지털역량 제고를 위한 웹구조 언어&웹스타일링 언어 기초 4/3~4/28 (30일/20H)225,000원(자부담 22,500)
2) 실무능력까지 길러주는 인터랙티브 웹 디자인 기초 입문(HTML선수학습필수) 4/3~4/28(30일/20H) 225,000원(자부담 22,500)
3) 디지털역량 제고를 위한 다이나믹 클라이언트 사이드 스크립트 기초 4/3~4/28 (30일/20H) 95,000원(자부담 9,500)
4) 입문자를 위한 데이터베이스 & SQL 기초부터 활용까지 4/3~4/28 (30일/20H) 170,000원(자부담 17,000)
 

수강 상담신청하기

반응형

https://youtu.be/who42wBr1ns

POSITION Sample : https://codepen.io/alikerock/pen/zadQQW

FLEX 활용 Sample : https://codepen.io/alikerock/pen/Yvxbb

- Position

- Flex 컨텐츠의 양이 적어도 푸터를 하단에 고정하는 방법 2가지

 

#css #position #flex

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub

반응형

'Youtube 동영상 > css3' 카테고리의 다른 글

IR기법 2가지 - 네이버, 애플 로고 텍스트를 이미지로 교체하  (0) 2022.03.30
네이버와 애플의 로고에 쓰인 IR 기법  (0) 2022.03.28
CSS3 - 86 [ position:sticky ] script 없이 순수 CSS로 스크롤을 할 때 요소를 고정하기  (0) 2019.11.20
CSS3 - 85 [ CSS ANIMATION ] 공지 카드 애니메이션, card notification css animation  (0) 2019.10.27
CSS3 - 84 [ CSS ANIMATION ] 토글 슬라이드 버튼 애니메이션, form, flex, position, transition, css3 animation  (0) 2019.10.27

https://youtu.be/Rvv_X2mAcDI

LookBook P1/8 Download(파트1의 예제만 제공합니다. 순서대로 학습 바랍니다.) https://drive.google.com/file/d/1FMFeQpHlGFxDTQ5Yh4RjYtq-p4JucXqz/view?usp=sharing

 

예제 이미지 다운로드

https://drive.google.com/file/d/10lwzYg9yFkjzhR6rByXiM-l9Fb9lojay/view?usp=sharing

 

 

반응형

'Youtube 동영상 > psd to html & css' 카테고리의 다른 글

PSD TO HTML 76 [ LookBook P6/8 ] 모바일 디자인 참조 코딩하기 파트6 - ASIDE 토글 메뉴 구현하기  (0) 2019.12.27
PSD TO HTML 75 [ LookBook P5/8 ] 모바일 디자인 참조 코딩하기 파트5 - ASIDE 메뉴, 레티나 배경 지정하기  (0) 2019.12.27
PSD TO HTML 73 [ LookBook P3/8 ] 모바일 디자인 참조 코딩하기 파트3 - 검색창, 레티나 고해상도 기기 모바일 이미지, retina JS  (0) 2019.12.27
PSD TO HTML 72 [ LookBook P2/8 ] 모바일 디자인 참조 코딩하기 파트2 - 본문 헤더, 검색, 크로스 브라우징  (0) 2019.12.27
PSD TO HTML 71 [LookBook P1/8 ] 모바일 디자인 참조 코딩하기 파트1 - Aside, 본문 리스트, 모바일 메뉴 구조, 폰트어썸  (0) 2019.12.27

https://youtu.be/IxRRA-lXx1Q

javascript & jQuery 비교 구현하기

Sample Download https://drive.google.com/file/d/1R0PigzZWygkFUUfSQ3508ZSb4Dxxu-24/view?usp=sharing

 

에디터: visual studio code

티스토리 : http://alikerock.tistory.com/

후원하기 : https://toon.at/donate/ezwebpub

#javascript #jquery #css #animation

반응형

'Youtube 동영상 > javascript & jQuery' 카테고리의 다른 글

jQuery 82 javascript 27 [ Shrink Nav ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 축소 애니메이션  (0) 2019.12.27
jQuery 81 javascript 26 [ Advanced Sticky Header ] 순수 자바스크립트와 제이쿼리 비교 - 상단 고정 메뉴 구현하기  (0) 2019.12.27
Javascript 24 [ Slideshow ] 순수 자바스크립트 슬라이드 업그레이드하기 part 1, 좌우 컨트롤 구현하기  (0) 2019.11.26
jQuery 79 [ script efficiency ] 스크립트 성능, 효율성 높이기, 애니메이션은 css 또는 script ? 어느것이 좋을까?  (0) 2019.11.26
jQuery 78 [ Flex Slideshow ] 플렉스 기반의 슬라이드쇼 구현하기, display:flex  (0) 2019.11.20

https://youtu.be/4XhUOflla64

javascript & jquery 효율적으로 작성하기 1
https://codepen.io/alikerock/pen/BbqNaZ

javascript & jquery 효율적으로 작성하기 2
https://codepen.io/alikerock/pen/gEBazE


티스토리 : http://alikerock.tistory.com/
트위터: eztoweb

#jquery #css #animation

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

반응형

'Youtube 동영상 > javascript & jQuery' 카테고리의 다른 글

jQuery 80 javascript 25 [ Scroll Menu ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 구현하기  (0) 2019.12.27
Javascript 24 [ Slideshow ] 순수 자바스크립트 슬라이드 업그레이드하기 part 1, 좌우 컨트롤 구현하기  (0) 2019.11.26
jQuery 78 [ Flex Slideshow ] 플렉스 기반의 슬라이드쇼 구현하기, display:flex  (0) 2019.11.20
Javascript 23 [ Video Audio ] 자바스크립트, 제이쿼리 비디오 오디오 컨트롤하기  (0) 2019.11.20
jQuery 77 [ skrollr ] 패럴렉스 스크롤 구현하기, 스크롤러 라이브러리로 아주 쉽게 구현하기  (0) 2019.11.20

https://youtu.be/xX1RllzLLSU

 

Sample Link : https://codepen.io/alikerock/pen/ZEzVJdL

- CSS Position
- IE Polyfill

Positon: sticky 지원현황 보기
https://caniuse.com/#search=sticky

플렉스 레이아웃 보기: https://youtu.be/_PSy66fkQ7U
패키지 매니져 Yarn : https://youtu.be/7g21TUOkSLM
Position Sticky Pollyfill : https://github.com/wilddeer/stickyfill


#css #position #pollyfills


구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

반응형

'Youtube 동영상 > css3' 카테고리의 다른 글

네이버와 애플의 로고에 쓰인 IR 기법  (0) 2022.03.28
CSS3 - 87 [ Fixed Footer ] 콘텐츠 양이 짧아도 하단에 푸터 고정하기 2가지 방법, position 활용, Fixed 활용하기  (0) 2020.01.19
CSS3 - 85 [ CSS ANIMATION ] 공지 카드 애니메이션, card notification css animation  (0) 2019.10.27
CSS3 - 84 [ CSS ANIMATION ] 토글 슬라이드 버튼 애니메이션, form, flex, position, transition, css3 animation  (0) 2019.10.27
CSS3 - 83 [ CSS GRID #7] 그리드와 플렉스를 활용한 반응형 레이아웃 구현하기  (0) 2019.08.07

https://youtu.be/HJG2MuosALk

Sample Link : https://codepen.io/alikerock/pen/GBzzoX


- CSS Animation
- Cubic Bezier


#css #animation

홈페이지 : http://alikerock.tistory.com/

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

반응형

'Youtube 동영상 > css3' 카테고리의 다른 글

CSS3 - 87 [ Fixed Footer ] 콘텐츠 양이 짧아도 하단에 푸터 고정하기 2가지 방법, position 활용, Fixed 활용하기  (0) 2020.01.19
CSS3 - 86 [ position:sticky ] script 없이 순수 CSS로 스크롤을 할 때 요소를 고정하기  (0) 2019.11.20
CSS3 - 84 [ CSS ANIMATION ] 토글 슬라이드 버튼 애니메이션, form, flex, position, transition, css3 animation  (0) 2019.10.27
CSS3 - 83 [ CSS GRID #7] 그리드와 플렉스를 활용한 반응형 레이아웃 구현하기  (0) 2019.08.07
CSS3 - 77 [ CSS GRID #1] 비정형 레이아웃, 그리드에서 벗어나 자유롭게 레이아웃을 잡자! display:grid  (0) 2019.07.25

https://youtu.be/uYwKQYzRLc0

Sample Link : https://codepen.io/alikerock/pen/RBvEvx


- 토글 슬라이드 버튼 애니메이션, 
- checkbox form, 
- flex 레이아웃, 
- position 설정하기, 
- transition


#css #animation #checkbox


홈페이지 : http://alikerock.tistory.com/

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

반응형

'Youtube 동영상 > css3' 카테고리의 다른 글

CSS3 - 86 [ position:sticky ] script 없이 순수 CSS로 스크롤을 할 때 요소를 고정하기  (0) 2019.11.20
CSS3 - 85 [ CSS ANIMATION ] 공지 카드 애니메이션, card notification css animation  (0) 2019.10.27
CSS3 - 83 [ CSS GRID #7] 그리드와 플렉스를 활용한 반응형 레이아웃 구현하기  (0) 2019.08.07
CSS3 - 77 [ CSS GRID #1] 비정형 레이아웃, 그리드에서 벗어나 자유롭게 레이아웃을 잡자! display:grid  (0) 2019.07.25
CSS3 - 76 [ Responsive SVG Icon #2] SVG 아이콘 마우스 오버 애니메이션, 자바스크립트 클릭 이벤트 애니메이션  (0) 2019.06.25

https://youtu.be/6CmdWr27HXw

총 30여편의 연재로 구성될 영상입니다. 
포토샵을 기초로 html, css, script를 모두 작성하고 해당 버전을 워드프레쓰 테마로 개발하는 긴호흡의 영상입니다.


예제는 초반과  워드프레쓰 초반 두번만 제공합니다. 집중해서 시청바랍니다. ^^

download part 1
https://drive.google.com/file/d/1ZIlRwc7Zw0V5X8Pp8ae49CT0Vfj4ED9H/view?usp=sharing


PSD to html 
- 공통요소 스타일 먼저 설정하기


티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#psdtohtml #bootstrap

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

반응형

'Youtube 동영상 > psd to html & css' 카테고리의 다른 글

PSD TO HTML 52 [minimal portfolio] 포트폴리오 구현 파트 3 - index 첫페이지 HTML 구조 작성하기, 패턴, 부트스트랩  (0) 2019.10.02
PSD TO HTML 51 [minimal portfolio] 포트폴리오 구현 파트 2 - 폼 HTML, CSS 스타일 설정하기  (0) 2019.10.02
PSD TO HTML 49 [ SHOPY 상품목록 #4 ] 필터 - isotope filter, combination filters  (0) 2019.09.07
PSD TO HTML 48 [ SHOPY 상품목록 #3 ] 상품 목록 필터 jQuery 구현하기, 다중 sorting 구현  (0) 2019.09.07
PSD TO HTML 47 [ SHOPY 상품목록 #2 ] 상품 목록, filter, jqueryUI Slider, Checkbox CSS 스타일  (0) 2019.09.07

+ Recent posts

티스토리툴바