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 반응형 이미지 비율 유지하기 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 | 그 외 텍스트 나타나는 효과 여러개 https://tobiasahlin.com/moving-letters/ Moving LettersText animated with JavaScript & anime.jstobiasahlin.com 소스도 제공해주고 여러개 참고할만한듯.
-
-
highchart
-
-
- 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에서 보이지 않게 숨김 }]
기타 정보
-
- 기타 정보 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% 이해 가능.
-
