[html/css]var변수 활용 디자인 가이드 작성

아래 방법을 사용하면 간편하게 디자인 가이드를 수정할 수 있습니다.

 

처음 퍼블리싱을 접하시는 분들은 각각의 텍스트, 라인 등에 똑같은 스타일을 다 각각 스타일을 지정하는 작업을 할 수 있지만 아래처럼 변수로 스타일을 만들어놓으면 같은 형식의 디자인같은 경우 한 번에 색상 및 폰트 크기 등을 간편하게 변경하고 적용할 수 있습니다.

 

1.HTML

<main>
  <section>
    <div class="card">
      <h1 class="mainTitle">첫 번째 타이틀</h1>
      <h2 class="subTitle">첫 번째 서브 타이틀</h2>
      <span class="paragraph">예시용 텍스트 문단입니다.</span>
    </div>
  </section>
  <section>
    <div class="card">
      <h1 class="mainTitle">두 번째 타이틀</h1>
      <h2 class="subTitle">두 번째 서브 타이틀</h2>
      <span class="paragraph">예시용 텍스트 문단입니다.</span>
    </div>
  </section>
  <section>
    <div class="card">
      <h1 class="mainTitle">세 번째 타이틀</h1>
      <h2 class="subTitle">세 번째 서브 타이틀</h2>
      <span class="paragraph">예시용 텍스트 문단입니다.</span>
    </div>
  </section>
</main>

 

2.CSS

*{
  pdding: 0;
  margin: 0;
}

/* 전체 설정 가이드화 */
:root{
  --color-black: #131313;
  --color-gray: #555;
  --color-light-gray: #c1c1c1;
  
  --font-title: 24px;
  --font-sub-title: 19px;
  --font-para: 15px;
  
  --card-border: solid 1px #c9c9c9;
}


main > section{
  width: 100%;
}
main > section .card{
  border: var(--card-border);
  text-align: center;
  padding: 40px 0;
}
main > section .mainTitle{
  color: var(--color-black);
  font-size: var(--font-title);
}
main > section .subTitle{
  color: var(--color-gray);
  font-size: var(--font-sub-title);
}
main > section .paragraph{
  color: var(--color-light-gray);
  font-size: var(--font-para);
}

---

See the Pen Untitled by TytanLee (@TytanLee) on CodePen.