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)의 기초는 있지만 종합적으로 적용하기에 막막하다면 본 강의를 확인해보세요. 

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

많은 관심부탁드립니다. 

 

 

 

반응형

안녕하세요.

웹페이지 구현에서 html, css 다음으로 중요한 javascript!

javascript를 학습하면 웹퍼블리싱 기본기를 마스터 할 수 있습니다. 

이후 jquery, react, typscript등으로 발전할 수 있는 첫단계인 javascript를 이해하기 쉽게 온라인 강의를 오픈했습니다. 

부담없이 학습해보세요.

감사합니다. 

웹프로그래밍의 꽃! 자바스크립트 기초

 

https://inf.run/mYma8

 

웹프로그래밍의 꽃! 자바스크립트 기초 강의 | 이지웹 - 인프런

이지웹 | javascript를 통해 HTML의 요소를 선택하고 다양한 이벤트에 따라 요소의 스타일을 변경하거나 애니메이션 효과를 구현합니다. javascript의 기분문법에서 스타일 변경, 이벤트 설정 및 웹페

www.inflearn.com

 

반응형

'Web Publishing > HTML&CSS' 카테고리의 다른 글

모바일 기기 감지하는 4가지 방법  (0) 2019.06.25
flex(플렉스) layout을 이용한 푸터 하단 고정 배치하기  (0) 2019.06.24
다음 daum Map API 활용하기  (0) 2019.04.29
네이버 맵 API 사용하기  (0) 2019.04.29

https://youtu.be/fAy0QRcFCWk

 

이 영상에서는 **JavaScript**를 사용하여 **고급 아코디언** 컴포넌트를 만드는 방법을 소개합니다. HTML과 CSS 구조 확인부터 시작하여 아코디언의 **변수 설정**, **열기 및 닫기** 기능 구현까지 자세히 설명합니다.

 

**AI**보다 더 나은 코드 작성과 **chatGPT**보다 더 간결한 코드 작성 방법에 대해 다룹니다. **Accordion** 구현을 통해 **JavaScript**의 고급 기능을 배우고 싶다면 꼭 시청해 보세요!

반응형

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

Hangman React 프로젝트 생성 가이드: 유튜브 영상과 함께하는 튜토리얼  (1) 2024.11.18
javascript Typing Effect - 자바스크립트 타이핑 효과 구현하기  (1) 2024.09.10
custom cursor - 나만의 커서 만들기 - javascript + CSS  (0) 2024.08.28
무한슬라이드 - javascript animate 함수 활용, easing 추가  (0) 2024.02.24
구글 달력 API 활용 javascript 달력 구현하기  (0) 2024.02.16

https://youtu.be/fIUxbj1f7SE

 

fullcalendar 설치하기

구글 달력 API 신청 및 설정하기

fullcalendar와 구글 달력 API 연동하기를 학습할 수 있습니다.

반응형

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

custom cursor - 나만의 커서 만들기 - javascript + CSS  (0) 2024.08.28
무한슬라이드 - javascript animate 함수 활용, easing 추가  (0) 2024.02.24
Javascript 42 [Full-screen javascript slide] 풀스크린 슬라이드 구현하기 1편 - CSS로만 슬라이드 구현하기  (0) 2024.02.16
Javascript 41 [드롭다운 서브메뉴] 순수 자바스크립트 3단계 업그레이드  (0) 2024.02.15
Javascript 40 [Gantt chart ] 순수 자바스크립트 반응형 일정표. css 변수, filter, foreach  (0) 2024.02.15
그린컴퓨터아트학원 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/1O13X68nrSs

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

 

[ 모바일 기기 감지하기 ]

- 디바이스 픽셀 레티오

- 모더나이저 활용

- UserAgent 활용

 

에디터: codepen

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

#javascript #mobile #modernizr

완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/

반응형

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

