웹 퍼블리싱부터 JavaScript·React 실무, AI 활용 개발까지 가르치는 프론트엔드 전문 강사입니다.
ESTSOFT KDT와 그린컴퓨터아카데미 등에서 비전공자와 입문자, 취업 준비생을 대상으로 교육해 왔습니다. 복잡한 개념을 작은 실습으로 나누고, 학습자가 직접 결과물을 완성하는 프로젝트 중심 수업을 지향합니다.
주요 교육 분야
HTML/CSS 웹 퍼블리싱
JavaScript 기초 및 웹 인터랙션
React 기반 프론트엔드 개발
Firebase를 활용한 웹 서비스 구현
Figma UI 설계 및 개발 연계
생성형 AI와 함께하는 웹개발
웹디자인기능사 실기
기업·기관 교육
기업 실무자 교육, KDT 과정, 대학·학원 특강을 진행합니다.
교육 대상과 사전 지식, 교육 시간, 목표 결과물에 맞춰 커리큘럼과 실습 프로젝트를 구성합니다. 오프라인 출강, 실시간 온라인 수업, 녹화형 교육 콘텐츠 제작이 모두 가능합니다.
온라인 교육 콘텐츠 제작
다음과 같은 온라인 교육 콘텐츠 제작 업무를 진행합니다.
강의 커리큘럼 및 학습 목표 설계
교안과 프레젠테이션 제작
단계별 실습 코드와 예제 프로젝트 구성
촬영용 강의 대본 작성
강의 촬영 및 콘텐츠 납품
주요 활동
ESTSOFT KDT 프론트엔드 강의
그린컴퓨터아카데미 웹퍼블리싱·프론트엔드 강의
웹 퍼블리싱 유튜브 채널 ‘ezweb’ 운영
웹퍼블리싱·웹디자인 분야 도서 집필
저서
2025.11 · 2026 SD에듀 유선배 웹디자인기능사 실기 과외노트 · 시대고시기획
2024.11 · 2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 · 시대고시기획
2023.10 · 2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 · 시대고시기획
2022.08 · 코딩을 처음이라 with 웹 퍼블리싱 · 영진출판사
2021.07 · 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 · 비제이퍼블릭
기업·기관 출강과 온라인 교육 콘텐츠 제작 문의를 받고 있습니다.
문의: ezwebpub@gmail.com
Courses
Reviews
- My First Time Coding: From CSS Basics to Responsive Web Design with Web Publishing
- Practical jQuery for Web Publishers — From the Basics to UI Interactions
rurupop
·
Building a Web Service with Generative AI – An All-in-One Project from Planning and Design to Coding and DeploymentBuilding a Web Service with Generative AI – An All-in-One Project from Planning and Design to Coding and Deployment- Building Websites with AI - Stitch · Figma Make · React Hands-On Project
- Building Websites with AI - Stitch · Figma Make · React Hands-On Project
Posts
Q&A
참조: https://creatie.ai/ 사이트가 바뀌었어요
플러그인 추천 감사합니다. ^^readdy.ai의 경우는 이제 프롬프트로 웹, 모바일용 디자인을 생성하는데 큰 도움이 됩니다. 생성한 디자인은 figma로 내보내기(유료기능)도 가능하시 참고하세요.
- Likes
- 1
- Comments
- 2
- Viewcount
- 1.2K
Q&A
nav 에 sign in 라인
아래 flower 부분은 화면 대비 50%를 사용하는 구간이고, 상단 메뉴 부분은 비율이 다르기 때문에 그렇습니다. 맞추려면 상단의 메뉴 구조를 각각 div등으로 양분하고 50%로 지정한 다음, 그 안에서 왼쪽 메뉴는 왼쪽으로 배치, 오른쪽 메뉴는 오른쪽으로 배치되도록 flex를 활용하여 적용하면 되겠습니다.
- Likes
- 1
- Comments
- 2
- Viewcount
- 113
Q&A
실무에서 탭스 구현 시 어떤 방법을 많이 사용하는지 궁금합니다.
질문 남겨주셔서 감사합니다. AI의 답변대로 상황따라 다르겠지만, react등 프레인워크를 사용하지 않는 상황이고 jQuery를 사용한다면 attribute방식을 추천합니다. 그래야 html상의 구조를 내부 링크방식으로 정석에 맞게 작성하게될겁니다. html 구조가 내부 링크방식으로 잘 작성되어 있다면. 어떤방식이든 크게 상관은 없습니다.
- Likes
- 0
- Comments
- 2
- Viewcount
- 157
Q&A
contact 부분을 filedset으로 만들어줘도 되나요 ?
fieldset는 여러 입력내용을들 묶어줄때 사용합니다. 보통 필수입력사항들 묶고, 옵션사항들 묶어줄 때 사용할 수 있겠습니다.
- Likes
- 0
- Comments
- 1
- Viewcount
- 537




