들숨에 건강! 날숨에 재력!

1. 클릭시 생기는 아웃라인, 박스 없애기! [CSS]모바일에서 영역 클릭시 생시는 파란 박스 없애기 -- 모바일이나 웹에서 테두리가 생긴다면... 아웃라인만 없애주면 된다. input:focus{ outline:none; } 그런데 모바일에서는 하이라이트생기는 경우가 있다. IOS(아이폰,,아이패드 등..), Android 등의 웹킷 gahyun-web-diary.tistory.com input:focus{ outline:none; -webkit-tap-highlight-color: transparent; } -webkit-tap-highlight-color - CSS: Cascading Style Sheets | MDN -webkit-tap-highlight-color is a non-standard..

div { border: 5px solid; border-image: linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa); border-image-slice: 1; } [HTML+CSS] border에 그라데이션 넣기 border(테두리)에 그라데이션 효과 넣는 예제입니다. See the Pen border gradation by limqo (@limqo) on CodePen. 위의 코드에서 box1의 div는 border-image를 이용하여 gradation 넣은 것을 확인 할 수 있습니.. limqoh.tistory.com

[javascript] 뒤로가기(이전 페이지), 앞으로가기(다음 페이지) 구현 - window.history.back(), forward(), go() 아래와 같은 브라우저의 뒤로가기, 앞으로가기 기능을 자바스크립트를 사용해서 구현할 수 있습니다. window 내장객체 안에 있는 history object를 사용합니다. 뒤로가기(이전 페이지) window.history.back( codingbroker.tistory.com back forward 블로그 글을 보다보니 forward를 쓰는 사람도있고 go를 쓰는사람도있어서 찾아보니 history.go는 앞뒤 둘다 갈 수 있는 메서드였다. History.go() - Web API | MDN History.go() 메서드는 history 세션에서 특정한 페이..

모바일 웹에서 hover 효과 제거하기 모바일(터치 디바이스)에서는 마우스 커서가 없기 때문에 hover 효과를 줄 수 없다.PC에서처럼 css에 hover 효과를 넣게 되면 해당 요소를 두번 터치해야 원하는 동작을 얻을 수 있다. (한번 터치하면 velog.io @media (hover: hover) { ... }​ 와.. 미디어쿼리에 사이즈말고 다른걸 넣을 수 있다는 걸 처음 알았네.. 라는 생각을 하는 순간 다른게 더 있지않을까 싶어서 미디어쿼리를 검색해봤다. 미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합..

이전 까지는 모두 미디어 쿼리로 구분했었는데 코딩하다보면 데스크탑일때와 모바일/태블릿일 때 터치나 hover인 경우에 다르게 적용해줘야 하는 부분들이 생긴다! 그래서 검색하다 이 방법을 알게되었다!! 너무 고맙게도 설명을 잘해주셔서 보고 잘썼다..! Javascript - 디바이스 구분하기 [Mobile, PC] 이번에는 Javascript를 통해 디바이스를 확인하는 방법을 알아보겠습니다. 일반적으로 디바이스를 구분하기 위해서는 브라우저가 가지고 있는 navigator.userAgent를 사용합니다. 여기서 에이전트 7942yongdae.tistory.com

animation-fill-mode: forwards; none // 기본값 forwards // 마지막 프레임 유지 backwards // 처음에 적용된 스타일 값으로 유지 both // forwards와 backwards를 모두 유지 ( 이상태는 뭐지? 담에 시도해봐야지)

처음엔 시간을 다룬다고 신났지만.. 비동기의 어려움을 알게되면서 마구쓰기는 무서워진 친구.. setTimeout() 잘쓰게 되는 날이 빨리오면 좋겠다. 딜레이를 줘야할 상황이 있어서 사용했다. https://developer.mozilla.org/ko/docs/Web/API/setTimeout setTimeout() - Web API | MDN 전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. developer.mozilla.org

배열을 이용해서 배열만들기를 for문으로 해보았다. foreach로 가능하지 않을까 했는데 안될거같아서 for문으로했는데 이 글적다가 foreach로 가능한 방법이 생각났다. 간단하게 코딩 상황설명 : 아래처럼 .item을 가진 div들중에 .option을 포함하는 .item만 모은 배열을 만들고 싶었는데 코드에 이미 .option를 가진 div리스트의 배열이 있어서 그 배열을 사용해서 .option을 포함하는 .item 리스트 배열을 만들기위해 for문을 썻다. for문으로 배열만들기 let optionList = document.querySelectorAll('.option'); let itemList = []; for(let i = 0; i { itemList[i] = element.closest(..

아무래도 퍼블리싱 하다보면 DOM을 찾고 가져오거나 지우거나 추가하거나 입맛대로 다루어야하는데 그때마다 자주 찾게되서 그런 녀석들 정리! 내가 편하려고!! DOM에서 앨리먼트 찾을때 자주쓰는 방법들 더보기 아이디/클래스를 가진 앨리먼트 찾기 document.querySelector('여기에 클래스나 아이디, 앨리먼트를 입력'); document.querySelectorAll('여기에 클래스나 아이디, 앨리먼트를 입력'); querySelectorAll을하면 저 조건의 요소들을 배열로 만드는데.. 한번씩 그사실을 까먹고 하나로 생각하고 작업을 해버려서 왜 찾을수 없다고 하지? 하면서 실수를 한다ㅠ 배열은 하나씩 가져와서 작업해야하는걸 잊지말자ㅠ 부모, 자식 찾기 부모, 자식, 형제 찾기는 이분글을 보는게 ..

[JavaScript] 이벤트 캡쳐링, 이벤트 버블링 개념, 방지하는 방법 HTML 요소에서 이벤트가 발생하면 해당 요소를 포함한 모든 조상 요소에 이벤트를 전달한다. 왜 전달하는지 알아보고 이벤트가 전파되는 과정을 설명한다. velog.io button만 클릭이 되고 body에는 이벤트가 전달되지 않기를 바래서 버블링 막는것을 찾아보았다. event.stopPropagation(); 이 코드를 입력하면, 그 요소에 등록된 이벤트리스너는 실행되지만 버블링되지 않아서 원하는대로 동작하였다!

https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 진작에 정리된거 있는줄 알았으면.. 매번 블로그 뒤지고 다니지 않았을텐데ㅠㅋㅋㅋㅋㅋ