본문 바로가기

퍼블리싱/HTML | CSS | Javascript

 (106)
webp와 png 동시에 사용하기 브라우저 지원 여부를 확인해 webp를 지원하는 브라우저에서는 webp를, 아닌곳에서는 png를 로드 https://fourwingsy.medium.com/webp-이미지-사용하기-dde09ae6500f WebP 이미지 사용하기 구글에서 개발한 WebP는 이미지를 손실 압축하는 대신 용량을 획기적으로 줄여주는 이미지 포맷입니다. JPEG 포맷보다 압축률이 30% 정도 높다고 하지만, 제가 생각하는 최대의 장점은 PNG를 사용해 fourwingsy.medium.com
모바일에서 100vh 오류 해결방법 1. 새로운 단위 사용하기 https://s0ojin.tistory.com/56 [React] 모바일 웹 100vh 스크롤 버그 + tailwind 적용법 문제 상황 페이지에 height : 100vh 속성을 주었는데, 모바일에서 테스트해보니 스크롤이 생깁니다. 1vh는 스크린 높이의 1%이므로 100vh면 스크롤없이 스크린을 가득 채워야하는데, 모바일에서만 이 s0ojin.tistory.com 여기서 해결방법 2 참고. + 해결방법 2의 단위에 대한 내용 : https://web.dev/blog/state-of-css-2022?hl=ko#viewport_units 2022년 CSS 현황 | Blog | web.dev Google IO 2022에서 확인할 수 있는 현재와 미래의 웹 스타일 지정 기능 및 ..
반응형 이미지 비율 유지하기 html css .image-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; } .image-wrapper .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 여기서 . image-wrapper의 padding-bottom의 값을 변경하여 원하는 비율로 맞추면 된다 2:1 : padding-top: 50% 1:2 : padding-top: 200% 4:3 : padding-top: 75% 16:9 : padding-top: 56.25% 어디선가 보고 적어놨었는데 출처를 모르겠다 ㅠㅠ
모바일에서 클릭시 연한 파란색 bg 없애기 https://gahyun-web-diary.tistory.com/77 [CSS]모바일에서 영역 클릭시 생시는 파란 박스 없애기 -- 모바일이나 웹에서 테두리가 생긴다면... 아웃라인만 없애주면 된다. input:focus{ outline:none; } 그런데 모바일에서는 하이라이트생기는 경우가 있다. IOS(아이폰,,아이패드 등..), Android 등의 웹킷 gahyun-web-diary.tistory.com
swiper 옵션 정리 잘된 글 https://velog.io/@leejpsd/Swiper-%EC%98%B5%EC%85%98-%EC%A0%95%EB%A6%AC Swiper 옵션 정리 그동안 늘 캐러셀을 구현하기 위해 swiperjs 라이브러리를 사용했었다.다행히도 입사한 회사에서도 swiperjs를 쓰고 있기에 어렵지 않게 적용하였다.이참에 옵션들을 정리 해보려 한다.초기화 설정 velog.io
스크롤바 위치 상하 반전시키기 change scroll bar position 이번에 처음으로 브라우저 기본 scrollbar 의 위치를 바꿔달라는 요청이 왔다. ( overflow-x:auto; 되어 있는 div 내에 큰 table이 있어서 스크롤바가 생기는 scroll table 형식이었는데, 스크롤바를 테이블 하단이 아니라 위에 나타나게 해달라고 함) 찾아보니 생각보다 스크롤바 위치 반전은 간단. css rotateX를 이용하면 된다. html I'm in Content and I'm very long css .Container { width: 200px; overflow-y: auto; } .Content { width: 300px; } .Flipped, .Flipped .Content { transform:rotateX(180deg); -ms-transform:rotate..
폰트가 로딩되기 전 화면을 숨기는 가장 간단한 방법 css body { visibility: hidden; } js document.fonts.ready.then(function () { // 폰트가 로드된 후 실행할 코드 document.body.style.visibility = 'visible'; }); 개발단에서 폰트 캐싱 처리 되도록 하는게 가장 좋지만 그게 안된다고 하면 (사실 안될리가 없다 모르는것일뿐) 이렇게 처리할 수도 있다.
모바일 기기 해상도 구하기 물리적 해상도와 화면 크기(인치)만 나와있을때, 논리적 해상도 구하는 방법 ( https://blog.naver.com/eirene100999/221652853751 참고) https://foodchain.tistory.com/153 여기 정확한! 정보 있음 1. ppi 구하기 PPI = \sqrt{{가로 픽셀 수^2 + 세로 픽셀 수^2}} / \text{화면 크기 (인치)}} (모르겠으면 챗gpt한테 물어보기. ex.'10.1인치 디바이스 해상도가 1920 x 1200 일때 ppi 구해줘' ) 2. 모바일 디바이스 Pixel ratio 공식에 따라 계산 devicePixelRatio = 해당 디바이스 PPI / 150 PPI (소수점자리가 길땐 반올림) 3. 물리적 픽셀에서 Device Pixel R..
jquery ui datepicker에 position 이슈가 있을때 datepicker가 modal popup안에 있고, 팝업 내에 스크롤이 있는 경우 datepicker 캘린더 위치가 이상해지는 이슈가 있었음. 검색해서 찾은 해결방법! https://aries.me/2020/08/03/jquery-ui-1-12-datepicker-wrong-position-issue-and-fix/ 1. 위치고정 함수 function setDatepickerPos(input, inst) { var rect = input.getBoundingClientRect(); // use 'setTimeout' to prevent effect overridden by other scripts setTimeout(function () { var scrollTop = $("body").scrollTo..
window가 아닌 div의 스크롤 끝 감지 이벤트 $(document).ready(function() { $('.content').scroll( function() { var elem = $('.content'); if ( elem[0].scrollHeight - elem.scrollTop()
inputmode 모바일 가상키보드 레이아웃 설정 input이나 textarea에 지정하는 inputmode는 pc버전에서는 focus했을때 아무 차이가 없지만, 모바일에서 가상 키보드가 나올때 키보드의 기본 레이아웃을 지정해준다. https://umings.github.io/file/input_test.html Document umings.github.io 위 링크 모바일에서 접속해서 확인해보면 어떻게 다른지 한눈에 확인가능. 삼성키보드 기준 화면은 아래 이미지 참고 참고 : https://mong-blog.tistory.com/entry/html-더-나은-사용자-입력을-위한-inputmode-속성
html파일 include 해서 사용하기 수십페이지짜리 프로젝트를 할때, 공통된 영역 (ex. header, footer)을 html 파일마다 코드를 써두면 나중에 혹시라도 공통영역에서 수정사항이 나왔을 때 그 수십 페이지를 다 들어가서 일일히 수정을 해야 하는 불상사가 일어날 때가 있다. 그래서 로컬에서 퍼블리셔가 작업할 때 include 용으로 header, footer는 따로 빼두고 자바스크립트로 include 해서 사용하면 편리하다. php나 java의 include처럼 html파일에서도 다른 파일 include가 가능하다! 다만, 서버통신을 거쳐야 하기 때문에 로컬환경 (ex. .html파일을 열어서 바로 볼때)에서는 안되고, 웹서버 환경 (ex. vscode liver server로 파일 열었을 때)에서만 작동하는 소스다. 그래서 개..
글자수에 따라 ellipsis 처리하기 Setting a max character length 예제 : https://codepen.io/publisherkim/pen/MWZrpYG function ellipsis(elem, max) { elem.each(function () { var textLength = $(this).text().length; var text = $(this).text(); if (textLength > max) { $(this).text(text.substr(0, max - 3) + '…'); }; }); }; // use : ellipsis(selecter, maxlength); ellipsis($('.txt'), 85);
간단한 좋아요 버튼 css 애니메이션 simple like button animation 매우 간단한 linke button animation See the Pen like button animation by publisher.kim (@publisherkim) on CodePen. html like css .btn_like {width: 50px; height: 50px;background: url(https://umings.github.io/images/i_like_off.png) no-repeat center / 50px; cursor: pointer; border:0; font-size:0; margin:50px auto; display:block;} .btn_like.on {background: url(https://umings.github.io/images/i_like_on.png..
간단한 css gradient shadow animation css gradiend animation은 여러군데 활용 할수 있을듯. See the Pen css gradient animation by publisher.kim (@publisherkim) on CodePen. css @keyframes color { 0%,to {background-position: 10% 0;} 50% {background-position: 91% 0;} } .box{margin:20px auto 0; width:300px; height:300px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; position:relative; border-radius:20px;} ..
scroll down button effect only css See the Pen scroll button effect only css by publisher.kim (@publisherkim) on CodePen. html SCROLL css @keyframes deco { 0% {transform: translateY(-56px);} 25% {transform: translateY(0);} 100% {transform: translateY(0);} } @keyframes big { 0% {transform: scale(1);opacity: 1;} 25% {transform: scale(1);opacity: 1;} 50% {transform: scale(2);opacity: 0;} 50.01% {transform: scale(1);opacity: 1;} 75% ..
button hover underline animation only css button에 hover시 텍스트 중간에서부터 언더라인이 scale되는 효과. See the Pen button hover css by publisher.kim (@publisherkim) on CodePen. html LINK1 LINK2 LINK3 LINK4 css .btns{text-align:center; padding:50px 0;} .btn{display:inline-block; color:#000; font-size:17px; margin:0 20px; position:relative;} .btn::after{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; backgrou..
특정 요소에 opacity가 그라데이션으로 희미해지는 css 선택자 { -webkit-mask-image: linear-gradient(to right, black 93%, rgba(0, 0, 0, 0.2) 95%, transparent 97%); mask-image: linear-gradient(to right, black 93%, rgba(0, 0, 0, 0.2) 89%, transparent 97%); } swiper 등에 잘 사용할수 있을듯.
input text with animation label input text에 focus 됬을때 label이 애니메이션 되는 효과, input이 모두 채워졌을때 button에 active 효과 See the Pen input text with animation label by publisher.kim (@publisherkim) on CodePen. html 이름 휴대폰번호 고정값 샘플타이틀 확인 css .form_wrap{width:500px; margin:0 auto;} .form_list li + li{margin-top:7px;} .form_wrap .btn{line-height: 58px;height: 60px;width: 100%;font-size: 20px;font-weight: 600;border-radius: 10px;margin-top: 20..
css 가상요소에 content로 텍스트 넣을때 br 처리 선택자::after{ content: "첫번째줄\A두번째줄"; white-space:pre; }
맨위로
Total : Today :
728x90

티스토리툴바