HTML | CSS | Javascript
- 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..
- HTML | CSS | Javascript 폰트가 로딩되기 전 화면을 숨기는 가장 간단한 방법 css body { visibility: hidden; } js document.fonts.ready.then(function () { // 폰트가 로드된 후 실행할 코드 document.body.style.visibility = 'visible'; }); 개발단에서 폰트 캐싱 처리 되도록 하는게 가장 좋지만 그게 안된다고 하면 (사실 안될리가 없다 모르는것일뿐) 이렇게 처리할 수도 있다.
- HTML | CSS | Javascript 모바일 기기 해상도 구하기 물리적 해상도와 화면 크기(인치)만 나와있을때, 논리적 해상도 구하는 방법 ( 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..
- HTML | CSS | Javascript 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..
- HTML | CSS | Javascript window가 아닌 div의 스크롤 끝 감지 이벤트 $(document).ready(function() { $('.content').scroll( function() { var elem = $('.content'); if ( elem[0].scrollHeight - elem.scrollTop()
- HTML | CSS | Javascript 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-속성
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..