반응형

css variable 2

[CSS] CSS 변수 사용하기

CSS 변수 사용하기 CSS 변수란 ? 사용자 지정 변수로 CSS의 속성을 미리 정의해놓고, 여러 곳에서 사용할 수 있는 변수를 의미합니다. 웹사이트에서는 보통 많은 양의 CSS를 가지고 있습니다. color나 size 등의 많은 값이 반복적으로 사용이 됩니다. 이때, CSS변수를 사용해주면 반복되는 코드를 줄일 수 있습니다. 또한, 같은 색상을 여러 곳에서 사용을 했을때 색상의 값을 바꿔야 하는 상황이 온다면 일일이 값을 변경해줘야 합니다. 하지만 CSS 변수를 사용하면 선언해 준 변수의 값만 바꿔주면 되기 때문에 수고로움을 덜을 수 있습니다. 또한, 변수의 명을 따로 지정해주기 때문에 더 직관적이고 가독성있게 코드를 확인할 수 있습니다. " target="_blank" rel="noopener">pa..

Web/CSS 2021.04.14

[CSS] :root 가상선택자를 통한 css 변수, IE 적용방법

익스플로러(IE)의 CSS변수 해결방법 root의 가상 선택자를 통해 css 변수를 사용하는 경우가 있습니다. 반복되는 css 코드 값의 반복을 줄여주기 때문에 코드 관리도 쉽고 유지보수 측면에도 좋습니다. 하지만 우리의 익스플로러는 역시 적용이 안됩니다. ^^ css 변수의 사용법을 모르신다면, 아래의 포스팅을 참고해주세요. eunyoe.tistory.com/entry/CSS-CSS-%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 브라우저 호환성 익스플로러 빼고 다 호환이 되네요 :) 기껏 변수를 통해 적용했는데 ie 때문에 변수가 아닌 새로운 기존의 스타일을 추가하는 건 너무 비효율적이기 때문에 오늘은 간단하게 변수 css를 ie에 적용시키는 법을 ..

Web/CSS 2021.04.14
반응형
Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]