앱 만들기/CSS

CSS 기본 선택자 네가지

나도 처음이야 2023. 6. 6.

CSS 기본 선택자.

CSS 기본 선택자는 총 네가지 가 있습니다.

전체 선택자, 태그(타입) 선택자, 클래스 선택자, 아이디 선택자 입니다.

특정 HTML 요소(element)  에 스타일을 적용하기 위한 기본적인 방법 입니다.

각각의 기본 선택자의 정의를 정리해봅니다.

전체 선택자

CSS에서 전체 선택자 란, CSS 스타일 문서에서 적용한 스타일이 모든 요소에 적용됨을 의미합니다.

전체선택자는 하기 문번 규칙을 가집니다.

 

* { 속성 : 값; }

 

태그(타입) 선택자

태그(타입) 선택자는 특정한 HTML 요소(element) 타입을 선택하는 데 사용됩니다. 
HTML 요소들을 직접 선택자로 채용함으로써 해당 태그를 가진 요소들에 스타일을 적용하는 방식 입니다.

타입 선택자의 문법은 이러 합니다.

 

태그 {

/* 스타일 적용 */

}

 

클래스 선택자

class 라는 전역 속성을 태그에 설정하여, 스타일 시트를 적용하기 위한 선택자 입니다.

클래스 선택자의 문법 입니다.

 

.클래스이름{

 /*스타일 지정 */

}

 

ID 선택자.

 HTML 전역속성인 id 에를 활용하여 해당 요소(element)에 만  스타일을 적용할 수 있는 방법으로 ID 선택자 가 사용됩니다.  ID 선택자의 문법은 하기와 같습니다. 

 

#id이름{

/* 스타일 지정 */

}

 

 

CSS 기본선택자 4가지에 대한 자세한 내용들은 하기 포스팅에 담아보았습니다.

참고드립니다. 감사합니다.

 

 

 

CSS 전체선택자 란?

전체선택자(Universal selector) 란? CSS에서 전체 선택자 란, CSS 스타일 문서에서 적용한 스타일이 모든 요소에 적용됨을 의미합니다. 전체선택자는 하기 문번 규칙을 가집니다. * { 속성 : 값; } 실제

soo0100.tistory.com

 

 

CSS ID 선택자 란?

ID 선택자. HTML 전역속성인 id 에를 활용하여 해당 요소(element)에 만 스타일을 적용할 수 있는 방법으로 ID 선택자 가 사용됩니다. ID 선택자의 문법은 하기와 같습니다. #id이름{ /* 스타일 지정 */ }

soo0100.tistory.com

 

 

CSS 타입 선택자(Type selector) 란?

타입 선택자 혹은 태그 선택자라고 불리는 Type seletor 의 CSS 쓰임을 알아보겠습니다. Type selector 타입 선택자는 특정한 HTML 요소(element) 타입을 선택하는 데 사용됩니다. HTML 요소들을 직접 선택자

soo0100.tistory.com

 

CSS 클래스 선택자 란?

CSS 클래스 선택자 class 라는 전역 속성을 태그에 설정하여, 스타일 시트를 적용하기 위해서는 클래스 선택자를 사용해야 합니다. 그럼 예제를 통해서 살펴보도록 하겠습니다. 먼저, HTML 코드 중 s

soo0100.tistory.com

 

 

반응형

'앱 만들기 > CSS' 카테고리의 다른 글

CSS Child Combinator(자식 선택자)  (1) 2023.06.08
CSS Basic Combinator (일치선택자)  (2) 2023.06.07
CSS ID 선택자 란?  (1) 2023.06.05
CSS 클래스 선택자 란?  (5) 2023.06.03
CSS 타입 선택자(Type selector) 란?  (2) 2023.06.02

댓글