:root

Soozynn·2021년 4월 30일

목록 보기

2/4

:root를 말하기 전에! 가벼운 내용이지만,
css를 html문서에서 사용하는 방법 3가지에 대해 정리!

 <head>
 <link rel="stylesheet" type="text/css" href="style.css">
 </head>

흔히 사용하는 방법으로, css파일을 하나 더 만들고 html문서 내에서 href 속성을 통해 외부 stylesheet 파일을 연결시켜준다.

HTML문서내에서 <head>와 </head>사이에 스타일을 정의하는 방법이다

<head>
 <style type="text/css">
  body {font-size:9pt;}
 </style>
</head>

위의 방법들에 비해 적용범위가 더욱 좁아진 형태로, 스타일을 적용하고 싶은 HTML 태그 안에서 정의하는 방법이다

<p style="color:gray;">

드림코딩으로 클론을 따라 만들어보던 중, 엘리님께서 외부스타일시트를 작성할 때에 해당 선택자에 하나하나 스타일 값을 넣어주기보다는 제일 상단에 :root 를 이용하여 변수로 설정해놓으면 나중에 수정하기가 굉장히 쉬워진다는 꿀팁을 알려주셔서 따로 기록해보려고 한다 😎

전역 CSS 변수 선언을 함으로써 아주 유용하게 사용할 수 있다!!

예를 들어,

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

처럼 스타일 값을 변수로 설정해 놓으면!
=> --변수-명: 값;
css에서 적용 시 => :var(--해당변수명-)

  a {
background-color: var(--main-color) //위에 설정해놓은 값처럼 hotpink로 색상이 지정됨
}

이미 변수로 값을 설정해두었기에 상단에서 값을 한 번에 제어가 가능
후에 값을 선택자마다 하나씩 바꾸지 않고 변수 값에서의 스타일만 수정하면 아주 간편하게 유지보수가 가능하다!

CSS