profile
빵굽는 프론트엔드 개발자
태그 목록
전체보기 (77)JavaScript(32)자바스크립트(25)리액트(15)CSS(9)위코드(8)라이브러리(7)React(6)프로미스(6)html(5)WeCode(5)토이프로젝트(5)promise(4)Fetch API(4)DOM(4)코드카타(4)material ui(4)알고리즘(4)차트(4)그래프(3)프로젝트(3)Fetch(3)toy project(2)Recharts(2)async(2)비동기(2)node.js(2)useEffect(2)vue(2)await(2)responsive web(2)콜백함수(2)Math.random(2)팀프로젝트(2)인스타그램(2)팀워크(1)lottie(1)date picker(1)XMLHTTPRequest(1)(1)무한루프(1)반응형 웹(1)프론트엔드(1)기업협업(1)localhost(1)moment(1)Exchange Rate(1)Responsive Website(1)레거시(1)VanillaJS Toy Project(1)반응형 웹사이트(1)안녕히계세요 여러분 짤(1)포트폴리오(1)keydown(1)이벤트 캡쳐링(1)가위바위보(1)Hangman(1)회고록(1)Unary Operator(1)스위치(1)중복제거(1)promise chain(1)getElementById(1)toLowerCase(1)toUpperCase(1)단항 연산자(1)티스토리(1)select(1)callback Hell(1)삼항연산자(1)타입(1)vuex(1)inline block(1)setTimeout(1)테이블(1)axios(1)인턴(1)버튼(1)hook(1)스프레드 연산자(1)전역변수(1)localstorage(1)block(1)에어비앤비(1)개발자(1)inline(1)InnerHTML(1)Movie Booking(1)spread operator(1)proptypes(1)youtube(1)addEventListener(1)ipinfo(1)노드JS(1)조건부렌더링(1)starbucks(1)db(1)slice(1)RDBMS(1)semantic web(1)이벤트 버블링(1)행맨게임(1)vue-lottie(1)Nivo(1)ES6(1)mutations(1)modal(1)set(1)charAt(1)git(1)register page(1)HTTP Request(1)Promise Chaining(1)keypress(1)숫자변환(1)로띠(1)scss(1)콜백지옥(1)Root(1)프로미스체인(1)semantic tag(1)환율계산기(1)uuid(1)클론코딩(1)BEM(1)속성값(1)바닐라js(1)querySelector(1)싱글스레드(1)노드(1)슬라이더(1)catch(1)clone coding(1)코드 리팩토링(1)웹개발(1)

[CSS]:root 를 이용해서 CSS 커스텀 속성 (전역변수) 정의하고 사용하는 법

CSS 커스텀 속성은 CSS 파일 가장 위에 :root{}와--를 이용해서 폰트 색상이나 사이즈 등 전역으로 사용할 CSS 속성을 먼저 정의해주는 것이다. 기업의 색상, 폰트 등 가이드라인이 있는 경우 이렇게 먼저 설정해 주면 협업과 유지보수에 용이하다. 다음 두 예시를 살펴보자. 1. CSS 커스텀 속성을 사용하지 않은 코드 위의 코드는 길이가 짧음에도 불구하고 border-color나 color에서 동일한 컬러 속성이 겹치는 것을 알 수 있다. 그렇지만 만약 만 줄의 코드라면? 클라이언트 측에서 전체 컬러를 바꿔달라는 요청이 들어온다면? 스타벅스의 초록색이나 맥도날드의 빨간색과 노란색처럼 기업의 브랜드 컬러는 웹에서 다양한 곳에서 쓰이는데, 쓰이는 곳에서마다 새로 컬러값을 써 줘야 한다면 작성도 리팩토링도 어려워질 것이다. 2. CSS 커스텀 속성을 사용한 코드 2-1. 커스텀 속성 정의하기 :root{}에서 커스텀 속성을 정해준다. 커

2020년 11월 7일
·
0개의 댓글
·