HTML | CSS | Javascript
- HTML | CSS | Javascript intelliJ css 수정사항 실시간 반영 안될때 로컬에서 서버 기동후 css를 수정한 후,아무리 ctrl + f5를 눌러도 반영이 안되고 간혹 서버 재기동을 해야만 반영되어 보일때 해결방안 참고 : https://ynzu-dev.tistory.com/entry/intellij-html-jsp-css-javascript-Live-reload실시간-반영-새로고침적용하기1. Run > EditConfiguration 2. Build and run 옆쪽에 Modify options 클릭 3. On 'Update' action 은 Update trigger file 선택 4. On frame deactivation은 Update resources 선택 5. 서버 재기동
- 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
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..