일반적으로 CSS문서에서 사이트를 구축할 때, 다양한 CSS파일이 사용됩니다.
그래서 CSS에서 이를 간단하게 변수를 선언하여 사용하면 좀 더 쉽게 작업 가능합니다!!
1. :root 의사 클래스
:root는 문서 트리의 루트 요소를 선택하며, HTML의 루트 요소는 <html>이므로, :root와 html은 같습니다.
2. CSS 변수사용
:root 내 변수를 지정할 때에는 변수 맨 앞에 "--"를 반드시 붙여주어야 합니다.
| SVG 이미지 파일에 대하여 (0) | 2023.03.02 |
|---|---|
| display : grid에 대하여 (0) | 2023.03.02 |
| display에서 inherit의 역할 (0) | 2023.03.01 |
| CSS에서 all 속성에 대하여 (0) | 2023.03.01 |
| clip-path generator 사이트 (0) | 2023.03.01 |
display에서 속성을 inherit으로 지정할 경우, 부모요소의 display 속성을 그대로 따르게 됩니다.
참고사이트 :
CSS display 속성을 이해하기 위한 6가지 포인트 – Epiloum 개발노트
CSS의 display는 많은 다양한 상황에서 익숙하게 사용되는 속성입니다. 그러나 익숙한 데에는 언제나 함정이 있습니다. 실제로 display 속성을 사용하다보면 잘 알려지지 않은 특징들을 만나게 되는
dev.epiloum.net
| display : grid에 대하여 (0) | 2023.03.02 |
|---|---|
| CSS : root (가상선택자) 를 통해 css 변수 선언하기! (0) | 2023.03.01 |
| CSS에서 all 속성에 대하여 (0) | 2023.03.01 |
| clip-path generator 사이트 (0) | 2023.03.01 |
| flex 박스에 대하여 (0) | 2023.02.23 |
all속성은 html 에서 기본적으로 가지고 있던 태그의 속성을 reset시키고
처음부터 직접 스타일을 다시 주고 싶은 경우, 사용!
참고사이트 :
[HTML / CSS] 요소의 모든 속성을 초기화 시켜주는 all 속성
css 스타일 속성 중 unset이라는 아이가 있는데, 요 아이는 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜주는 아이다. 예를들어, 아래와
velog.io
| CSS : root (가상선택자) 를 통해 css 변수 선언하기! (0) | 2023.03.01 |
|---|---|
| display에서 inherit의 역할 (0) | 2023.03.01 |
| clip-path generator 사이트 (0) | 2023.03.01 |
| flex 박스에 대하여 (0) | 2023.02.23 |
| float: left 속성 활용 중 가운데 정렬하기 (0) | 2023.02.23 |