기본 css에서 :root 설정 및 사용 / reset 및 common 작성

:root 가상 클래스

웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다.

:root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다.

 

즉, html에서 root은 항상 html을 가리킨다.

그러나 html보다 :root 가상 클래스의 스타일 적용 우선순위가 더 높다.

문서 전반적으로 재사용할 임의가 있는 값을 작성한다.

 

:root을 이용해 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다.

이렇게 :root을 사용하여 변수를 사용하게 되면 한 번에 수정이 용이하다.

 

CSS :root 변수 선언

웹 문서에서 공통으로 사용될 속성을 미리 변수에 선언한다.

--(하이픈 2개) 다음 속성 이름을 정해주고 : (콜론) 뒤에 속성 값을 적어준다.

 

:root {

  /* color */
  --color-black: #3f454d;
  --color-white: #ffffff;
  --color-yellow: #fbbe28;

  /* size */
  --base-space: 8px;
  --size-button: 60px;
  --size-border: 4px;
  --font-size: 18px;
}

 

CSS :root 변수 사용

var로 변수를 선언하고, 소괄호 안에 속성 값을 입력한다.

 

.colorBtn {
  font-size: var(--font-size);
  padding: calc(var(--base-space) * 1.8);
  border-radius: var(--size-border);
}

.item {
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  padding: var(--base-space);
  margin-bottom: var(--base-space);
}

 

 

 - reset.css, common.css  세팅 (프로젝트 기본설정)

 reset.css

 - 사용목적 : 여백 초기화

 - 공식문서 접근(링크)

 - 하위 내용 부분을 복사해서 reset.css로 저장

  * a태그 부분 추가(사용자 맘대로)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */

body {
	line-height: 1;
}
ol, ul, li {
	list-style: none;
}

a{
    color: inherit;
    text-decoration: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 

common.css (예시)

 

 - 사용목적 : 색상 등을 저장

:root {
    --dark_red: rgb(205, 0, 0);
    --grey: #777;
    --light_grey: #eee;
    --light_red: rgb(255, 68, 68);
    --active_icon_color: white;
    --button_shadow: rgba(0, 0, 0, .1);
    --inactive_icon_color: #999;
    --level_animation_color: #dbdbdb;
    --listening_icon_color: var(--light_red);
    --text_link_color: rgb(17, 85, 204);
}