잿꽃's posting Garden

버튼 클릭하면 물결처럼 원이 나타나는 효과를 만들어 보았다. 이런 기능 진짜 해보고 싶었는데 마침 유튜브의 '맛있는코딩'님의 영상에 이런 내용이... 정말 취향저격 영상밖에 없다... 맛있는 코딩 yummy coding - YouTube 맛있는 코딩 yummy coding HTML5, css, Javascript와 React.js기반의 다양하고 재미있는 프로젝트들을 연구하는 개발자입니다. 많은 분들께 영감을 주기 위해 노력하겠습니다. www.youtube.com 원래 영상들 보면 배속해서 보는데 영상이 빨라서 정지 버튼 누르면서 보는 게 함정... 영상 보고 따라 만들어 봤는데 모르는 부분이 꽤 많았다. 사실 마우스에 대한 효과를 주는 것들을 배우지 않아서 대강 마우스의 x, y 값을 읽어와야 한다는 것..

임의의 연도를 입력하면 해당하는 년도의 1월 1일의 요일을 구해보자. 이걸 왜 하게 되었냐면 고용노동부에서 학원을 평가하러 왔기 때문이다. 분명 문제를 잘 푼 거 같았는데 몇 가지 연도만 제대로 나오고 나머지는 제대로 나오지 않았다. 시험지에는 {365*4 + (해당년도-1)/4 - (해당 연도-1)/100 + (해당 연도-1)/400} % 7의 값으로 구할 수 있다고 했는데 윤달이 분명 있을 건데 365*4를 한다는 게 말이 안 된다고 생각해서 시험 끝나고(저 공식이 잘못되었기 때문에 제대로 값이 나오는 게 더 이상하다.) 내 코드에 문제가 있나 하고 고민하다가 진짜 요일을 구하는 공식을 찾아봤다. 어쩐지 console.log를 찍어봤는데 무슨 날짜가 소수점으로 나오던데 말이 안 되지.... 네이버에 ..

자바스크립트 또는 제이쿼리를 이용하여 간단한 좌우 슬라이드를 만드는 두가지 방법에 대해 작성한다. 1. 자바스크립트로 좌우 슬라이드 만들기 See the Pen js slide left-right by ssoa1111 (@ssoa1111) on CodePen. 처음에 이렇게 작성했는데 안되었음. slideImg.style.marginLeft -= slideImgWidth[num].offsetWidth + 'px'; 이 부분에서 slideImgWidth[num].offsetWidth가 number속성이고 'px'가 string속성이어서 더하기가 제대로 먹히지 않는게 문제... offsetWidth를 변수에 담아 숫자 계산을 마친 뒤 그 후에 'px'을 붙이는 걸로 해결 slideImg.style.margi..

자바스크립트 또는 제이쿼리를 이용하여 fade-in효과가 있는 간단한 슬라이드를 만드는 두가지 방법에 대해 작성한다. 1. 자바스크립트로 슬라이드 fade-in 효과 만들기 단순히 제이쿼리로 만들었을 때와 동일하게 보이기 위해서 닷 메뉴와 화살표 아이콘이 없다. CSS @keyframes를 통해 fade-in 효과를 만들었다. See the Pen Untitled by ssoa1111 (@ssoa1111) on CodePen. 2. 제이쿼리로 슬라이드 fade-in 효과 만들기 별 다른 CSS효과 없이 제이쿼리 CDN을 HTML에 삽입하고 js파일에 이 내용을 그대로 써주면 된다. $(function(){ ///////slide // 전체 이미지 숨기기 $('#slide ul img').hide(); /..

2022.05.10 - [WEB] - 자바스크립트로 메뉴 dropdown - slidedown효과 만들기 자바스크립트로 만드는 메뉴 dropdown - slidedown효과 자바스크립트로 만드는 서브메뉴 slidedown효과 자바스크립트로 메뉴를 만들 때 제이쿼리를 이용하지 않고 dropdown시에 slidedown의 효과를 만들고 싶은데 단순히 height값만 조정으로는 잘 되지 않았 flowerofashes.tistory.com 저번 글에 이어서 자바스크립트로 메뉴가 나타나는 효과 중 fade-in를 적용해본다. 0. CSS의 :hover를 이용하여 CSS로만 구현하기 .menu_list .main .sub{ opacity: 0; visibility: hidden; transition: all 0.4..

자바스크립트로 만드는 서브메뉴 slidedown효과 자바스크립트로 메뉴를 만들 때 제이쿼리를 이용하지 않고 dropdown시에 slidedown의 효과를 만들고 싶은데 CSS를 단순히 height값만 조정으로는 잘 되지 않았다. 평소 궁금하던 차에 검색을 해보았다. 이유가 height에 transition이 작동하지 않는다라는 답변을 보았는데 단순히 그런 문제인지 왜 작동하지 않는지 확인해보기로 했다. 이것은 단순히 CSS로 구현했을 때에도 해당되는 내용이다. 0. CSS의 :hover를 이용하여 CSS로만 구현하기 .menu_list .main .sub{ height: 0; overflow: hidden; transition: all 0.4s; } .menu_list .main:hover .sub{ h..

자바스크립트로 숫자야구 게임을 만들어보았다. 사담 : 'let/'s get it 자바스크립트'라는 책에 자바스크립트를 연습하기 위한 여러가지 다양한 게임이 있어서 메소드를 복습하면서 새로운 메소드를 익히고 있다. 책을 보고 게임의 구조의 흐름을 대강 파악한 뒤 책을 보지 않고 새로 작성해보는 것이라 책에 나온 코딩과 다를 수 있습니다. 순서도 1. 랜덤한 4개의 숫자를 얻는다. 2. 사용자가 입력창에 4자리를 입력한다. 3. 사용자가 입력한 숫자가 4자리 인지 검사한다. 4자리가 맞으면 숫자가 중복되지 않는지 검사한다. 4. 숫자가 중복되지 않으면 랜덤하게 얻은 결과 값을 비교해서 얼마나 맞췄는지 알려준다. 아주 간단하게 입력창과 버튼을 html 만들었다. 확인 css는 안 만들었다.... 일단 블로그에..

자바스크립트로 끝말잇기 만들기 나름 이쁘게 만들어보겠다고 해봤는데 괜찮은지... 순서도 1. 몇 명이서 게임할 것인지 확인한다. 2. 제시어가 있는지 없는지 확인한다. - 없으면 첫 번째 사람이 제시어를 제시한다. 3. 제시어가 있으면 이전 단어와 비교한다. 4. 맞으면 3번을 반복하고 틀리면 alert 창으로 표시한다. 읽기만 해도 알 수 있는 아주 간단한 html내용 1번째 유저 : 입력 내 맘대로 꾸민 css /*///////////////css///////////////*/ @charset "UTF-8"; body{ margin: 0; padding: 0; background-color: #e5e5e5; } .wrapper{ width: 300px; height: 600px; background:..