CSS 변수 (CSS 사용자 정의 속성)

CSS 변수는 예전에는 Sass나, LESS, Stylus와 같은 CSS 전처리기(CSS preprocessor)를 통해서 접할 수 있었던 기능이었습니다. 하지만 최근에는 CSS 스펙 자체에 CSS 변수 개념이 추가되어 이제 CSS 전처리기 없이도 부담없이 CSS 변수를 사용할 수 있게 되었는데요.


이번 영상에서는 CSS 사용자 정의 속성(CSS custom properties)라고도 알려진 CSS 변수(CSS variables)를 어떻게 사용하는지 다양한 실습을 통해서 알아보겠습니다.


• CSS 변수 정의

• CSS 변수 접근

• CSS 변수 기본값

• CSS 변수 상속

• CSS 전역 변수

• 주의 사항


📺 동영상: https://youtu.be/ogvuKmplOcU

📝 포스팅: https://www.daleseo.com/css-variables/

🧑‍💻 실습 코드: https://codepen.io/daleseo/pen/xxqjjwv


CSS의 선택자와 결합자에 대해서는 아래 게시물에서 자세히 다루고 있으니 참고 바랍니다.

📕 CSS 기본 선택자 (selector): https://careerly.co.kr/comments/106255

📗 CSS 결합자(combinator)로 선택자 조합하기: https://careerly.co.kr/comments/107107

CSS 변수 (CSS 사용자 정의 속성)

www.youtube.com

CSS 변수 (CSS 사용자 정의 속성)

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 6월 30일 오후 8:08

 • 

저장 9조회 2,802

댓글 0

    함께 읽은 게시물

    자바스크립트는 왜 프로토타입을 선택했을까

    객체지향을 구현하는 방법으로 대표적으로는 클래스가 있습니다. 그런데 자바스크립트는 왜 클래스가 아닌 프로토타입으로 객체지향을 구현하였을까요? 자바스크립트는 왜 다른 언어에는 흔하지 않는 개념인 호이스팅, this, 실행컨텐스트 같은것들이 있을까요? 링크된 글에는 왜 자바스크립트가 프로토타입을 선택했는지, 호이스팅 및 this 같은 개념들이 있는지 철학적인 이유와 함께 비교적 명쾌하게 알려줍니다. 꽤 재미있는 내용이고 유명한 아티클 이니 아직 안보신분들은 한번씩 보시는걸 추천드립니다

    자바스크립트는 왜 프로토타입을 선택했을까

    Medium

    자바스크립트는 왜 프로토타입을 선택했을까

     • 

    저장 68 • 조회 2,791


    길은 잃은 이력서

    

    ... 더 보기

     • 

    저장 7 • 조회 803


    "배포했으면 스펙이지"

    어떤 서비스가 버그를 가진채로 출시되었고, 사용자들이 그 버그를 전제로 기능을 사용하고 있다면, 그리고 그 위로 너무 많은 새로운 기능들이 쌓여있다면 그건 버그가 아니라 스펙(기능)이라는, 언젠가부터 들었던 업계의 유명한 블랙 유머다.

    ... 더 보기

    바이브 코딩 - 개발자들이 하는거


    바이브 개발 - 일반사람이 하는거


    ... 더 보기

    2019년에 저희 팀에서 퍼블리싱한 CHI 논문. 음성 인터페이스 입코딩을 이용한 프로그래밍 교육.

    ... 더 보기