CSS 변수와 함수

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

css 변수는 규모있는 웹사이트의 스타일 코드에서 반복해서 등장하는 값을 재사용할 수 있게 변수로 지정하는 것이다. 이렇게 하면 반복되는 동일한 값을 수정해야 할때 맨 상단에 지정한 변수값만 변경하면 되므로 유지보수가 쉬워진다. 만약 이렇게 하지 않고 상수값으로 작성하면 추후 반복되는 값을 수정해야 하는 경우 같은 작업을 반복해야 한다. 또한, 변수로 지정해둔 값은 개발자나 관리자가 이해할 수 있는 의미있는 값이 되므로 코드 가독성이 좋아진다. 

 

변수 사용이 필요한 경우

/* 색상에 관련된 변수 */
/* 폰트 관련된 변수 */
/* 요소의 크기 관련된 변수 */
/* 애니메이션 관련된 변수 */
/* 위치 관련된 변수 */

 

변수의 정의 

변수명을 정의할때는 맨 앞에 하이픈(-) 두개를 붙여준다. 그리고 음절이 끊기는 부분에는 다시 하이픈(-)으로 음절을 구분해준다. 그리고 주로 스타일 코드 파일 전체에서 사용이 가능하도록 :root 라는 브라우저 전체를 의미하는 의사클래스에 지정해준다.  

:root{
    --primary-color: orange;
    --secondary-color: black;
}

변수의 사용

변수를 사용할때는 var 함수를 이용한다. 

.container {
	background-color: var(--primary-color);
}

 

변수 사용 예제

아래 웹사이트를 보면 버튼에 마우스를 올렸을때 색상과 음식을 나열하는 박스의 색상이 같은 색상이다. 또한 웹페이지의 모든 텍스트가 흰색으로 동일하다. 이러한 경우 아래 스타일 코드와 같이 텍스트 색상과 브랜드 색상을 미리 정의하여 사용할 수 있다. 또한, 텍스트 애니메이션에서 좌우 또는 위아래에 translate 을 주어 일정거리만큼 요소를 이동시키고 있는데 여기에도 동일한 거리가 설정되므로 변수로 지정할 수 있다. 이렇게 하면 추후 텍스트 색상이나 텍스트 애니메이션 거리를 수정해야 하는 경우 스타일 코드 상단의 변수만 수정해주면 된다. 

:root{
  --primary-color: #e73d0c;
  --text-color: #fff;
  --text-offset: 500px;
}
body{
  margin: 0; padding: 0;
  box-sizing: border-box;
}
section{
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://assets.nicepagecdn.com/d2cc3eaa/3955079/images/34.jpg);
  background-size: cover;
  background-position: center center;
  overflow: auto;
}
.position-center{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  /* border: 1px solid yellow; */
}
.text-center{
  text-align: center;
}
section .container{
  width: 100%; min-width: 500px;
  color: var(--text-color);
  max-height: 100%;
  overflow: auto;
}
section .container .title h1{
  font-size: 3rem;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  margin: 60px auto 0;
  animation: 1.5s fadein-to-right;
}
section .container .title p{
  font-size: 1.25rem;
  max-width: 760px; width: 60%;
  display: inline-block;
  animation: 1.5s fadein-to-left;
}
section .container .actions{
  margin-top: 2rem;
}
section .container .actions button{
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
  border-radius: 20px;
  padding: 14px 40px 15px;
  margin: .5rem;
  letter-spacing: .1rem;
  display: inline-block;
}
section .container .actions button:nth-child(1){
  background: var(--text-color);
  color: #333;
  border: none;
  animation: fadein-to-right 1.5s;
}
section .container .actions button:nth-child(2){
  border: 2px solid var(--text-color);
  color: var(--text-color);
  background: transparent;
  animation: fadein-to-left 1.5s;
}
section .container .actions button:nth-child(1):hover{
  background: var(--primary-color);
  border: none;
  color: var(--text-color);
}
section .container .actions button:nth-child(2):hover{
  background: var(--primary-color);
  border: 2px solid var(--primary-color);
}
section .container p{
  font-weight: 700;
  margin-bottom: 3rem;
}
section .container > p a{
  color: var(--text-color);
}
section .container .foods figure{
  display: inline-block;
  background-color: var(--primary-color);
  padding: 60px 50px; margin: 1rem;
  min-width: 150px;
  animation: fade-to-top 1.5s;
  line-height: 2rem;
  font-weight: bold;
  letter-spacing: .2rem;
}
section .container .foods figure img{
  width: 3rem;
}

