[CSS] CSS 선택자 - 에이블런 프론트엔드부트캠프 1일차

CSS에는 HTML의 태그들에게 개별적으로 스타일을 적용시키기 위해 다양한 선택자들이 존재한다. 이들을 여러가지 조건에 맞춰 다양하게 사용함으로써 화면을 다채롭고 아름답게 변화시켜준다. 오늘은 스타일을 지정하기 위한 선택자들을 공부했다.

 

1. 전체 선택자

전체선택자로 사용되는 ' * ' 은 모든 HTML 요소를 한 번에 선택한다. 전체선택자 * 는 아래와 같이 사용할 수 있다.

/* 전체 선택자 */

 

* {

     border: 1px solid lightblue;

}

 

 

2. 태그 선택자

태그 선택자는 태그명을 이용하여 HTML 요소를 선택할 수 있다. 태그 선택자는 아래와 같이 사용할 수 있다

/* 태그 선택자 */

 

h1 {

     border: 1px solid red;

}

 

 

3. 자손 선택자

자손 선택자는 앞에 입력된 태그를 부모, 뒤에 입력된 태그를 자식 요소라고 봤을 때, 자식 태그와 자식 태그의 하위 요소를 모두 선택한다. 자손 선택자는 다음과 같이 사용한다.

/* 자손 선택자 : 하위 요소 모두 적용 */

 

p strong {

     border: 1px solid purple;

}

 

 

4. 자식 선택자

자식 선택자는 자손 선택자와 유사하게 앞에 입력된 태그를 부모, 뒤에 입력된 태그를 자식 요소라고 봤을 때, 자식요소를 모두 선택한다.

하지만 자식 선택자는 자손 선택자와 달리 직계 하위 요소, 즉 자식 태그만을 선택하며 자식 태그의 하위 요소는 선택되지 않는다. 자식 선택자는 다음과 같이 사용된다.

/* 자식 선택자 : 직계 하위 요소만 적용 */

 

ol > li {

     border: 1px solid orange;

}

 

 

5. 그룹 선택자 

그룹 선택자는 태그 선택자와 유사하게 태그명을 이용하여 HTML 요소를 선택하지만, HTML 태그를 여러 개 지정하여 선택할 수 있다. 그룹 선택자는 다음과 같이 사용한다.

/* 그룹 선택자 */

 

h2, h3, h4 {

     color: blue;

}

 

 

6. 순서 선택자

순서 선택자는 형제 요소의 순서를 이용하여 선택할 수 있다. 

순서 선택자의 종류는 총 5개이며 다음과 같이 사용할 수 있다.

/* 순서 선택자 */

ul li:nth-of-type(1) {

     border: 1px solid black;

}

/* ODD(홀수) or EVEN(짝수) */

ul li:nth-of-type(odd) {

     border: 1px solid purple;

}

/* 사용자 지정 패턴 ( An+B ) */

ul li:nth-of-type(2n+1) {

     border: 1px solid pink;

}

/* 첫번째 요소 선택 */

section p:first-of-type {

     background-color: yellow;

}

/*. 마지막 요소 선택 */

section p:last-of-type {

     background-color: yellowgreen;

}

 

7. 속성 선택자

속성 선택자는 HTML 태그의 속성값, attribute를 활용하여 선택할 수 있다. 속성 선택자는 다음과 같이 사용할 수 있다.

/* 속성 선택자 */

input[type="text"] {

     border: 1px solid blue;

}

input[type="password"] {

      border: 1px solid black;

}

 

8. 가상 선택자

가상 선택자는 가상의 요소를 선택할 수 있다. 가상 선택자의 종류는 총 3가지이며, 다양한 상황과 조건에 맞춰 사용할 수 있다.

/* 가상 선택자 */

/* 마우스를 요소 위에 올렸을 때 작동 */

h1:hover {

     background-color: blueviolet;

}

/* 요소 앞에서 작동 */

h1:before {

     content: "BEFORE CONTENT";

     color: lime

}

/*. 요소 뒤에서 작동 */

h1:after {

     content: "AFTER CONTENT";

     color: lightgreen;

}

 

9. 클래스 선택자

클래스 선택자는 HTML 요소의 클래스명을 이용해 선택할 수 있다. 모든 HTML 요소에는 클래스와 아이디를 지정할 수 있고, 이를 활용해 CSS에서는 해당 요소를 개별적으로 선택할 수 있다. 사용 방법은 HTML 태그를 작성하고 " . " 을 작성한 뒤, 클래스명을 작성하면 된다. 혹은 태그명을 작성하지 않고 . 과 클래스명만 작성해도 된다.

/* 클래스 선택자 */

a.NAVER-link {

     background-color: bisque;

}

.GOOGLE-link {

      background-color: aquamarine;

}

 

10. 아이디 선택자

아이디 선택자는 클래스 선택자와 유사하게 HTML 요소의 아이디명을 이용해 선택할 수 있다. 하지만 클래스와 달리 아이디는 유니크한 특성을 지녔기 때문에 자주 사용하지는 않는다. 작성 방법은 클래스 선택자의 " . " 처럼 " # "을 아이디명 앞에 작성해주면 된다.

/* ID : primary key */

#member-id {

     background-color: coral;

}