Javascript 34 [ essentials #1 ] 자바스크립트 핵심 리뷰 #1 - 반복문, Loop, Repetitive Statement  (0) 2024.02.11
Javascript 33 [ Mobile Device Detect #2 ] 모바일 감지하여 pc에서는 핸드폰 목업에, 모바일에선 원래 모습대로 나오록 하자.  (0) 2020.04.07
jQuery 93 [ 별점 표시하기 ] jQuery로 별점 표시, 점수주기, star rating  (0) 2020.02.12
jQuery 92 [ jQuery UI widget ] 제이쿼리UI 활용 폼 진행률 표시하기 part 3/3 - 진행률 퍼센트 구현하기  (0) 2020.01.19
jQuery 91 [ jQuery UI widget ] 제이쿼리UI 활용 폼 진행률 표시하기 part 2/3 - 스피너, 달력, 버튼 위젯 활용하기  (0) 2020.01.19

https://youtu.be/80HSha5owkY

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

 

- 리스트뷰 카드뷰 전환하기 css, script

- History back 뒤로가기

반응형

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

PSD TO HTML 79 [ Expire 1 ] bootstrap4 + flex 기반 PSD 참고 웹사이트 코딩하기 약 20편 중 1편 - HTML 구조작성하기  (0) 2020.01.19
PSD TO HTML 77 [ LookBook P7/8 ] 모바일 디자인 참조 코딩하기 파트7 - 리스트 페이지 상단, 리스트뷰 카드뷰 토글 버튼  (0) 2019.12.27
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 74 [ LookBook P4/8 ] 모바일 디자인 참조 코딩하기 파트4 - 찜하기 하트 버튼, 반응형 CSS, responsive  (0) 2019.12.27

https://youtu.be/aIq26CBdiaM

javascript & jquery 둘다 구현하기

 

샘플 다운로드 https://codepen.io/alikerock/pen/KKKYVEM

반응형

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

Javascript 30 [ aJax ] 비동기식 웹 어플리케이션 개발하기 기초 - Asynchronous JavaScript and XML, 에이잭스  (0) 2020.01.19
Javascript 29 [ Slideshow ] 순수 자바스크립트 멀티 슬라이드, 하나씩 이동하는 슬라이드 구현하기  (0) 2019.12.27
jQuery 82 javascript 27 [ Shrink Nav ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 축소 애니메이션  (0) 2019.12.27
jQuery 81 javascript 26 [ Advanced Sticky Header ] 순수 자바스크립트와 제이쿼리 비교 - 상단 고정 메뉴 구현하기  (0) 2019.12.27
jQuery 80 javascript 25 [ Scroll Menu ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 구현하기  (0) 2019.12.27

https://youtu.be/4WN5-75fN68

스크롤에 따른 메뉴 축소 애니메이션

javascript & jquery 비교 구현하기

 

Sample Download

https://drive.google.com/file/d/1D4KbqyAOdZBlWP8tYBd279aKTei5UIdj/view?usp=sharing

 

반응형

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

Javascript 29 [ Slideshow ] 순수 자바스크립트 멀티 슬라이드, 하나씩 이동하는 슬라이드 구현하기  (0) 2019.12.27
jQuery 83 javascript 29 [ Moving Tab Menu ] 순수 자바스크립트와 제이쿼리로 탭 메뉴 구현하기, 움직이는 탭 메뉴 구현  (0) 2019.12.27
jQuery 81 javascript 26 [ Advanced Sticky Header ] 순수 자바스크립트와 제이쿼리 비교 - 상단 고정 메뉴 구현하기  (0) 2019.12.27
jQuery 80 javascript 25 [ Scroll Menu ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 구현하기  (0) 2019.12.27
Javascript 24 [ Slideshow ] 순수 자바스크립트 슬라이드 업그레이드하기 part 1, 좌우 컨트롤 구현하기  (0) 2019.11.26

https://youtu.be/aJoilwaKR1M

javascript & jquery 비교 구현하기

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

에디터: visual studio code

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

트위터: eztoweb

 

#javascript #jquery #animation

반응형

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

jQuery 83 javascript 29 [ Moving Tab Menu ] 순수 자바스크립트와 제이쿼리로 탭 메뉴 구현하기, 움직이는 탭 메뉴 구현  (0) 2019.12.27
jQuery 82 javascript 27 [ Shrink Nav ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 축소 애니메이션  (0) 2019.12.27
jQuery 80 javascript 25 [ Scroll Menu ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 구현하기  (0) 2019.12.27
Javascript 24 [ Slideshow ] 순수 자바스크립트 슬라이드 업그레이드하기 part 1, 좌우 컨트롤 구현하기  (0) 2019.11.26
jQuery 79 [ script efficiency ] 스크립트 성능, 효율성 높이기, 애니메이션은 css 또는 script ? 어느것이 좋을까?  (0) 2019.11.26

+ Recent posts

티스토리툴바