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

See the Pen Untitled by 류수현 (@ryusoo) on CodePen. 참고 : https://songsong.dev/entry/%EC%98%A4%EB%8A%98-%ED%95%98%EB%A3%A8-%EB%B3%B4%EC%A7%80-%EC%95%8A%EA%B8%B0-%ED%8C%9D%EC%97%85-%EB%A7%8C%EB%93%A4%EA%B8%B0 오늘 하루 보지 않기 팝업 만들기 오늘 하루는 보지 않기 팝업을 구현합니다. 쿠키와 로컬 스토리지가 어떤 것인지 간단하게 알아보고 두가지 방법으로 구현하는 방법을 함께 알아봐요! 구현 사항 및 방법 정리 어떤 걸 구현해야 songsong.dev https://codechacha.com/ko/javascript-compare-dates/ Java..

내가 윈도우이니까 LF를 CRLF로 바꾸어야해서 경고를 띄워주는것! 따라서 아래 코드로 core.autocrlf를 켜주면 자동으로 변환이 실행되므로 더이상 경고를 띄우지 않는다고 한다! git config --global core.autocrlf true 설명은 아래글 참고!! Git 에러 CRLF will be replaced by LF (혹은 반대) 핸들링하는 방법 맥/리눅스 이용 개발자와 윈도우 개발자가 협업할 때 왜 발생할까? 터미널에 git 명령어를 입력했는데 다음과 같은 에러가 뜨는 경우가 있다: ```bash warning: CRLF will be replaced by LF in some/file blog.jaeyoon.io

CSS 공부할 초에 잠깐 보고 지나갔던것들인데 지금보니까 직접 이미지로 안뽑고도 되었던 배경들도 있는거같다.. 이 파이차트 만들려고 코드보다가 검색했는데 그라디언트를 무시하고 있었던거같다! CSS only pie chart CSS Tip! https://twitter.com/ChallengesCss/status/1459113686614872067... codepen.io 다양한 그라디언트 예제들!! Using CSS gradients - CSS: Cascading Style Sheets | MDN CSS gradients are represented by the data type, a special type of made of a progressive transition between two or mor..

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 진작에 정리된거 있는줄 알았으면.. 매번 블로그 뒤지고 다니지 않았을텐데ㅠㅋㅋㅋㅋㅋ

네이버로 로그인 https://developers.naver.com/docs/login/bi/bi.md 로그인 버튼 사용 가이드 - LOGIN 네이버 로그인은 애플리케이션에 사용할 수 있는 네이버 로그인 버튼 기본 이미지를 제공합니다. 애플리케이션의 상황에 맞게 버튼 이미지의 디자인을 변경할 수 있지만 네이버 고유의 아이덴 developers.naver.com 카카오 로그인 https://developers.kakao.com/docs/latest/ko/reference/design-guide Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 구글 ..

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains DOMTokenList.contains() - Web APIs | MDN The contains() method of the DOMTokenList interface returns a boolean value — true if the underlying list contains the given token, otherwise false. developer.mozilla.org 위는 contains()에 대한 설명 아래는 classList에서 contains()를 사용하는 것 볼 수 있다. https://developer.mozilla.org/ko/docs/Web/API/Eleme..

git은 공식문서를 친절하고 명료하게 잘 적어줘서 어렵지않게 이해하면서 읽을 수 있어요!! 깃 공부한다면 공식문서 꼭 읽기!! 이해하고 정리하면서 읽느라 시간은 다소 걸리지만 이해가 되면 너무 뿌듯해요..ㅠ restore에 대한 git의 공식문서 보러가기 : https://git-scm.com/docs/git-restore/2.35.0 Git - git-restore Documentation The following sequence switches to the master branch, reverts the Makefile to two revisions back, deletes hello.c by mistake, and gets it back from the index. $ git switch maste..

"CSV파일을 JS에서 가져오는 방법"을 찾게된 이유 : 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr 대표님이 공공데이터 사이트를 보여주시면서 이 사이트에 있는 데이터를 쓸모있게 시각화해보는것도 생각해봐라. 고 해서 아니..! 이런 데이터가 그냥 받을 수 있다니.. 그러고 한번쯤은 해보고싶은 일이라 봤는데 CSV파일이나 엑셀로 주는데 이걸 어떻게 받아서 내가 가공해서 쓸수있는지 궁금해서 검색해봤다.. '가슴속3천원'이라는 어플처럼 그런 귀엽고 쓸모있는 걸 나도 만들수있다..?? 조건: JSON을 쓸줄알아야함.. 우..

대표님이 내 개인사이트를 혼자 만들어보라고 react와 node.js는 어떠냐고해서 우선 둘에 대해 알아보았다!! js 공부먼저해야지 하고 미뤄두던 것인데 대표님이 나는 컴퓨터쪽 전공지식도없으니 책보고 정석공부하는것보단 두루두루 하면서 경험을 쌓아보는걸 추천해서 js책만 보려고했는데 그러지않고 다른공부도 시작해보기로했다! 바쁜일 끝나고 내시간 생겨서 너무좋아ㅠ 윗글보단 아랫글이 설명이 더 쉬움. 둘 다 읽고 이해하기 좋았음. React와 Node.js의 관계 Back-end (java + springboot) + Front-end (react) 쪽을 공부하면서, Node.js란 내게 단순히 React를 사용하게 하는 중간 매개체의 역할로 밖에 인식되지 않았다. 오늘은 이 Node.js란 놈이 무엇인지 살..

https://helloworld-88.tistory.com/71 [기본] WEB 과 WAS 차이 WEB, WAS 란? ■ 웹서버(WEB)란? 웹서버는 말그래도 작성된 html페이지 등을 네트워크망에 종속되지 않고, 웹서비스를 할 수 있도록 어플리케이션 - 웹 서버(소프트웨어): 웹 브라우저 클라이언트로 helloworld-88.tistory.com 이해한 개념 요약 WEB : 이미지, 동영상 html문서 등을 요청하고 반응하는 것. WAS : 동적 서버 콘텐츠 수행, 데이터서버와 같이 수행됨. WEB과 WAS는 목적이 다르다! ex) 아파치 = 웹서버 톰켓 = WAS = 웹서버 + 웹 컨테이너