코딩웍스(Coding Works)
@codingworks
수강생
13,042
수강평
784
강의 평점
4.9
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704
강의
로드맵
전체 4수강평
- 중상급 퍼블리싱을 위한 CSS3의 모든 것
- SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
- 퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
- 모바일 웹 퍼블리싱 포트폴리오 with Figma
- HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
게시글
질문&답변
해당 강의 PDF는 어디에 있나요?
뷰티파이는 "이 확장은 더 이상 유지 관리되지 않으므로 더 이상 사용되지 않습니다." 나와도 사용은 문제 없습니다. 하지만 웹개발기능사 실기시험에서는 사용할 수 없으므로 시험준비하시는 분들은 안쓰셔야 합니다.수업관련 자료는 아래 섹션에서 받으시면 됩니다. 섹션 14. 수강생 다운로드 참고자료섹션 15. [코딩웍스] HTML+CSS+FLEX+JQUERY 핵심이론 PDF 교재 다운로드
- 1
- 2
- 19
질문&답변
강의 내용 관련 문의드립니다 (animation)
애니메이션을 이론으로 다루기에는 내용이 그리 많지 않아서 뺀 것 같습니다.애니메이션은 예제를 제작하면서 응용력을 키우는 것이 더 중요합니다.인프런 AI 인턴이 답한 곳의 MDN, W3Schools에서 이론을 공부하시면 됩니다.하지만 이런 곳은 실전예제가 없어서 그냥 이론으로만 끝나는 경우가 많습니다.코딩웍스 강의 중에 아래 2개 강의에 애니메이션 실전 예제들이 많습니다.HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
- 1
- 2
- 41
질문&답변
2026 웹디자인개발기능사 실기 보는데 필요한 텍스트에디터는 무엇인가요?
비주얼스튜디오코드 입니다. 블라켓 내용이 나오면 무시하시면 됩니다.이전까지는 엣지 브라우저에서도 체크했지만 2026년도부터 크롬브라우저에서만 체크합니다. Q-Net 공식사이트의 웹디자인 기능사 실기 활용 소프트웨어 안내https://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&brdId=Q006&code=1204&artlSeq=5199079
- 1
- 2
- 57
질문&답변
pointer-event:none;
문제를 해결하셨다니 다행입니다!!
- 1
- 1
- 46
질문&답변
실전 반응형 웹사이트 이미지 다운
아래에 있는 곳으로 가셔서 압축파일 받으시면 제작에 사용된 이미지와 텍스트가 준비되어 있습니다.소스폴더에 완성본 전체 캡쳐가 있으니까 이미지로 미리 보시면 됩니다.시간이 많이 지나서 현재 운영중인 넷플릭스와 구글 크롬다운로드 온라인 사이트는 참조하실 필요 없습니다.(사진)
- 1
- 2
- 48
질문&답변
Grid 수직정렬 제대로 안됩니다.
올리신 코드 복사해서 확인해 보니 수직 수평 중앙 잘 정렬됩니다.아마도 브라우저를 축소하거나 확대하거나 이런 문제인 듯 합니다.그리고 body에 margin: 0; 넣어주시면 미세하게 생기는 여백을 없애서 스크롤바도 생기지 않습니다.
- 1
- 1
- 58
질문&답변
87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)
코딩웍스입니다.아래 영상 2개가 서로 바뀌어 있었습니다.정말 죄송합니다.변경했습니다. 이제 정상적으로 알맞은 영상이 배치되었습니다.87. JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)92. JavaScript & jQuery - 사운드 재생 제어하기(3)
- 1
- 2
- 36
질문&답변
14. 네비게이션 - 반응형 상단 네비게이션 <toggle 이후 md 이상 에서 메뉴 사라짐 현상> 간단 대응
좋은 팁 감사합니다^^
- 1
- 2
- 52
질문&답변
class 값 한 번에 부여하는법
비주얼스튜디오코드에서 다중입력을 하시면 됩니다.다중입력은 alt를 누른 상태에서 입력할 곳을 클릭하시면 됩니다.
- 1
- 1
- 66
질문&답변
섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?
새롭게 추가된 d,e,f 유형의 레이아웃 제작은 따로 pdf는 없고 영상을 통해서 보실 수 있습니다.
- 1
- 2
- 65













