코드 저장소, 생활 정보, 공유, 꿀팁

AOS는 잘 되지만 IOS에서 안되는 현상 수정 Video 자동재생 시 인라인으로 보여지기 <video muted autoplay loop playsinline oncontextmenu="return false" controlsList="nodownload" controls preload="metadata" poster=""> <source src="@/assets/video/video2.mp4" type="video/mp4" /> </video> iphone, ipad에서는 비디오 자동재생 시 비디오가 전체화면으로 보여지는데, playsinline 을 추가하면 안드로이드 폰처럼 인라인으로 보여져서 관리하기가 쉬워진다. 폰에서 숫자 키패드만 나오기 <input type="text" inputmode="numeric" pattern="[0-9]*"> iphone, ipad에서는 <input type="number">일 때 숫자만 나오지 않는데, 그 때 위와 같이 inputmode를 지정하고 pattern으로 숫자만 포함시키면 된다. 비슷한 다른 방법으로는 <input type="tel"> 이 있다. button에 focus 하기 <a role="button" tabindex="1"> iphone, ipad에서 button에 focus가 안될 때는 role="button" tabindex="1" 같은 속성을 추가하면 가능해진다. 끝.

웹페이지에서 스크롤을 내릴 때 콘텐츠가 나타나는 효과, 스크롤 올릴 때 사라지는 효과 html <div class="service s1"> <div class="cont">...</div> </div> <div class="service s2"> <div class="cont">...</div> </div> <div class="service s3"> <div class="cont">...</div> </div> <div class="service s4"> <div class="cont">...</div> </div> css .service .cont{ opacity:0; /* 기본값 : 투명도 0 */ transform:translateY(200px); /* 기본값 : 아래로 200px에 위치 */ transition:transform 0.8s ease, opacity 0.8s ease; /* 애니메이션 할 속성, 속도, 효과 */ } .service.on .cont{ opacity:1; /* 투명도 1 */ transform:translateY(0); /* 원래 위치로 */ } javascript // 스크롤 할 때 특정 콘텐츠의 브라우저 상단 기준 높이 값 구하기 scrollPos = (ofstop, no=0.7) => { return document.querySelector(ofstop).offsetTop - (Math.floor(window.innerHeight * no)); } // 스크롤 기준 값 let pastScrollY = window.scrollY; document.a

한쪽 방향으로 계속 이동되지만 마우스를 가져가면 멈추고, 마우스가 나가면 다시 이동하는 효과 css 버전 - animation html <div class="wrap"> <div class="txt_box" @mouseenter="stopNoti(true)" @mouseleave="stopNoti(false)"> <a href="공지1">공지1</a> <a href="공지2">공지2</a> <a href="공지3">공지3</a> </div> </div> css /* dlsplay:flex 한 이유는 .txt_box가 복제되어서 들어가서 라인을 맞추려고 */ .wrap{ display:flex; width:1000px; overflow:hidden; } .txt_box{ display:flex; align-items:center; animation:leftToRight 20s linear infinite; } /* 마우스가 오버되면 정지 */ .txt_box.on{ animation-play-state:paused; } /* 왼쪽에서 오른쪽 이동. javascript에서 .txt_box를 복제해서 넣어서 -100% -> 0%. */ @keyframes leftToRight { from{ transform:translateX(-100%); } to{ transform:translateX(0%); } } ...... js // 이동되는 영역 복제해서 넣기 let cloneBox = document.querySelector(".txt_box").cloneNode(true); document.qu

css를 이용한 fadein, fadeout효과, javascript로 제어하기 여러개의 배경이미지가 겹쳐져 있을 때, 하나의 배경이미지가 살짝 크고 투명한 상태에서 원래 크기와 불투명한 상태로 나타나고(fadein), 일정 시간이 지나 다른 이미지가 같은 방식으로 나타날 때 보여지고 있던 이미지는 역순으로 사라지는 효과(fadeout) html <!-- 배경을 감싸는 영역 --> <div class="bg_area"> <!-- vuejs를 이용하여 배경이미지를 반복 생성 --> <div class="bg" :style="'background-image:url('+ list +')'" :class="{on: idx === efc.bgNo}" v-for="(list, idx) in efc.bgUrls" :key="idx"></div> </div> css .bgwrap{ position:relative; width:100%; height:100%; } /* (안보여지는)기본 배경이미지 */ .bgwrap .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transform:scale(1.05) rotate(0.01deg); /* 원본보다 살짝 크고 회전된 상태로 */ opacity:0; /* 투명도 0으로 안보이게 */ transition:opacity 0.8s ease, transform 4s ease; /* 투명도랑 크기, 회전에 애니메이션 효과 */

