CSS
-
CSS 변수 사용 및 javascript로 동적 수정 방법IT/CSS 2021. 10. 25. 10:43
CSS 변수 설정 및 사용법은 아래와 같다. /* 전역 변수 설정 --변수명:값 */ :root { --my-favorite-color: blueviolet; } /* 변수의 element 적용 var(변수명) */ .my-element { background-color: var(--my-favorite-color); } 그럼, 동적으로 변경을 할 수 있을까? javascript에서 css 변수 조회 및 변경을 위해 아래와 같은 함수를 지원한다. // 인라인 스타일에서 변수 얻기 document.documentElement.style.getPropertyValue("--my-favorite-color"); // 어느 곳에서나 변수 얻기 getComputedStyle(document.documentElem..
-
픽셀에서 REM 계산 하는 법IT/CSS 2021. 10. 7. 09:50
폰트 크기를 REM 으로 지정하는 경우, 정확한 크기를 알고 싶을 때가 있다. 디자이너가 px 단위로 줄 경우 그러지 않을까? 그럼, 픽셀을 어떻게 REM 으로 변경할 수 있을까? html{ font-size:16px; } 위와 같이 root 가 16px 인 경우 계산식은 아래와 같다. // 계산 방법 = 지정할 픽셀 / Root 픽셀 8px = 8/16 = 0.5 rem; 16px = 16 / 16 = 1 rem; 20px = 20 / 16 = 1.25 rem; 32px = 32 / 16 = 2 rem; html{ font-size:16px; } /* 20px 크기를 주고 싶을때 */ h3{ font-size:1.25rem; }
-
CSS background dots 처리하기IT/CSS 2021. 10. 1. 08:47
배경을 dots(점)으로 처리하고 싶을때가 있다. 보통 background에 이미지를 사용하여 처리하기도 하는데, 이미지 없이 구현하는 법이 있다. SCSS $bg-color: hsl(256,33,10); /*배경색*/ $dot-color: hsl(256,33,70); /*dot색*/ /* 점영역 크기 */ $dot-size: 1px; /*점 크기*/ $dot-space: 22px;/* 점 간격 */ body { background: linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center, linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) ce..