inline-block은 말 그대로 inline 성질이 있기 때문에 폰트라고 인식합니다. 그래서 오른쪽이나 아래에 1~2픽셀 정도의 여백이 생깁니다. 그래서 완벽하게 해야 하는 경우 inline-block을 쓰지 않고 block으로 하고 가로배치는 float 또는 flex를 사용합니다. 아래 인프런 AI가 말한 방법에서 음수마지 곧 네거티브 마진을 쓰는 방법도 있고 font-size: 0 이렇게 주는 방법도 있습니다. 하지만 정교하게 만들어야 할 때 또는 반응형을 위해 모바일에서 세로배치가 필요할 때 등 이런 경우를 대비해서 inline-block 보다는 block으로 만들어서 가로배치하세요. 물론 요소가 1픽셀 단위로 정교하게 만들어야 하는 것이 아니라면 편하게 inline-block을 사용하셔도 됩니다. 그래서 지금 예제에서는 inline-block을 사용했을 겁니다.
뷰티파이는 "이 확장은 더 이상 유지 관리되지 않으므로 더 이상 사용되지 않습니다." 나와도 사용은 문제 없습니다. 하지만 웹개발기능사 실기시험에서는 사용할 수 없으므로 시험준비하시는 분들은 안쓰셔야 합니다. 수업관련 자료는 아래 섹션에서 받으시면 됩니다. 섹션 14. 수강생 다운로드 참고자료 섹션 15. [코딩웍스] HTML+CSS+FLEX+JQUERY 핵심이론 PDF 교재 다운로드
애니메이션을 이론으로 다루기에는 내용이 그리 많지 않아서 뺀 것 같습니다. 애니메이션은 예제를 제작하면서 응용력을 키우는 것이 더 중요합니다. 인프런 AI 인턴이 답한 곳의 MDN, W3Schools에서 이론을 공부하시면 됩니다. 하지만 이런 곳은 실전예제가 없어서 그냥 이론으로만 끝나는 경우가 많습니다. 코딩웍스 강의 중에 아래 2개 강의에 애니메이션 실전 예제들이 많습니다. HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
코딩웍스입니다. 아래 영상 2개가 서로 바뀌어 있었습니다. 정말 죄송합니다. 변경했습니다. 이제 정상적으로 알맞은 영상이 배치되었습니다. 87. JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3) 92. JavaScript & jQuery - 사운드 재생 제어하기(3)