css의 변수를 설정함으로써 하나하나 값을 바꾸지않고 변수 값만 바꿈으로써 전체를 바꿔줄수있다.

기본구조

–변수명

ex) –font-size : 32px.

사용할 때) font-size: var(–font-size)

  • html

        <ul class="first-list">
          <li>Orange</li>
          <li>Apple</li>
        </ul>
            
        <ul class="second-list">
          <li>Korean</li>
          <li>Japan</li>
          <li>China</li>
      </ul>
    
    • 변수 적용 전 CSS

        		.first-list {
              background-color : thistle;
              color: whitesmoke;
              margin-left: 8px;
            }
            .second-list {
              background-color : thistle;
              color: whitesmoke;
              margin-left: 16px;
            }
              
      
      • Output.ver1

    • 변수 적용 후 CSS

      		//추가
      		:root{
            --font-size:32px
      		}
      		.first-list {
            background-color : thistle;
            color: whitesmoke;
            margin-left: 8px;
            //추가
            font-size:var(--font-size)
            //기본값이 없을 경우 8 지정
            //font-size:var(--font-size, 8px)
          }
          .second-list {
            background-color : thistle;
            color: whitesmoke;
            margin-left: 16px;
            //추가 변수의 2배 사이즈
            font-size:calc(var(--font-size) *2)
          }
      
      • Output.ver2

주의

코드내 수정은 다음과 같이 @media에서만 정할 수 있다.

:root{
      --font-size:32px
		}

@media screen and (max-width:768px){

	:root{

	--font-size:7px

	}

}

CSS

댓글 쓰기