안녕하세요

float으로 responsive를 구현하는 방법을 배웠습니다. 처음 보는 속성이기 때문에 생소하여 어느 정도까지만 이해가 되고 그쳤습니다. 실제로 현장에서 많이 사용하지는 않는다고 합니다. 오래 된 사이트의 경우엔 float가 코드에 들어가 있을 테니 알아는 두라고... [220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ] .prettierignore를 사용하면 원하는 파일에 format save가 적용되지 않도록 할 수 있습니다. css를 작성할 때는 prettier의 format save를 적용해 실수 없이 편하게 작성하고 완성된 코드를 가로로 길게 쓰고 싶다면 .prettierignore에 *.css를 입력하여 저장합니다. 그리고 css-compact exten..

이번 코딩은 slide를 중점적으로 연습합니다. [220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ] 시안부터 디자인 하는 것은 어렵고 계속 바뀌기 때문에 대략적인 레이아웃과 아이디어만 구상한 뒤에 코딩을 하면서 간격이나 폰트를 맞추기로 했습니다. 러프한 레이아웃을 따라 러프한 코딩을 구현했습니다. git을 terminal로 이용하는 설명은 github에서 repository를 만들고 난 직후에 잘 정리되어 있습니다. …or create a new repository on the command line echo "# responsive_web" >> README.md git init git add README.md git commit -m "first commit" g..

이번에는 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 배경으로 동영상을 ..