@keyframes fadein-to-right{
  from{
    transform: scale(0);
    transform: translateX(calc(-1*var(--text-offset)));
  }
  to{
    transform: scale(1);
    transform: translateX(0);
  }
}
@keyframes fadein-to-left{
  from{
    transform: scale(0);
    transform: translateX(var(--text-offset));
  }
  to{
    transform: scale(1);
    transform: translateX(0);
  }
}
@keyframes fade-to-top {
  from{
    opacity: 0;
    height: 0;
    min-width: 0px;
    transform: scale(0);
    transform: translateY(var(--text-offset));
  }
  to{
    opacity: 1;
    height: 100%;
    min-width: 150px;
    transform: scale(1);
    transform: translateY(0);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>회원가입 페이지</title>
  <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <div class="container position-center">
      <article class="title text-center">
        <h1>Made fresh to order</h1>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit</p>
      </article>
      <div class="actions text-center">
        <button>view menu</button>
        <button>order online</button>
      </div>
      <p class="text-center">Image from <a href="#">Freepik</a></p>
      <article class="foods text-center">
        <figure>
          <img src="data:image/png;base64,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" alt="">
          <figcaption>PIZZA</figcaption>
        </figure>
        <figure>
          <img src="data:image/png;base64,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" alt="">
          <figcaption>PASTA</figcaption>
        </figure>
        <figure>
          <img src="data:image/png;base64,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" alt="">
          <figcaption>BURGERS</figcaption>
        </figure>
        <figure>
          <img src="data:image/png;base64,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" alt="">
          <figcaption>APPETIZERS</figcaption>
        </figure>
      </article>
    </div>
  </section>
</body>
</html>

 

* 다른 예제

html, body{
    margin: 0; padding: 0;
    box-sizing: border-box;
  }
  body{
    height: 200vh; 
    display: flex;
    flex-direction: column;
  }
  header, footer{
    height: 70px;
    flex: none;
  }
  main{
    flex: 1;
    /* background: brown; */
    display: flex; 
    margin-top: 70px; 
  }
  
  /* 헤더영역 */
  header img{
    width: 50px;
    height: 50px;
  }
  header{
    display: flex;
    justify-content: space-between;
    align-items: center; 
    position: fixed; 
    top: 0; left: 0; right: 0; 
    z-index: 1; 
    background-color: #fff; 
  }
  header > nav > ul{
    display: flex;
    gap: 3rem;
    list-style: none;
    margin-right: 2rem;
  }
  a{
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }
  header > a{
    display: flex;
    align-items: center;
    transition: .3s;
  }
  header > a:hover{
    color: brown;
  }
  header > nav > ul > li{
    position: relative;
    display: flex; 
    flex-direction: column; 
  }
  header > nav > ul > li::before{
    position: absolute; bottom: -5px; 
    content: '';
    width: 0; height: 5px;
    border-radius: 10px; 
    background: brown;
    transition: .3s;
  }
  header > nav > ul > li:hover::before{
    width: 100%;
  }
  header > nav > ul > li > ul{
    display: none;
  }
  header > nav > ul > li:hover > ul{
    display: block;
    margin: 0; padding: 0; 
    list-style: none; 
    position: absolute; 
    top: 250%; width: auto; 
    background: brown; padding: .5rem .5rem; 
  }
  header > nav > ul > li > ul > li > a{
    color: #fff;
  }
  
  /* 메인영역 */
  main aside{
    width: 300px;
    flex: none;
    /* border: 1px solid red; */
  }
  main section{
    flex: 1;
    /* border: 1px solid green; */
  }
  main section .slider .slide{
    width: 100%;
    height: 100%;
    flex: none; 
    scroll-snap-align: center; 
  }
  main section .slider img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  main section .slider{
    width: 90%; height: 700px; 
    margin: 2rem auto;
    /* border: 3px solid brown; */ 
    display: flex; 
    overflow-x: auto; 
    overflow-y: hidden; 
    scroll-snap-type: x mandatory;  
  } 
  main section .slider::-webkit-scrollbar {
    height: 8px;  
  }
  
  main section .slider::-webkit-scrollbar-thumb {
    height: 30%; 
    background: #d8792b; 
    border-radius: 20px;
  }
  
  main section .slider::-webkit-scrollbar-track {
    background: rgba(235, 185, 93, 0.3);  
  }
  
  /* 사이드바 영역 */
  main aside nav ul{
    list-style: none;
    padding: .5rem; margin: 2rem;
  }
  main aside nav{
    background-color: #d8792b;
    position: sticky; top: 70px; /* 추가 */
  }
  main aside nav ul li a{
    color: #fff;
  }
  
  /* 푸터 영역 */
  footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    border-top: 1px solid #777;
    margin: 0 auto;
    padding: .5rem 0;
  }
  footer .rights{
    font-weight: 400;
  }
  footer .icons{
    font-size: 1.5rem;
  }
  footer .icons i{
    margin-right: .5rem;
    transition: .3s;
  }
  footer .icons i:hover{
    color: brown;
    transform: scale(1.2);
  }
  body > span{
    position: fixed;
    bottom: 2rem; right: 1rem;
    z-index: 1;  
    font-size: 2.5rem;
    cursor: pointer;
    transition: .3s;
  }
  body > span:hover{
    transform: translateY(-10px);
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플럭스박스</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <a href="#">
            <img src="logo.avif" alt="logo">
            sunblocks
        </a>
        <nav>
            <ul>
                <li>
                    <a href="#">home</a>
                    <ul>
                        <li><a href="#">sub1sub1sub1</a></li>
                        <li><a href="#">sub2</a></li>
                        <li><a href="#">sub3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">about</a>
                    <ul>
                        <li><a href="#">sub1</a></li>
                        <li><a href="#">sub2</a></li>
                        <li><a href="#">sub3</a></li>
                        <li><a href="#">sub4</a></li>
                        <li><a href="#">sub5</a></li>
                        <li><a href="#">sub6</a></li>
                    </ul>
                </li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <div class="slider">
                <div class="slide">
                    <img src="slide-1.jpg" alt="slide-1">
                </div>
                <div class="slide">
                    <img src="slide-2.jpg" alt="slide-2">
                </div>
                <div class="slide">
                    <img src="slide-3.jpg" alt="slide-3">
                </div>
            </div>
        </section>
        <aside>
          <nav>
            <ul>
              <li><a href="#">sidemenu1</a></li>
              <li><a href="#">sidemenu2</a></li>
              <li><a href="#">sidemenu3</a></li>
            </ul>
          </nav>
        </aside>
    </main>
    <footer>
      <div class="icons">
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-facebook"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>
      <div class="rights">All Rights Reserved By Sunblocks.</div>
    </footer>
    <span>
      <i class="fa-solid fa-circle-arrow-up"></i>
    </span>
</body>
</html>

현재 해당 코드에서는 개선할 점이 있다. 예를 들면, 헤더 높이를 의미하는 70px 이라는 값이 스타일코드 전체에서 여러번 반복된다. 이를 css 변수로 변경해보자! 그리고 웹페이지의 주요색상과 부색상도 변수로 선언하고, 재사용하면 추후 헤더높이나 주요색상의 변경사항이 있을때 스타일코드 전체가 아니라 변수만 변경하면 된다. 

:root{
    --header-height: 70px;
    --primary-color: brown;
    --secondary-color: #d8792b;
}

html, body{
    margin: 0; padding: 0;
    box-sizing: border-box;
  }
  body{
    height: 200vh; 
    display: flex;
    flex-direction: column;
  }
  header, footer{
    height: var(--header-height);
    flex: none;
  }
  main{
    flex: 1;
    /* background: brown; */
    display: flex; 
    margin-top: var(--header-height); 
  }
  
  /* 헤더영역 */
  header img{
    width: 50px;
    height: 50px;
  }
  header{
    display: flex;
    justify-content: space-between;
    align-items: center; 
    position: fixed; 
    top: 0; left: 0; right: 0; 
    z-index: 1; 
    background-color: #fff; 
  }
  header > nav > ul{
    display: flex;
    gap: 3rem;
    list-style: none;
    margin-right: 2rem;
  }
  a{
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }
  header > a{
    display: flex;
    align-items: center;
    transition: .3s;
  }
  header > a:hover{
    color: var(--primary-color);
  }
  header > nav > ul > li{
    position: relative;
    display: flex; 
    flex-direction: column; 
  }
  header > nav > ul > li::before{
    position: absolute; bottom: -5px; 
    content: '';
    width: 0; height: 5px;
    border-radius: 10px; 
    background: var(--primary-color);
    transition: .3s;
  }
  header > nav > ul > li:hover::before{
    width: 100%;
  }
  header > nav > ul > li > ul{
    display: none;
  }
  header > nav > ul > li:hover > ul{
    display: block;
    margin: 0; padding: 0; 
    list-style: none; 
    position: absolute; 
    top: 250%; width: auto; 
    background: var(--primary-color); padding: .5rem .5rem; 
  }
  header > nav > ul > li > ul > li > a{
    color: #fff;
  }
  
  /* 메인영역 */
  main aside{
    width: 300px;
    flex: none;
    /* border: 1px solid red; */
  }
  main section{
    flex: 1;
    /* border: 1px solid green; */
  }
  main section .slider .slide{
    width: 100%;
    height: 100%;
    flex: none; 
    scroll-snap-align: center; 
  }
  main section .slider img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  main section .slider{
    width: 90%; height: 700px; 
    margin: 2rem auto;
    /* border: 3px solid brown; */ 
    display: flex; 
    overflow-x: auto; 
    overflow-y: hidden; 
    scroll-snap-type: x mandatory;  
  } 
  main section .slider::-webkit-scrollbar {
    height: 8px;  
  }
  
  main section .slider::-webkit-scrollbar-thumb {
    height: 30%; 
    background: var(--secondary-color); 
    border-radius: 20px;
  }
  
  main section .slider::-webkit-scrollbar-track {
    background: rgba(235, 185, 93, 0.3);  
  }
  
  /* 사이드바 영역 */
  main aside nav ul{
    list-style: none;
    padding: .5rem; margin: 2rem;
  }
  main aside nav{
    background-color: var(--secondary-color);
    position: sticky; top: var(--header-height); /* 추가 */
  }
  main aside nav ul li a{
    color: #fff;
  }
  
  /* 푸터 영역 */
  footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    border-top: 1px solid #777;
    margin: 0 auto;
    padding: .5rem 0;
  }
  footer .rights{
    font-weight: 400;
  }
  footer .icons{
    font-size: 1.5rem;
  }
  footer .icons i{
    margin-right: .5rem;
    transition: .3s;
  }
  footer .icons i:hover{
    color: var(--primary-color);
    transform: scale(1.2);
  }
  body > span{
    position: fixed;
    bottom: 2rem; right: 1rem;
    z-index: 1;  
    font-size: 2.5rem;
    cursor: pointer;
    transition: .3s;
  }
  body > span:hover{
    transform: translateY(-10px);
  }