닭발에서 개발까지

필수요소 3가지! PC화면에서는 정상작동 하였지만 모바일에서 웹을 볼 시 비디오가 전체화면으로 나와 방해하는 현상을 발견하였다. 이 버그?라고 하기엔 그렇지만 이 것을 수정하기 위해 찾던 중 발견 한 것 video 자동재생 필수 요소 3가지는 바로 1. autoplay 2. muted 3. playsinline pc브라우저나 안드로이드는 1,2번인 autoplay와 muted만 넣어도 모바일에서의 video태그의 문제점은 사라지지만 아이폰 유저들을 위해서 3번인 playsinline을 꼭 넣어줘야 한다. 코드 예시

Study 2023. 5. 2. 15:57

assets : 이미지등의 에셋을 보관하는 곳 node_modules : 앱을 실행할 떄 필요한 모든 라이브러리들의 보관하는 곳 babel.config.js : 바벨을 이용하여 어떻게 코드를 transpile 할지 설정하는 곳 app.json : 리액트 네이티브 앱 자체의 설정을 넣어준는 곳 app.js 화면에 보이게 되는 소스 코드를 작성하는 곳 Packge.json : 해당 프로젝트에 대한 정보들이 들어있는곳, 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전 등이 명시되어짐 앱을 시작할 스크립트, 빌드할 때, 테스트할 때 사용되는 스크립드 등이 명시되어있음.

Study/JS 2023. 4. 30. 21:19

웹페이지 쿠키를 이용하여 시간설정으로 팝업을 노출시키지 않게 할 수 있다 또 예약시간 예 : 보지않기 버튼 클릭시 24시간 및 시간단위로 노출시키지않는 방법과 00시가 기준으로 초기화 하는 방법이 있다. 상황에 맞는 방법으로 사용하면 될 것 같다. 팝업창을 만들 때 해당 팝업에 name을 지정 후 해당 name으로 쿠키값을 셋팅 후 name으로 해당 팝업을 찾아서 팝업을 노출, 비노출 시키는 방법으로 제각하였다. 또 팝업이 여러개일 경우 name값으로 쿠키를 설정하기에 각기 다른 name으로 지정 후 해당 name값에 쿠키를 설정하는 방법으로 하였다. 1. 팝업창이 하나일경우 팝업창 입니다 x 오늘만 이 창을 열지 않음 2. 팝업창이 여려개일 경우 팝업창1 입니다 x 오늘만 이 창을 열지 않음 팝업창2 ..

Study/각종모음 및 팁 2023. 2. 15. 18:28

다른 페이지의 원하는 위치로 이동하는 방법 페이지 이동을 한 이후에 새로 불러오는 페이지의 원하는 위치로 이동 하는 기능이 필요할 경우 이동하고자 하는 페이지의 위치를 표시해두고 이동하면 된다. ex) index페이지에서 sub페이지로 이동시 sub페이지의 3번째 색션으로 바로 가고싶은경우 이렇게 호출을 하면 해당페이지 특정 위치로 이동을 하게 된다.

Study/HTML 2022. 10. 21. 10:48

background: linear-gradient (90deg, rgba(43,232,168,1) 0%, rgba(14,209,229,1) 100%) div{ width: 250px; height:300px; border-radius: 10px; background: linear-gradient(90deg, rgba(43,232,168,1) 0%, rgba(14,209,229,1) 100%); margin: 0 auto; margin-top: 250px; }

Study 2021. 5. 3. 15:41

z-index가 먹지 않을 때 z-index가 먹지 않을 때 position: relative를 줘보자 (상위부모나 자기자신에게). overflow-hidden 이 걸려있는지 확인(해당섹션에 높이값이 걸려있을 수 있음) 배경 고정시키는 법 background-attachment:fixed; 이미지 중앙 정렬 Image는 왼쪽, 오른쪽 margin을 auto로 설정하고 display: block; 으로 설정하면 된다. img {display: block; margin:0 auto; width: 50%;} swiper slider IE에서 작동하지않을 때 제작사에서 더이상 ie는 지원하지 않는다고 함 -구버전을 적용하면 작동됨. // CSS link // JavaScript ScrollTo 스크롤 앵커기능이..

Study/각종모음 및 팁 2021. 3. 15. 10:15

getBoundingClientRect().height getBoundingClientRect().width 해당 엘리먼트의 높이값과 넓이값을 구할 수 있다 예 : const navbar = document.querySelector("#hd_wrap"); //헤더를 담는 변수 naver const navbarHeight = navbar.getBoundingClientRect().height; //naver의 높이값을 담는 navberHeight document.addEventListener("scroll", () => { //scroll이 내려가면 이벤트 발생 if (window.scrollY > navbarHeight) { //만약 윈도우의 스크롤값이 navbarHeight보다 크다면 실행 navbar..

Study/JS 2021. 3. 3. 11:48

AOS - Animate on scroll library michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io GSAP greensock.com/gsap/ GSAP Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, ..

Study/JS 2021. 2. 22. 14:02