html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.
Figma 디자인 해석과 이미지 추출하기
HTML/CSS 파일 초기 세팅하기
CSS 변수 및 글로벌 스타일 작성하기
웹폰트 사용 설정하기
레이아웃 설계: Grid와 Flexbox 활용하기
미디어쿼리 활용 반응형 CSS 구현하기
컨테이너 쿼리 활용 반응형 CSS 구현하기
Swiper.js를 활용한 리뷰 슬라이드 제작하기
jQuery활용 모바일 메뉴, 장바구니 토글 슬라이드 제작하기
GitHub Pages 활용 웹사이트 배포하기
학습 대상은
누구일까요?
HTML, CSS, jQuery에 대한 기초 지식이 있는 학습자.
퍼블리싱 작업 경험이 부족하지만, 실제 프로젝트를 완성해보고 싶은 초급 개발자.
디자인 툴(Figma) 활용 경험은 없으나 배우고 싶은 사람.
반응형 웹 구현과 퍼블리싱의 실무 프로세스를 배우고자 하는 학습자.
웹 퍼블리싱과 프론트엔드 개발의 기본 원리를 익히고 싶은 사람.
코딩 기초는 있지만 종합적으로 적용이 힘드신 분
선수 지식,
필요할까요?
html
css
javascript
jquery
2,264
명
수강생
36
개
수강평
1
개
답변
4.9
점
강의 평점
6
개
강의
■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭
2022.08.25 출간 / 코딩을 처음이라 with 웹 퍼블리싱 / 영진출판사
2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획
2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획
[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사
전체
21개 ∙ (8시간 39분)
해당 강의에서 제공:
디자인 참조 코딩하기 순서
09:53
디자인에서 웹용 이미지 추출하기
22:45
링크 호버 애니메이션, 폼 스타일
33:26
레이아웃용 HTML 구조 및 CSS
15:32
Header 파트 html, css
14:07
HERO 파트 HTML
21:32
HERO 파트 CSS
23:56
Service 파트 HTML, CSS
11:47
Footer 파트 HTML, CSS
20:58
PC ~ 태블릿 구간 반응형
27:10
태블릿 구간 CSS
29:18
태블릿 구간 모바일 메뉴 인터렉션
23:01
모바일 구간 반응형
29:19
₩55,000