• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 커스텀 드롭다운

자식/자손/형제 선택자, CSS변수

선택자 사이의 공백 유무에 따라 자손 선택자와 다중 선택자로 나뉩니다.

1. 자손 선택자

   HTML 문서에는 부모 자식 개념이 존재합니다.

   여러개의 선택자를 공백으로 연결해서 작성하면 자손 선택자가 됩니다.

   자손 선택자를 이용하면 특정 부모 요소 안에 있는 자식 요소만 선택할 수 있습니다.

   /* 자손 선택자 사용방법 - 선택자1 안에 있는 선택자 2를 선택한다. */
   선택자1 선택자2 {
       속성 : 속성값;
   }
   

   /* 자손 선택자 사용예시 - .box 안에 있는 #title을 선택한다. */
   .box #title {
       color : red;
   }
   

2. 다중 선택자

   여러개의 선택자를 공백 없이 연결하면 다중 선택자로 사용할 수 있습니다.

   다중 선택자는, 중첩된 선택자들을 모두 만족하는 요소를 선택합니다.

   /* 다중 선택자 사용방법 */
   선택자1선택자2 {
       속성 : 속성값;
   }
   

   /* 자손 선택자 사용예시 - .box 이면서 동시에 #title인 요소를 선택한다. */
   .box#title {
       color : red;
   }
   

3. CSS 변수는 --로 시작하는 이름을 사용하여 선언합니다. 일반적으로 변수는 :root 선택자 내에서 선언하여 전역적으로 사용될 수 있습니다.

   :root {
   	--기본글자색: black;
   	--기본배경색: white;
   	--기본체크색: red;
   	--인풋배경색: lightgray;
   	--인풋플레이스홀더색: gray;
   	--버튼글자색: black;
   	--버튼배경색: lightgray;
   }
   

4. 변수 사용

   변수를 사용하려면 var() 함수를 사용합니다. 예를 들어, 텍스트 색상을 --기본글자색 변수로 설정하려면 다음과 같이 합니다:

   body {
   	color: var(--기본글자색);
   	background-color: var(--기본배경색);
   	accent-color: var(--기본체크색);
   }
   input {
   	background-color: var(--인풋배경색);
   }
   input::placeholder {
   	color: var(--인풋플레이스홀더색);
   }
   button {
   	color: var(--버튼글자색);
   	background-color: var(--버튼배경색);
   }
   

📝 실습 코드