span 태그에 여백이 들어간 것 같은데 왜 그런건가요?

inline-block은 말 그대로 inline 성질이 있기 때문에 폰트라고 인식합니다. 그래서 오른쪽이나 아래에 1~2픽셀 정도의 여백이 생깁니다. 그래서 완벽하게 해야 하는 경우 inline-block을 쓰지 않고 block으로 하고 가로배치는 float 또는 flex를 사용합니다.아래 인프런 AI가 말한 방법에서 음수마지 곧 네거티브 마진을 쓰는 방법도 있고 font-size: 0 이렇게 주는 방법도 있습니다. 하지만 정교하게 만들어야 할 때 또는 반응형을 위해 모바일에서 세로배치가 필요할 때 등 이런 경우를 대비해서 inline-block 보다는 block으로 만들어서 가로배치하세요.물론 요소가 1픽셀 단위로 정교하게 만들어야 하는 것이 아니라면 편하게 inline-block을 사용하셔도 됩니다. 그래서 지금 예제에서는 inline-block을 사용했을 겁니다.

자료실

수업 관련 자료는 아래 섹션에서 모두 받으실 수 있습니다.(사진)

해당 강의 PDF는 어디에 있나요?

뷰티파이는 "이 확장은 더 이상 유지 관리되지 않으므로 더 이상 사용되지 않습니다." 나와도 사용은 문제 없습니다. 하지만 웹개발기능사 실기시험에서는 사용할 수 없으므로 시험준비하시는 분들은 안쓰셔야 합니다.수업관련 자료는 아래 섹션에서 받으시면 됩니다. 섹션 14. 수강생 다운로드 참고자료섹션 15. [코딩웍스] HTML+CSS+FLEX+JQUERY 핵심이론 PDF 교재 다운로드

강의 내용 관련 문의드립니다 (animation)

애니메이션을 이론으로 다루기에는 내용이 그리 많지 않아서 뺀 것 같습니다.애니메이션은 예제를 제작하면서 응용력을 키우는 것이 더 중요합니다.인프런 AI 인턴이 답한 곳의 MDN, W3Schools에서 이론을 공부하시면 됩니다.하지만 이런 곳은 실전예제가 없어서 그냥 이론으로만 끝나는 경우가 많습니다.코딩웍스 강의 중에 아래 2개 강의에 애니메이션 실전 예제들이 많습니다.HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)

2026 웹디자인개발기능사 실기 보는데 필요한 텍스트에디터는 무엇인가요?

비주얼스튜디오코드 입니다. 블라켓 내용이 나오면 무시하시면 됩니다.이전까지는 엣지 브라우저에서도 체크했지만 2026년도부터 크롬브라우저에서만 체크합니다. Q-Net 공식사이트의 웹디자인 기능사 실기 활용 소프트웨어 안내https://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&brdId=Q006&code=1204&artlSeq=5199079

pointer-event:none;

문제를 해결하셨다니 다행입니다!!

실전 반응형 웹사이트 이미지 다운

아래에 있는 곳으로 가셔서 압축파일 받으시면 제작에 사용된 이미지와 텍스트가 준비되어 있습니다.소스폴더에 완성본 전체 캡쳐가 있으니까 이미지로 미리 보시면 됩니다.시간이 많이 지나서 현재 운영중인 넷플릭스와 구글 크롬다운로드 온라인 사이트는 참조하실 필요 없습니다.(사진)

Grid 수직정렬 제대로 안됩니다.

올리신 코드 복사해서 확인해 보니 수직 수평 중앙 잘 정렬됩니다.아마도 브라우저를 축소하거나 확대하거나 이런 문제인 듯 합니다.그리고 body에 margin: 0; 넣어주시면 미세하게 생기는 여백을 없애서 스크롤바도 생기지 않습니다.

87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)

코딩웍스입니다.아래 영상 2개가 서로 바뀌어 있었습니다.정말 죄송합니다.변경했습니다. 이제 정상적으로 알맞은 영상이 배치되었습니다.87. JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)92. JavaScript & jQuery - 사운드 재생 제어하기(3)

14. 네비게이션 - 반응형 상단 네비게이션 <toggle 이후 md 이상 에서 메뉴 사라짐 현상> 간단 대응

좋은 팁 감사합니다^^