아이폰 사파리 브라우저에서 100vh가 제대로 적용 안되는 오류, 버그 해결 javascript 작성 let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", vh+"px"); // resize 될 때 기본값 다시 수정 window.addEventListener("resize", () => { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", vh+"px"); } css에 적용 .someClass{height:calc(var(--vh, 1vh) * 100);} /* 100 => 100vh */ 위와 같이 javascript로 1vh에 대한 기준 값을 정의하고, css에서 원하는 높이 만큼 vh를 작성하면 된다. 아이폰 사파리에서 height:100vh 가 제대로 안나오는 이유는 툴바와 주소창이 스크롤 될때마다 자동으로 숨겨졌다 보였다해서 그렇다. 안드로이드 폰에선 브라우저의 높이가 그대로 100vh이지만 아이폰에선 툴바와 주소창이 브라우저 높이와는 상관없이 그 위로 뜨는 것처럼 적용되어 실제 100vh에선 그 만큼 가려져서 보여지게 된다. 아이폰 사파리에서 화면 전체를 덮어버리는 메뉴 레이어가 보여질 때, 툴바랑 주소창에 상관없이 100vh로 꽉차게 보여지고 컨텐츠 영역이 위, 아래 터치무브에 영향을 안 받아서 메뉴 레이어를 닫으면 열렸던 컨텐츠의 위치 그대로 보여지게 ...... css ... html.ovh, body.ovh{position:relative;overflow:hidden!important;touch-action:none;} .someclass{height:calc(var(--vh, 1vh)

css 폰트 사이즈(font-size)를 사용하여 전체 화면의 레이아웃 조절 common.css 같은 공통 css에 기본 폰트 사이즈 지정 html{font-size:10px;} css를 적용할 때 px 대신 rem 사용 .wrap{margin:10rem;} .div{width:20rem;} .txt, a, p{font-size:1.5rem;} rem은 html{font-size:10px;} 로 설정한 크기가 기준. 1rem = 10px px은 1px만 사용. 브라우저 길이나 해상도 등에 맞게 전체적으로 레이아웃의 크기를 변경할 때는 미디어쿼리를 사용 @media screen and (max-width:820px){ html{font-size:20px;} } @media screen and (max-width:414px){ html{font-size:15.7px;} } @media screen and (max-width:360px){ html{font-size:12.4px;} } 위와 같이 css에서 html의 기본 폰트 사이즈를 지정하면, 미디어쿼러를 이용하여 브라우저 크기에 따라 전체적으로 사이즈가 조절 가능. (예: 웹 화면에서 width가 20rem 이라면 실제 200px로 표현되지만, 미디어쿼리에 지정한 사이즈에 따라 width가 400px, 314px, 248px 로 표현된다. 미디어쿼리를 이용하여 html의 font-size를 조절하면 웹/모바일 브라우저에 상관없이 레이아웃이 안깨지고 보는데 문제 없는 수준으로 나올 수 있게 간단히 만들 수 있다. print css @media print { header, footer, aside, nav, form, iframe { display: none; } table, img, svg { break-inside: avoid; } body { width: 100%; } .p

css 초기화, css 세팅, 기본 css 개인적으로 일하면서 조금씩 수정하다가 어느 순간부터 기본으로 정의하고 사용중인 css이다. @charset "utf-8"; *{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} html{-webkit-text-size-adjust:none;-webkit-touch-callout:none;/* -webkit-user-select:none;*/-webkit-tap-highlight-color:rgba(0,0,0,0);} body{position:relative;overscroll-behavior:contain;line-height:1.5;font-family:"Roboto", "Noto Sans KR";font-weight:400;word-break:keep-all;color:#000;}/* chrome, safari에서 pull to refresh 안되게. 만약 계속 된다면 부모태그(html)에 overflow:hidden 추가 */ img,fieldset{line-height:0;vertical-align:middle;} img{width:100%;image-rendering:crisp-edges;image-rendering:optimizeQuality;image-rendering:-webkit-optimize-contrast;object-fit:contain;} ul,ol{list-style:none;} a{display:inline-block;text-decoration:none;} a,span,strong{font-size:inherit;font-weight:inherit;font-family:inherit;color:inherit;line-height:inherit;} a,button,label,input,select,

css로 스크롤바 수정하기, 꾸미기 아래와 같이 css를 작성. body::-webkit-scrollbar{width:5px;}/* 스크롤바의 너비 */ body::-webkit-scrollbar-thumb{background-color:#040404;}/* 스크롤바의 길이, 색상 */ body::-webkit-scrollbar-track{background-color:#c8c8c8;}/* 스크롤바 뒷 배경 색상 */ 전체가 아닌 일부 div에서만 적용할 수도 있다. .somediv::-webkit-scrollbar{width:5px;} .somediv::-webkit-scrollbar-thumb{background-color:#040404;} .somediv::-webkit-scrollbar-track{background-color:#c8c8c8;} 끝.