-
[css 꿀팁]-1 css내에서 변수사용하기Html,CSS 2021. 6. 15. 09:54728x90
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root { --my-color-1: red; } .x { color: var( --my-color-1 ); } </style> </head> <body> <h1 class="x">Lorem Ipsum Dolor</h1> </body> </html>css에서 공통부 선언할때 주로 사용하면 좋을것 같다.
—main-width : 900px; —mobile-padding: 0px 24px;예를들어 이렇게 공통적으로 메인으로 잡혀있는 css들을 main에 있는 width크기를 950으로 바꿔 달라고 하면
일일이 찾아서 들어가서 바꿨는데 저런식으로 공통선언을 하게되면 편하게
—main-width : 950px; —mobile-padding: 0px 20px;이렇게 바꿀 수 있다.!!! ( 공통적으로 쓰는 패딩이나, 큰 레이어 공통적으로 쓰는 구도 잡을때 공통선언 해놓으면 될듯)
또 다른예) :root { --font-bold : 600, --font-nomal : 200, } .x { font-weight: var( --font-bold ); }폰트 weight관련해서 쉽게 바꿀때 사용.
그리고 메인으로 들어가는 공통색만 몇개 정해놓고 쓰면 좋음. 디자이너랑 협업하게되면 그부분들은 다 묶어놓을거라 나중에 수정할때 색 바꾸면 다 바뀔수도있다고 미리 얘기해놓으면 디자이너도 공통색상부분은 좀 신경써줌
728x90'Html,CSS' 카테고리의 다른 글
이미지파일에 CORB문제 (2) 2022.02.03 [CSS꿀팁 ] -2 클래스명명 규칙 (0) 2021.06.16 테이블 여러행 고정 하는 방법 (0) 2021.04.22 CSS - :not()에대해 (0) 2020.10.27 document 객체 이동 (0) 2020.09.28