[CSS] ⭐ CSS Selectors(1) | CSS 기본 규칙 |Universal Selector | ...

CSS의 기본 규칙

selector {
	property: value;
    }

➡️선택자 뒤에 중괄호({})가 오고 설정하려는 특성이 나온다. 

선택자의 종류는 많다.

 

 Universal Selector (전체 선택자)

* {
	color: black;
    }

➡️페이지에 있는 선택 가능한 모든 요소들을 선택 가능하다. 스타일을 적용할 텍스타가 없는 요소들도 선택한다.

 

Element Selector (요소 선택자)

➡️지정된 타입의 모든 항목을 선택한다.

button {
	font-size: 40px;
    }

 

Selector List 

➡️쉼표를 사용해 목록에 있는 선택자 여러 개를 합치는 방법이다.

h1, h2 {
	color: magenta;
    }

 

id와 class를 사용하기 전,

footer p {
  font-size: 16px;
}

article header p {
  font-style: italic;

위에와 같이 코드를 입력할 수 있지만! id혹은 class를 사용하면 더욱 간편해진다. 

 

 

id Seletor (id 선택자)

➡️id는 <input>과 <label>을 연결할 뿐 아니라 CSS의 모든 요소에 훅을 제공한다. (즉. CSS가 하나의 요소를 뽑아내도록 한다.)

HTML에 추가되는 속성을 한 부분의 스타일을 바꿔주는 역할을 한다.

띄어쓰기가 없어야 하며 되도록 짧으면서 의미가 담겨있어야 한다.

➡️고유한 식별자이므로 하나의 id는 페이지 내에 한 번만 나와야 한다.

마크업에 id를 추가하고 id 이름으로 연결하고 id앞에는 #(해시 태그)을 해야한다.

#signup{
    background-color:#8e8d8a;
    color: #d8c3a5;
    height: 20px;
}

 

Class Seletor (Class 선택자)

띄어쓰기가 없어야 하며 되도록 짧으면서 의미가 담겨있어야 한다.

➡️고유한 식별자이므로 하나의 id는 페이지 내에 한 번만 나와야 한다.

id와 비슷한 개념으로 Class도 마크업에 뭔가를 추가해 훅을 걸어 CSS로 연결한다. 단, 클래스는 여러 요소에 적용한다.

마침표에 클래스 이름이 있는 선택자 구문을 쓴다.

➡️왜냐하면? 클래스가 요소를 묶어주기 때문이다. 

.tag {
    background-color: #e85a4f;
    color: #eae7dc;
    font-size: 16px;
}

클래스는 그저 label 즉 스티커 같은 것

 

id와 클래스의 차이점??

• id는 이름을 반복해서 사용할 수 없다. 즉, 각 id이름을 한번만 사용 가능하다.
• 여러번 이름을 재사용하는 경우에는 클래스를 사용한다.

 

Descendant Selector (자손선택자)

li a {
	color: teal;
    }

li 뒤에 한 칸 띄어 쓰고 a가 있을 경우 <li> 태그에 중첩된 모든 자손 요소를  선택하라는 뜻이다.

➡️즉 li 뒤에 있는 것을 선택한다. 공백이 중요하며 쉼표(,)와 다르다. 

➡️쉼표의 경우 <li> 태그와 앵커 태그를 선택하지만 띄어쓰기는 <li> 태그안의 앵커태그를 선택한다.

 

Adjacent Selector (인접 선택자)

➡️ 인접선택자는 결합자라고 불린다. 

h1 + p {
	color: red;
    }

h1과 p는 요소 선택자이다. +는 전체 선택의 명령을 바꾸는 결합자이다. (대부분은 그냥 선택자라고 한다.) 

+ 부호가 인접 선택자이다.  +는 <h1> 태그 다음에 오는  <p> 태그를 모두 선택한다.

즉, <h1> 태그 다음에 오면서 같은 단계에 있는 <p> 태그를 선택한다. 

 

Direct Child (직계 자손 선택자)

➡️직계 자손 선택자는 부등호인 >를 사용한다. 

div > li {
	color: white;
}

<div> 태그 아래 있는 <li> 태그를 선택한다. <div> 태그에 속한 모든 <li> 태그가 아니라 직계 자손인 <li> 태그만 선택한다.

 

Attruibute Selector (속성 선택자)

➡️ 특정 속성을 가진 요소 선택 가능하다. 

input[type="text"] {
	width: 300px;
    color: yellow;
    }

<type> 속성에서 <input> 요소와 함께 쓰인다. 체크박스, 라디오 버튼, 텍스트 상자 비밀번호 입력 창 등이 레터링된 <ipput>이다. type을 선택하려는 경우 type="text"인 모든 input을 선택할 때는 속성 선택자를 사용한다. 대괄호를 입력하고  그 안에 '속성 이름=xx'를 입력한다. 

    

CSS의 규칙

• 여러 단어로 된 클래스 또는 ID이름이 있는 경우 단어들을 대시(-)를 이용해 구분한다. 물론 언더바(_)를 사용할 수 있지만 대시(-)를 사용하는 게 단지 관습일 뿐이다.