HTML | CSS | Javascript
- HTML | CSS | Javascript webp와 png 동시에 사용하기 브라우저 지원 여부를 확인해 webp를 지원하는 브라우저에서는 webp를, 아닌곳에서는 png를 로드 https://fourwingsy.medium.com/webp-이미지-사용하기-dde09ae6500f WebP 이미지 사용하기 구글에서 개발한 WebP는 이미지를 손실 압축하는 대신 용량을 획기적으로 줄여주는 이미지 포맷입니다. JPEG 포맷보다 압축률이 30% 정도 높다고 하지만, 제가 생각하는 최대의 장점은 PNG를 사용해 fourwingsy.medium.com
- HTML | CSS | Javascript 모바일에서 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 | Javascript 반응형 이미지 비율 유지하기 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% 어디선가 보고 적어놨었는데 출처를 모르겠다 ㅠㅠ
- HTML | CSS | Javascript 모바일에서 클릭시 연한 파란색 bg 없애기 https://gahyun-web-diary.tistory.com/77 [CSS]모바일에서 영역 클릭시 생시는 파란 박스 없애기 -- 모바일이나 웹에서 테두리가 생긴다면... 아웃라인만 없애주면 된다. input:focus{ outline:none; } 그런데 모바일에서는 하이라이트생기는 경우가 있다. IOS(아이폰,,아이패드 등..), Android 등의 웹킷 gahyun-web-diary.tistory.com
- HTML | CSS | Javascript swiper 옵션 정리 잘된 글 https://velog.io/@leejpsd/Swiper-%EC%98%B5%EC%85%98-%EC%A0%95%EB%A6%AC Swiper 옵션 정리 그동안 늘 캐러셀을 구현하기 위해 swiperjs 라이브러리를 사용했었다.다행히도 입사한 회사에서도 swiperjs를 쓰고 있기에 어렵지 않게 적용하였다.이참에 옵션들을 정리 해보려 한다.초기화 설정 velog.io
- HTML | CSS | Javascript 스크롤바 위치 상하 반전시키기 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..
Codepen | 그 외
- Codepen | 그 외 hover 영역만 스포트라이트(?)같은 효과 Magical Hover Effect (w/ Tutorial) https://codepen.io/Hyperplexed/pen/MWQeYLW See the Pen Magical Hover Effect (w/ Tutorial) by Hyperplexed (@Hyperplexed) on CodePen.
- Codepen | 그 외 GSAP ScrollTrigger - Demo 회사 홈페이지 만들때 쓰긴 썼지만 어려운 ㅠㅠ scrolltrigger https://codepen.io/noeldelgado/pen/BaogqYy See the Pen GSAP ScrollTrigger - Demo by Noel Delgado (@noeldelgado) on CodePen.
- Codepen | 그 외 The aurora (only CSS) 텍스트에 그라데이션 효과가 움직이는듯한 css https://codepen.io/ostylowany/pen/vYzPVZL See the Pen 🌌 The aurora (only CSS) by Ostylowany (@ostylowany) on CodePen.
highchart
- highchart label이 있는 gauage차트 highchart guage chart with label See the Pen highchart guage chart with label by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size:..
- highchart 5단계 gauage chart highchart 5steps guage chart See the Pen highchart 5steps guage chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size: '15..
- highchart series 팁 (차트 hover액션 false / legend와 차트 영역에서 숨기기) series: [{ name: '데이터1', data: [100, 70], enableMouseTracking: false, // 차트에 mouseover 액션 false }, { name: '데이터2', data: [50, 20], // 데이터 값 설정 visible: false, // 초기에 차트영역에서 숨김 "showInLegend": false, // legend에서 보이지 않게 숨김 }]
기타 정보
- 기타 정보 파워포인트 저장할 수 없는 글꼴 오류 (글꼴 한번에 바꾸기) 오류 내용 1. 다른사람이 작성한 ppt에 추가 작업을 할 때, 저장시 저장옵션에서 '파일의 글꼴 포함' 체크하고 저장할때 '프레젠테이션에 저장할 수 없는 글꼴이 있습니다' 라는 오류가 종종 뜬다. 2. ppt에 기본 내장되어 있는 '글꼴 바꾸기' 기능으로는 '더블바이트 글꼴을 싱글바이트 글꼴로 바꿀수 없다~' 의 오류가 뜬다. 해결방안 1. 작업한 파일을 다른이름으로 저장 해서 .xml 파일로 저장 2,. 메모장으로 .xml파일 열기 3. 메모장에서 ctrl + H (편집) 으로 글꼴 바꾸기 (바꿀내용 기재 후 모두바꾸기 클릭, 저장) - ex. 찾을내용 : Noto Sans KR (오류난 글꼴) / 바꿀 내용 : Pretendard (오류 안나는 글꼴) 4. 저장된 .xml파일을 파워포인트에서 열고 ..
- 기타 정보 CSS 방법론 BEM https://velog.io/@solmii/CSS방법론1-BEM-a.k.a작명소 CSS방법론1 - BEM (a.k.a작명소) Portfolio 사이트를 작업하는 동안 BEM을 지키면서 class명을 짓기로 했다! 그래서 정리하게 된 CSS 방법론 중 하나인 BEM! velog.io 퍼블리셔의 숙명인 classname 작명에 대한 규칙. 많이 들어는 봤지만 우리 회사에서 실제로 도입하진 않았다. 우린 형태_의미_순서_상태로 현재 네이밍 중이다. 외국 사이트 보면서 언더바가 두개 붙어있는게 무슨 의미지? 왜 저렇게쓰지 ? 왜 하이픈과 언더하이픈을 같이 혼용하지? 싶었는데, 이 글을 보니 어떤 의미인지 100% 이해 가능.
- 기타 정보 gsap 공부 관련 링크 모음 안쓰는 곳이 없는 그 플러그인, gsap. 4~5년 전에 다니던 회사에서 홈페이지를 만들때 애니메이션 효과를 위해 gsap의 tweenmax를 써본적이 있다. 그런데 그 이후로 한번도 사용할 일이 없다보니 사용방법을 자연스럽게 까먹어버림. 몇년 사이에 사용 방법도 좀 달라진것 같고. gsap와 함께 사용되는 플러그인들도 되게 다양한데, 기본적인 gsap 사용방법과 가장 자주 쓰이는 스크롤트리거 관련된 공부를 해봐야겠다. gsap 라이센스 (무료) https://gsap.com/community/standard-license/ Standard License Plain English Summary: You may use the code at no charge in commercial or non-commer..