목록전체 글 (529)
안녕하세요
7월22일46일차 - js로 시계 구현
date 내장함수를 이용해 현재 시간을 출력할 수 있습니다. toLocaleString() 함수는 위치한 지역의 시간대로 출력합니다. date함수를 이용해서 시계를 만듭니다. transition을 적용하면 59초에서 0초로 바뀔 때 시계 바늘의 각도가 356deg > 0deg 로 변하기 때문에 시계 바늘이 반대로 회전하게 됩니다. 각도를 초기화하지 않고 쌓아주도록 합니다. const week = ["일", "월", "화", "수", "목", "금", "토"]; let h = new Date().getHours(); let hDeg = h * (360 / 12); let m = new Date().getMinutes(); let mDeg = m * (360 / 60); let s = new Date().g..
// 화살표함수에 중괄호{}를 쓰려면 {} 안에 return을 넣어주어야 합니다. const A = DATA.map((data) => { return `${data.content}`; }); 화살표함수의 장점은 한 줄로 표기가 가능하다는 것입니다. 가급적이면 가독성이 높은 방향으로 표현합니다. const RESULT = DATA.map((data) => `${data.content}`); console.log(RESULT); html에 출력을 하려면 선택된 객체의 .innerHTML 을 수정하면 됩니다. html에서는 ","가 같이 나타나기 때문에 join 함수로 없애줍니다. const RESULT = DATA.map((data) => `${data.content}`).join(""); console.l..
iframe으로 가져온 youtube 비디오 멈추기(재생, 일시정지)
youtube 소스 코드 복사를 통해서 iframe 코드를 가져옵니다. 아래는 복사한 코드의 예시입니다. src의 끝부분에 [?enablejsapi=1&version=3&playerapiid=ytplayer] 를 붙여넣습니다. src="https://www.youtube.com/embed/WVZTsTXO3Nk?enablejsapi=1&version=3&playerapiid=ytplayer" 이벤트를 정해주기 위해서는 아래의 빨간 글씨 부분에 stopVideo, playVideo, pauseVideo 중 필요한 기능을 골라 넣으면 됩니다. $("iframe")[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","arg..
7월20일44일차 - 웹코딩1(게임), 배열로 탭메뉴 만들기, slick centerMode
이번 주와 다음 주는 자유주제입니다. 호텔, 여행을 주제로 하려고 준비했으나 영 느낌이 안와서 색다른 주제를 해보고자 게임으로 정했습니다. [220720 웹코딩(게임)] [ html / css / js ] 슬릭 센터모드를 이용하여 현재 슬라이드를 화면 한 가운데로 위치하면서, 양 옆으로는 이전과 다음 슬라이드의 절반만큼은 보이도록 하는 방법입니다. $(".titleSlider").slick({ slidesToShow: 1, centerMode: true, centerPadding: "25%", }); centerMode와 centerPadding을 통해서 슬라이드 간의 간격을 조절합니다. 현재 슬라이드를 가운데로 위치하기 위해서는 .titleSlider img { width: 400px; margin: ..