목록전체 글 (163)
오식랜드
카카오톡 미리보기가 안바뀔 때, og 캐시 삭제
meta태그의 og:image, og:title 등을 수정했는데, 바뀌지 않고 있다? 그땐 카카오톡 개발자도구에서 OG캐시를 초기화해주면 된다. 개인 카카오톡 계정으로 로그인 후 누구나 사용할 수 있다! URL칸에 https://hong6v6.tistory.com/ 등의 원하는 링크를 입력 후 카카오톡으로 다시 보내보면 수정되어 보여질 것 이다! 카카오톡 OG캐시 삭제 바로가기 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com
[css motion] button hover effect
버튼 또는 div에 hover시 줄 수 있는 효과 6가지를 준비했다 별도의 스크립트 없이 오직 css로만 이루어지는 효과이니 유용하게 쓰일 듯 하다! Demo : https://dudrbrb.github.io/etc/test/hoverEffect/ Document Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 dudrbrb.github.io 우선 html에 6개의 버튼을 셋팅해준다 Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 버튼들에 기본 css를 셋팅한 뒤 커스텀을 해주자 버튼 hover시에 가상 선택자 :before, :after 를 이용해서 효과를 줄 것이다 Effect1 : 상 → 하 Effect..
gitignore not working
gitignore에 추가를 해도 적용되지 않고 git 저장소에 push 할 때 마다 같이 push되는 경우가 있을 것이다. 그럴 때 아래 단계를 따라해보쟈 step1 .gitignore 파일 포함, 프로젝트에서 변경 사항이 추가되고 커밋되는지 확인 git add . git commit -m "initial commit" step2 저장소 모든 파일 제거 git rm -r --cached . step3 저장소에 다시 모두 추가 git add . git commit -m "gitignore fix" git push
[javascript] html 페이지에 bgm 추가하기
bgm을 on/off 버튼으로 조작되도록 하자 sound.js(첨부파일)를 불러온 후 main.js에서 제어를 할 것이다. html sound.js 우선은 sound.js를 확인해보자 내장 함수로 초기함수, 시작함수, 멈춤함수가 있고, 인자로는 id, source, volume, loop 네가지를 받는다. main.js bgmPath : bgm의 링크 bgmNowPlaying : 재생/멈춤을 제어할 때 쓰일 boolean형태의 변수 bgm : sound.js의 Sound() 함수를 인스턴스로 불러온다 불러온 후 초기 함수를 window가 로드되었을 때 실행시켜준다. bgm on/off 버튼 클릭 시 시작/멈춤 함수를 호출하자 bgm이 재생중일 땐 시작버튼이, 이미 멈춰있을 때 멈춤버튼이 클릭되지 않도록 ..
[javascript] 요소의 순서 구하기
참고 링크 : https://velog.io/@awesomelon/jquery-this.index%EB%A5%BC-javascript%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0 $(this).index()를 javascript로 만들기[JS] jquery를 쓰다보면 현재 클릭한 요소의 인덱스 값을 구하는 것을 많이 쓰는데 코드로 보면 다음과 같다. 어떻게 구현하는 걸까? 생각해보자. 우선 현재 클릭한 요소의 부모 요소부터 찾아야 할 듯 velog.io 나는 참고 링크에서 사용하는 부분만 긁어왔다. 원글이 친절히 순서대로 설명되어 있으니 한번은 읽어보길 권장합니당 getElementIndex : 현재 클릭한 요소의 index값 구하는 함수 btn 클릭 시 getElementIndex..
[javascript] addClass, removeClass, toggleClass, hasClass
jquery 없이 vanilla javascript로 class관련 함수를 구현해보자 1. addClass element.classList.add('추가할 class명'); function addClass(e, c) { e.classList.add(c); return e; }; 2. removeClass element.classList.remove('삭제할 class명'); function removeClass(e, c) { e.classList.remove(c); return e; }; 3. toggleClass element.classList.toggle('토글할 class명'); function toggleClass(e, c) { e.classList.toggle(c); return e; }; 4...