안녕하세요

이번에는 Mcdonalds를 코딩해봅니다. 메인화면에 video를 넣을텐데, slick slide로 여러 비디오를 넣습니다. [220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ] main에 header 높이만큼을 제외하고 video를 배경으로 주는 방법입니다. .bgVideo { height: calc(100vh - 140px); } slick에서 현재 슬라이드의 index는 c 입니다. $(".slider").on("afterChange", function (e, s, c) { if (c == 0) { $("#bgVideo01").YTPPlay(); $("#bgVideo02").YTPPause(); } else { $("#bgVideo01").YTPPause(); $..

전체 페이지를 구현하는데 slick에서 문제가 많이 생겼습니다. 화면 크기가 변하더라도 어느 정도 선에서 비슷하게 보이도록 구현하는데 완전 실패했습니다. 가운데로 이동한 슬라이드의 크기를 transform으로 크게 만들면 다음 슬라이드로 넘어갈 때 transition이 적용 안됩니다. 이를 해결하는 방법이 있는데, @keyframes나 js로 다음 슬라이드로 넘어가기 전에 일부러 크기를 원래대로 되돌리는 방법입니다. 하지만 이를 적용시키면 scale 된 객체에 화질저하가 발생합니다. 수를 쓴다면 "어느 정도" 개선은 가능하지만 근본적인 해결은 어려울 것 같습니다. [220628 직접 시안을 짜고 시안에 따라 코딩해보기] [ 220628 직접시안 html / css / js ] main 배경으로 동영상을 ..

slick 슬라이드가 생각보다 어렵습니다. 원하는 형태로 만들어지지 않아 계속 같은 자리를 맴돌았습니다. 가끔씩 이렇게 안 될 때도 있는 법이지만, 여간 실마리가 보이질 않네요. 멋진 디자인을 보다보면 비교되는 것 같고 많이 아쉽습니다. 차차 좋아지겠죠. [220628 직접 시안을 짜고 시안에 따라 코딩해보기] [ 220628 직접시안 html / css / js ]

이번 주에는 수요일까지 수업이 있습니다. 직접 웹디자인 시안을 짜고 코딩으로 똑같이 구현하는 것을 목표로 합니다. 디자인이 어려워서 폰트와 레이아웃의 간격에 집중하여 시안을 짜고 있습니다. 배운 내용 중에서 다단메뉴, 슬라이드, 동영상 삽입을 컨텐츠로 넣자는 생각으로 진행하고 있습니다. 구현에는 어려움이 없기 때문에 최대한 클린한 코딩, 올바른 tag를 사용하는 코딩을 목표로 합니다. [220627 직접 시안을 짜고 시안에 따라 코딩해보기] [ 220627 직접시안 html / css / js ]