반응형
스킨을 손볼 때 같은 작업을 반복하는 일이 매우 번거롭다.
같은 부분을 찾아서 한꺼번에 바꾸는 방법은 지난 글에 있다.
티스토리 스킨 편집하기
티스토리는 네이버보다 블로그 스킨을 자유롭게 편집할 수 있다. 기본으로 제공하는 스킨을 조금만 손보면 색다른 분위기를 만들 수 있다. 다른 블로그와 똑같은 스킨에 개성을 넣어보자. 글꼴
noneo.tistory.com
이번에는 한꺼번에 바꿀 수 있도록 css를 고쳐보자. 예를 들면 글꼴이나 배경색 따위를 변수로 바꿔서 저장하면 한꺼번에 바꿀 수 있다.
형식은 아래와 같다.
:root { --변수이름: 변수; } ## 변수를 지정한다.
var(--변수이름); ## 변수를 불러들인다.
:root {
--font_01: 'KNPSKkomi-Regular00';
--font_02: 'MaplestoryOTFLight';
--color_01: # f9f9f9;
--color_02: #121212;
--color_03: #ED3D30;
}
찾기 쉽게 CSS 파일 맨 꼭대기에 넣는다. 이제 필요한 부분에 아래와 같이 불러오면 된다.
#header {
font-family: var(--font_02);
font-weight: 200;
position: relative;
border-bottom: 1px solid #e6e6e6;
background-color: var(--color_01);
}
이렇게 편집해 두면 :root에 있는 변수만 바꿔서 쉽게 블로그 분위기를 바꿀 수 있다.
반응형
