■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] 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
Courses
Reviews
- [2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide
- SCSS(SASS)+FLEX Practical Responsive Web Project with Figma
- SCSS(SASS)+GRID+FLEX Practical Portfolio Publishing
- SCSS(SASS)+FLEX Practical Responsive Web Project with Figma
- Grid Core Theory and Practical Application
Posts
Q&A
E-1 레이아웃 제작 중 궁금점
헤더의 높이 100픽셀을 빼고 브라우저 높이를 가득 채워야 하기 때문에 height: inherit로는 안될거에요.height: inherit란 부모요소의 높이를 받아오는 건데 .main-content > div의 높이가 100%일 경우 .main-content > div 밑에 div에 height: inherit를 적용하면 될거에요.그런데 이렇게 하면 중복해서 코드를 작성해야 하니 슬라이드 아이템에 height: calc(100vh - 100px); 이렇게 주는게 간편한거죠.
- 1
- 2
- 21
Q&A
뷰티파이 대체
Beautify 익스텐션이 업데이트를 안한다는거지 사용을 못하는건 아닙니다.저도 아직 Beautify를 사용하고 있습니다.블라켓은 사용하지 않으니 사용법을 익히지 않으셔도 됩니다.웹디자인 기능사 실기시험에서 익스텐션과 블라켓은 사용할 수 없으니 시험 관련해서는 2가지 모두 신경 쓰지 않으셔도 됩니다.
- 1
- 2
- 16
Q&A
브라우저 비율 확대시 header-inner,footer-inner 잘림 문제
브라우저 비율을 줄인 상태로 보면 정상적으로 보인다고 하신걸 보니이건 코드 문제가 아니라 모니터 해상도가 커서 그런것 같습니다.모니터 해상도가 아마 125%로 되어 있지 않나 합니다.모니터 해상도를 100%로 하시고 확인해보세요.
- 1
- 2
- 237
Q&A
A3 내비게이션이 슬라이드 이미지에 가려져 앞으로 오지 않습니다.
script src="js/jquery-1.12.4.js">script>script src="js/custom.js">script>위 코드를 head에 넣지 마시고 바로 위에 위치 시키세요.물론 head 사이에 넣어도 되지만 강의에 있는 것처럼 에 넣으시는게 시험 볼 때 혹시나 이런 문제가 생길 수 있으니 안전하게 작업하세요.그리고 $(document).ready(function(){..} 을 사용하지 않아도 됩니다.아래 코드를 $(document).ready(function(){..} 에 넣지 말고 밖으로 빼세요.(사진)
- 1
- 1
- 24
Q&A
반응형 레이아웃 문의 드려요.
네. 제가 알기로도 그렇게 이해하고 있습니다.질문자께서 알고 계신 내용이 맞다고 생각합니다.
- 1
- 2
- 29
Q&A
웹디자인기능사 슬라이드를 이미지로 처리해도 문제없나요?
공개문제에 슬라이드 이미지의 텍스트를 코딩으로 텍스트를 띄우라는 항목은 없습니다.항목에 없으니 감점도 없다고 생각합니다.포토샵에서 슬라이드 텍스트를 넣고 전체를 이미지로 사용하시면 될 것 같습니다.
- 1
- 2
- 30
Q&A
display:none 적용 안됨 문제
아래에 있는 속성이 .sub-menu 를 가르키는 것이되므로 불필요한 속성을 넣었으니 삭제하면 아래에 .sub-menu에 display: none 이 작동합니다..menu div {display: inline-block;}아래 코드에서 선택자에 점이 바졌습니다..menu li로 점을 추가하세요.$('menu li').mouseenter(function(){$('.sub-menu').stop().fadeIn()})$('menu li').mouseleave(function(){$('.sub-menu').stop().fadeOut()})
- 1
- 2
- 725
Q&A
Part 1 영상 안나옵니다
아래 2가지 영상이 어떤 문제인지 모르지만 안나왔어요.그래서 다시 업로드하고 영상 재생되는거 확인했습니다.제보해 주셔서 감사합니다.[완성본 미리보기] HTML+CSS 실전 퍼블리싱 제작(Part 1)[완성본 제작노트] HTML+CSS 실전 퍼블리싱 제작(Part 1)
- 1
- 1
- 33
Q&A
E유형 slide 높이 질문
아래 코드에서 높이를 많이 잡아서 그렇습니다..shortcut { height: 150px; } .news { height: 300px; } .gallery { height: 300px; } .banner { height: 150px; }나중에 컨텐츠 넣으면서 높이가 줄어들면 슬라이드에 공백이 없어집니다.컨텐츠 넣기 전에 공백 없어지는 부분을 확인하기 위해서 지금 높이를 줄여보세요..shortcut { height: 150px; } .news { height: 200px; } .gallery { height: 200px; } .banner { height: 150px; }(사진)
- 1
- 2
- 628
Q&A
목소리 좀 키워주세요.
시즌2 강의가 전체적으로 볼륨이 낮게 제작되었네요.영상 모두 볼륨업 해서 다시 올리려고 합니다.영상이 워낙 많아서 시간은 며칠 걸릴 것 같습니다.해당 강의에 필요한 조언 감사합니다.
- 1
- 2
- 33