CSS 방법론

현재 CSS 방법론이라고 사람들이 말하는 것은 크게 3가지로 구분됩니다. 해당 방법론이 무엇이고 어떠한 장점과 단점을 가지고 있는지 알아봅니다. 3가지 방법론 중 무엇 하나 정답이라고 말할 수 없으며 공부를 하다 보면 자신에게 맞는 방법론이 보이게 됩니다. 그 방법론을 프로젝트에 맞게 또 공통 가이드화 하여 협업이 용이하게 사용하는게 더 중요합니다. 왜 CSS 방법론을 사용할까요? 협업 시 사람마다 다른 코드 구조 및 스타일 정의 (방법론을 사용하는 이유는 첫 번째 이유가 가낭 크다고 생각합니다.) 서로 다른 네이밍 규칙 유지보수가 어려운 코드 타인이 작성한 코드를 이해하고 분석하는데 드는 시간의 증가 복잡해지는 선택자 등 위 이유 이외에도 추가적으로 더 있을 수 있다. 코드의 규칙성(획일성)을 확보하기..

2022.12.07

google webFont loader

google web font loader CSS가 로드되기 전에 폰트가 로드되길 원하고, 스타일되지 않은 텍스트가 번쩍거리지 않게 하려면 웹 폰트 로더를 사용하라. 웹 폰트 로더는 사이트가 로드되기 전에 로드되고, 스타일되지 않은 텍스트가 번쩍이는 것을 확실하게 방지한다. 비동기 스크립트도 사용할 수 있지만, 폰트가 먼저 로드되는 것을 확실하게 하기 위해 동기 스크립트를 사용하는 것이 좋다. 사용하기 Web Font Loader 라이브러리를 사용하려면 페이지에 포함하고 로드할 글꼴을 지정하기만 하면 된다. Web Font Loader는 jsDelivr 및 CDNJS CDN에서도 사용할 수 있다. https://www.jsdelivr.com/package/npm/webfontloader https://gi..

2022.12.07

SVG 도넛차트

도넛 모양의 차트를 구현한 일이 있었는데, 디자인 상의 그라데이션과 100% 채워졌을때의 디자인이 일반 SVG 도넛차트와 달라서 여러 방법으로 테스트를 하던 중, 비슷한 라이브러리를 찾아 구현할 수 있었다. chart sample chart sample https://github.com/aluvy/chart-donutgauge GitHub - aluvy/chart-donutgauge Contribute to aluvy/chart-donutgauge development by creating an account on GitHub. github.com https://aluvy.github.io/chart-donutgauge/ Radial/Ring/Circle Progress Chart Generator fo..

2022.12.05

마우스 커서 변경하기

이미지를 마우스 커서로 사용하기 CSS 커서 속성을 이용해 이미지 파일을 마우스 커서로 설정해서 사용할 수 있다. cursor: url('주소'), 속성값; 커서 속성 값url 중 마지막에 "auto" 속성 값은 비트맵 이미지 커서를 가져올 수 없는 경우 최종적으로 적용하는 커서 속성값이다. 커서 속성값은 쉼표로 구분해서 여러 개를 나열할 수 있으며, 왼쪽부터 순서대로 적용 가능한 커서 속성 값을 우선 적용한다. body { cursor: url('/resources/assets/images/icon/arrow_cusor_1.cur'), pointer;} 이모지를 마우스 커서로 사용하기 비트맵 이미지를 직접 만들어 사용하는 것 보다 이모지를 사용하면 조금 더 간편하게 마우스 커서를 변경할 수 있다. 사용..

2022.11.18

모바일 환경에서의 vh

문제인식 프로젝트 진행 중 전체화면을 만들기 위해 100vh를 사용했다. PC환경에서 테스트 할 때에는 문제가 없었지만, 실제 모바일 기기에서 브라우저로 접속 후 확인했더니 세로 스크롤이 생기는 버그가 있었다. vh는 viewport height에 해당하는 단위로, 해당 브라우저의 높이에 따라 상대적으로 적용되는 단위다. 예를 들어, 화면의 높이가 100px이라면 1vh는 1px이 된다. 원인 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간(이 영역은 스크롤 방향에 따라 가변적)을 포함하기 때문이었다. 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간을 포함한다. URL바는 상황에 따라 보여지거나 없어지는 경우가 있는데, 100vh는 그에 따라 다시 측정되지 않는다. 해결 모바일 ..

2022.11.17

[CSS] scrollbar webkit

.sports_wide_right::-webkit-scrollbar{width:3px;} .sports_wide_right::-webkit-scrollbar-thumb{width:30%; background:#ffc6c6; border-radius: 10px;} .sports_wide_right::-webkit-scrollbar-track {background:var(--bgalphacolor1);} body::-webkit-scrollbar{width:5px} body::-webkit-scrollbar-thumb{height:30%;background:rgba(0,0,0,.4);border-radius:10px} body::-webkit-scrollbar-track{background:rgba(33,1..

2022.09.07