안녕하세요

메모를 실수로 날려버렸습니다... 내일 학원에서 파일을 다시 보며 기억을 살려 메모를 해보도록 합니다. 주얼리 주제와 마우스 이벤트를 넣는 것이 목표였지만 어느 쪽도 쉽지 않습니다. [ 주얼리 웹코딩 ] [ html / css / js ] align-self 를 이용하면 width: 100%;처럼 박스 내에서 커지도록 할 수 있습니다. align-self: stretch; 박스 두개를 float:left; wirdth:50%를 적용하면 각각 50%씩 자리를 차지하여 display: flex; flex: 1; 같은 배치가 됩니다. .Business .inner > div { float: left; width: 50%; padding: 0 15px; }

반응형으로 변환하기 위해 slick 슬라이드의 설정을 변경해주는 것에 어려운 점이 많았습니다. [220720 웹코딩(게임)] [ html / css / js ] slick 슬라이드 두 개를 연동하고, 표시되는 화면을 변환하는 버튼을 구현했습니다. var num = 0; $(".slider").on("afterChange", function (e, s, c) { num = c; }); $(".infoSlideBtn .prev").on("click", function () { $(".titleSlider").slick("slickPrev"); $(".description") .children() .eq((num - 1) % 4) .addClass("on") .siblings() .removeClass("on..

이번 주와 다음 주는 자유주제입니다. 호텔, 여행을 주제로 하려고 준비했으나 영 느낌이 안와서 색다른 주제를 해보고자 게임으로 정했습니다. [220720 웹코딩(게임)] [ html / css / js ] 슬릭 센터모드를 이용하여 현재 슬라이드를 화면 한 가운데로 위치하면서, 양 옆으로는 이전과 다음 슬라이드의 절반만큼은 보이도록 하는 방법입니다. $(".titleSlider").slick({ slidesToShow: 1, centerMode: true, centerPadding: "25%", }); centerMode와 centerPadding을 통해서 슬라이드 간의 간격을 조절합니다. 현재 슬라이드를 가운데로 위치하기 위해서는 .titleSlider img { width: 400px; margin: ..

스틱키를 활용하여 제품을 소개하는 화면을 구현했습니다. 쌤이 설명하는 박스의 간격이 많이 넓다고 하셨습니다. 다음 부터는 이런 빈 공간 간격을 좀 더 유저입장에서 생각해 봐야겠습니다. [220712의류웹코딩] [ html / css / js ] footer의 제목 격이 되는 헤드 부분은 p가 아니라 h태그에 넣고, 내용물은 dl dt 태그를 활용합니다. 지금까지는 ul과 li 만을 이용했는데 dl dt 다음부터는 사용해 봐야겠습니다. 슬라이드를 만들때는 autoplay가 되면 화살표를 빼고, autoplay가 안되면 화살표를 넣습니다.