
코딩은 처음이라 with 웹 퍼블리싱 - CSS
이지웹
CSS 기초부터 애니메이션, 반응형까지 학습합니다. 실전 예제를 통해 학습한 내용을 복습하면서 확실하게 기본기를 다집니다.
입문
HTML/CSS
퍼블리셔를 위한 React 첫걸음! 기초 문법부터 반응형 쇼핑몰 웹사이트 제작·배포까지 한 번에 학습합니다. 단편적인 리엑트 예제의 종합이 아니라 실제 웹페이지 제작에 필요한 핵심 문법을 학습하고 적용합니다.





카카오엔터테인먼트
에 관심있는 사람들도 듣는 중!



카카오엔터테인먼트
에 관심있는 사람들도 듣는 중!
React 핵심 개념(컴포넌트, Props, State, 이벤트)의 확실한 이해
카드 리스트 중심의 쇼핑몰 웹사이트 완성
JSON API 데이터 연동 경험 및 Context API 기초 습득
완성 프로젝트를 Vercel에 배포하여 실제 서비스 URL 확보
카테고리, 브랜드, 가격대 필터링
페이지네이션
구독 & 좋아요 & 댓글 이벤트
간단한 미션 완료하고 50% 할인 쿠폰을 즉시 받아보세요. 한정 기간 제공되는 역대급 혜택, 지금 바로 잡으세요!
이벤트 참여하기 : https://forms.gle/wcD2wRVeaG7B7fSj7
퍼블리셔 친화적 설명: 기존 HTML·CSS 사고방식에서 자연스럽게 React 개념 연결
실전 프로젝트 위주: 쇼핑몰 UI를 직접 만들며 React를 체득
포트폴리오 완성: 취업용으로 바로 활용할 수 있는 결과물 제공
쇼핑몰 디자인 예시
React를 배우는 이유와 학습 준비 환경을 이해한다.
퍼블리셔 관점에서 React가 필요한 이유를 명확히 짚는다.
핵심 내용
React 학습 목적, 개발 도구 준비, 퍼블리셔 → 프론트엔드 전환 관점
React 개발을 위한 핵심 문법과 개념을 학습한다.
컴포넌트 기반 사고방식에 익숙해지는 것을 목표로 한다.
핵심 내용
Vite + React 환경 설정, JSX 문법, 컴포넌트 구조, Props, State, 이벤트 처리
퍼블리셔가 실무에서 자주 사용하는 렌더링 패턴을 중심으로 학습한다.
HTML/CSS 경험을 React에 자연스럽게 연결한다.
핵심 내용
조건부 렌더링, 리스트 렌더링(map), key 개념, CSS 적용 방식(CSS Module 등)
React 기본기를 실제 UI 구현에 적용한다.
쇼핑몰 구조를 통해 실무 흐름을 경험한다.
핵심 내용
Header/GNB 구성, 상품 카드 리스트, 장바구니 버튼, 카테고리 필터링, 반응형 UI
Vercel을 이용한 배포 경험
완성된 프로젝트를 기준으로 학습 내용을 정리한다.
이후 프론트엔드 학습 방향을 제시한다.
핵심 내용
프로젝트 리뷰, 코드 정리 포인트, 프론트엔드 확장 로드맵 안내
카드 리스트 중심 쇼핑몰 웹사이트
반응형 대응 (PC / Mobile)
장바구니 버튼, 카테고리 필터 기능 구현
API 연동으로 실제 데이터 불러오기
배포 완료된 포트폴리오 프로젝트
최종 배포폰 미리보기 : https://ez-shop-three.vercel.app/
HTML / CSS / JavaScript 기초
Node.js & VS Code 설치
GitHub 계정 (배포용)
단순히 react 문법만 학습하는 것이 아니라, 실제 프로젝트 처럼 웹사이트의 메인 페이지를 모두 구현합니다. 프로젝트를 구현하면서, 디자인을 참조하여 프로젝트 구현에 필요한 HTML 구조를 작성하는 노하우, 디자인과 일치하도록 CSS를 작성하는 스타일 노하우, 기능에 따라 script를 작성하는 노하우를 학습하는 순서로 진행합니다.
디자인 참조하여 프로젝트를 구현합니다.
react를 활용하여 프로젝트를 생성하고, html, css, react(javascript)를 활용하여 프로젝트를 구현합니다.
vs-code 개발
React 기초파트에서 학습한 내용을 바탕으로 상품 정보를 조회하고, 리스트 렌더링(map)을 통해 상품을 출력합니다. 출력된 상품 목록에서 조건에 따라 filtering, sorting을 구현합니다.
filtering, sorting
출력된 상품 목록에서 조건에 따라 지정된 상품을 출력하고 버튼을 클릭하면 해당 페이지의 상품을 출력합니다.
pagination
미디어쿼리를 활용하여 다양한 디바이스 기기에 맞춰 상품의 출력 개수를 조절합니다.
responsive
A. 기본적인 문법(if, for, 함수, 배열, 객체)에 대한 이해는 필요합니다.
다만 고급 문법이나 알고리즘 수준은 요구되지 않으며, React 학습에 꼭 필요한 JavaScript 개념 위주로 설명드릴 예정입니다.
아래의 강의에서 기초를 학습해주세요.
네, 충분히 도움이 됩니다.
본 강의는 HTML/CSS 중심의 퍼블리셔 관점에서 React를 이해하도록 설계되어 있어, 프론트엔드 개발자로 확장하시기에 좋은 출발점이 됩니다.
아무 문제없습니다.
Class 컴포넌트는 다루지 않으며, 함수형 컴포넌트와 useState, useEffect 등 필수 Hook을 단계적으로 설명드릴 예정입니다.
디자인을 제공하기 때문에 준비할 소스는 없습니다.
강의에서 제공되는 예제와 구조를 바탕으로 진행되며, UI 구현과 React 문법 이해에 집중하실 수 있도록 구성되어 있습니다.
네, 활용 가능합니다.
쇼핑몰 미니 프로젝트는 컴포넌트 분리, 상태 관리, 배포 과정까지 포함되어 있어 포트폴리오용 예제로 사용하시기에 적합합니다.
네, 다룹니다.
Vercel을 활용하여 React 프로젝트를 배포하는 과정까지 안내드리며, 실제 서비스 배포 흐름을 경험하실 수 있습니다.
Next.js, TypeScript, 상태 관리 라이브러리(Zustand, Redux), API 연동 순으로 학습하시는 것을 권장드립니다.
강의 마지막 파트에서 프론트엔드 학습 로드맵도 함께 안내드릴 예정입니다.
학습 대상은
누구일까요?
HTML/CSS/JS까지는 배웠지만 React가 낯선 퍼블리셔
포트폴리오에 React 기반 프로젝트를 추가하고 싶은 분
프론트엔드로 커리어 확장을 준비하는 웹 디자이너/웹 퍼블리셔
선수 지식,
필요할까요?
HTML / CSS / JavaScript 기초
Node.js & VS Code 설치
GitHub 계정 (배포용)
커리어인증
2,925
명
수강생
72
개
수강평
4
개
답변
4.9
점
강의 평점
14
개
강의
■ [현재] ESTSOFT KDT 프론트엔드 강의
■ 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭
2022.08.25 출간 / 코딩을 처음이라 with 웹 퍼블리싱 / 영진출판사
2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획
2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획
2025.11 재판 /2026 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획
[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사
전체
33개 ∙ (9시간 28분)
해당 강의에서 제공: