CSS 문법 선택자의 종류

~~하........~~

~~열심히 글 썼는데 또 날아갔다~~

~~티스토리는 왜 사진만 올리면 이렇게 날아가는지~~

~~가끔 사진 올리기 전에 임시저장을 누르지 않고~~

~~붙여 넣기를 하면 그렇게 날아간다..........~~

~~후...................................~~

~~이렇게 된 거 다시 배운 내용 복기하고~~

~~시간도 날리고 좋다~~~

무튼!

지난 포스팅에 CSS에 적용방법 3가지에 대해 배워보았다.

3가지를 배웠지만 실 사용은 대부분 링킹 스타일을 하므로

앞으로 포스팅할 CSS의 대부분은 링킹 스타일 적용 방식을 써서 진행할 것이다.

CSS의 display 속성도 배웠고

CSS의 적용방법도 배웠으니

이제 CSS의 선택자만 배운다면

CSS의 뼈대는 완성을 하는 것이다.!!

서론이 너무 길었고

오늘은 CSS의 선택자에 대해 배워보도록 하겠다.

선택자란?

말 그대로 HTML에 어떤 부분에 CSS를 적용할지를 선택하는 것이다.

선택자를 사용하는 방법을 중괄호{ }를 이용하는데

선택자와 선언부가 합쳐지면 CSS의 문법이라는데..

솔직히 간단한 건데 너무 어렵게 설명한다.

CSS는의 기본 문법은 아래와 같이 쓰인다.

(문법이라 할 것도 없지만..)

선택자 {
	속성 : 속성값;
}

선택자는 오늘 배울 내용으로

선택에 따라 전체가 될 수 있고,

HTML의 특정 태그만 선택할 수 있고,

id, class, group 등 선택을 할 수 있다.

여기서 속성은?

HTML을 어떤 속성 즉, 어떻게 꾸밀 것인가?를 얘기한다.

예를 들면 색상을 변경하는 속성은 color이고

이 color 속성을 이용하여 빨간색으로 바꾼다면

color : red;

이런 식으로 써주면 되는 것이다.

자! 이제 진짜 본격적으로 오늘 배울 내용인

선택자는 무엇이 있는지 그리고

선택자의 종류별로 어떻게 적용되는지에 대해 알아보겠다.

앞서 대부분의 적용방법은 링킹 스타일을 적용할 것이라 했으므로

HTML 파일 1개에 CSS파일 1개 이렇게 적용하도록 하겠다.

가장 먼저 <head> 태그 안에 CSS link를 적용한다.

HTML 소스

<head>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
  <h1>기본 & 그룹 선택자</h1>

  <span>
    span 요소
  </span>

  <p>
    p 요소
  </p>

  <p class="rainbow">
    p 요소, class는 rainbow
  </p>

  <span class="rainbow">
    span 요소, class는 rainbow
  </span>

  <p class="rainbow world">
    p 요소, class는 rainbow와 world
  </p>

  <p class="rainbow" id="hotpink">
    p 요소, class는 rainbow, id는 hotpink
  </p>

</body>

준비는 끝났으니 가장 먼저

모든 요소 선택자부터 알아보도록 하겠다.

1. 모든 요소 선택자

: * 을 이용하여 모든 요소를 선택한다.

* { 속성 : 속성값}

한마디로 HTML의 모든 요소들을 한 번에 스타일을 변경하겠다는 뜻

이 태그를 이용하여

HTML의 모든 요소의 글씨를 굵게 색을 빨간색로 변경하도록 하겠다.

CSS 코드

/* 모든 요소 선택 */
* {
  font-weight: bold;
  color: red;
}

결과

!주의!

선택자에도 우선순위가 존재한다.

는 것이다.

우선순위는 뒤에 오는 선택자가 우선순위가 높다!

즉 같은 선택자와 같은 속성을 CSS 파일에 두 번 쓴다면

뒤에 오는 선택자의 속성이 적용된다는 것.

예를 들면 앞선 * 선택자를 이용하여

모든 요소를 빨간색으로 변경하였다.

다음 줄에 똑같이 텍스트의 색을 주황색으로 적용한다면

뒤에 오는 주황색이 HTML의 전체 요소를 변경시킨다.

CSS코드

/* 모든 요소 선택 */
* {
  font-weight: bold;
  color: red;
}

/* 같은 선택자의 경우 뒤에 오는 것이 우선순위 높음 */
* {
  color: darkorange;
}

결과

2. 태그 선택자

: 특정 태그만을 선택하여 그 태그만 CSS를 적용한다.

태그 { 속성 : 속성값; }

태그만 색상을 변경해 보도록 하겠다.

CSS코드

/* 모든 요소 선택 */
* {
  font-weight: bold;
  color: red;
}

/* 같은 선택자의 경우 뒤에 오는 것이 우선순위 높음 */
* {
  color: orange;
}

/* 태그 선택자 */
p {
  color: yellow;
}

결과

2. class 선택자

: 태그 안에 class 속성을 선택하여 CSS를 적용한다.

.class { 속성 : 속성값; }

class 선택자는 태그 선택자보다 우선순위가 높으며,

페이지상의 여러 요소가 같은 class를 가질 수 있다.

= 중복될 수 있다는 말이다.

태그와 태그에 rainbow class가 존재한다면

rainbow 클래스를 가진 와 태그가 둘 다 변경되는 것이다.

또한 class명이 rainbow world여도 rainbow의 CSS를 적용한다면

rainbow world 클래스까지 CSS가 적용된다.

(부분 선택이 가능하다고 표현하면 쉬울려나,,?)

그렇다면 특정 태그의 특정 class만 변경하려면 어떻게 해야 할까?

간단하게 '태그.클래스명{속성 : 속성값;}'을 해주면 된다.

예를 들어 p면서 class가 rainbow 인 것을 선택하려면

p. rainbow { 속성 : 속성값; } 를 해주면 된다.

선택자는 구체적일수록 우선순위가 높고

class 선택자는 태그가 아니더라도 다른 선택자에 이어 붙일 수가 있다.

예를 들여 클래스 뒤에 클래스,,

어려우니 예를 들어 설명하도록 하겠다.

(1) rainbow 클래스의 색상을 green로 적용하도록 하겠다.

예상하겠지만 모든 요소의 class명중 rainbow 단어를 가진다면 색이 바뀔 것이다.

CSS코드

/* 모든 요소 선택 */
* {
  font-weight: bold;
  color: red;
}

/* 같은 선택자의 경우 뒤에 오는 것이 우선순위 높음 */
* {
  color: orange;
}

/* 태그 선택자 */
p {
  color: yellow;
}

/* class 선택자 */
/* 태그보다 우선순위 높음 */
/* 페이지상의 여러 요소가 같은 class를 가질 수 있음 */
/* 클래스를 정의할 때는 . 을 붙임 */
.rainbow {
  color: green;
}

결과

(2) 이번에는 태그이면서 class가 rainbow인 것만 파란색으로 변경을 하도록 하겠다.

이번에도 예상을 하자면 span 요소의 class가 rainbow인 것을 제외하고

아까 초록색이었던 부분들이(p태그의 rainbow) 파란색으로 변경이 될 것이다.

CSS코드

/* 같은 선택자의 경우 뒤에 오는 것이 우선순위 높음 */
* {
  color: orange;
}

/* 태그 선택자 */
p {
  color: yellow;
}

/* class 선택자 */
/* 태그보다 우선순위 높음 */
/* 페이지상의 여러 요소가 같은 class를 가질 수 있음 */
/* 클래스를 정의할 때는 . 을 붙임 */
.rainbow {
  color: green;
}

/* 다른 선택자에 이어붙일 수 있음(태그, 클래스 등...) */
/* 선택자는 구체적일수록 우선순위 높음 */
/* p면서 class가 레인보우인거 */
p.rainbow {
  color: blue;
}

결과

(3) 이번에는 태그의 rainbow world class를 가진 요소들만 색을 변경해 보겠다.

!참고!

rainbow world 클래스를 선택할 때는 마찬가지로 .(온점)을 이용하여 구분한다.

따라서 rainbow.world{ 속성 : 속성값; }으로 선택을 하면 된다.

결과를 예상해 보자면 위아래는 똑같이 rainbow world 클래스의 색을 변경한다.

(굳이 따지자면 위에는 모든 태그의 rainbow world 클래스를

아래는 태그의 rainbow world 클래스를 변경시키지만

현재는 rainbow world 클래스를 가진 태그가 밖에 없으므로 결과가 같다고 한 것!)

하지만 선택자 우선순위에 의해 뒤에 있는 선택자의 요소가 선택되어

rainbow world 클래스를 가진 요소만 보라색으로 변경이 될 것이다.

CSS 코드 (길어서 잘랐다.. (2)번꺼에 이어 붙이면 됨)

/* rainbow.world = rainbow world */
.rainbow.world {
  color: navy;
}

p.rainbow.world {
  color: purple;
}

결과

3. id 선택자

: 태그의 id 요소를 선택하여 CSS 적용한다.

적용방법(문법)은 #id { 속성 : 속성값; } 을 이용하여 선택한다.

id선택자는 class 선택자 보다 우선순위가 높으며,

id의 값은 고유해야 한다. (HTML상 id는 중복될 수 없다)

또한 코드에서는 태그 안에 class와 id가 같이 쓰였지만

클래스 안에 id 요소만 있어도 된다.

예를 들어 

id가 hotpink를 가진 요소를 핫핑크 색으로 변경해 보겠다.

우선순위가 가장 높으므로 hotpink id를 가진 요소만 색이 변경될 것이다.

CSS코드

/* id 선택자 */
/* class보다 우선순위 높음 */
/* id는 페이지상에서 요소마다 고유해야 함 */
/* #id */
#hotpink {
  color: hotpink;
}

결과

4. 그룹선택자 (다중조건선택자 | OR선택자)

: 앞서 배운 여러 선택자들을 같이 선택할 때 사용한다.

사용방법은 ,를 이용하여 선택요소들을 구분하면 된다.

예를 들면 span태그 | world 클래스 | hotpink 아이디를 모두 선택한다면

span , .world, #hotpink{ 속성 : 속성값;}

흔히 그룹선택자라고 부르지만 뜻에 따라 다중조건선택자, OR선택자라고 부른다.

(다 같은 말이다~~~)

결국 나는 태그 태그 등 2개 이상 요소를 변경하고 싶은데

따로따로 선택하면 우선순위도 고려해야 하고 복잡하기 때문에

한 번에 동시에 선택할 때 쓰기 위함이다.

span태그와 world클래스, hotpink 아이디 가진 요소들을 모두 밑줄 처리 해보겠다.

CSS코드

/* 그룹 선택자 */
/*  , 로 구분한다. */
span, .world, #hotpink {
  text-decoration: underline;
}

결과

이렇게 CSS의 선택자에 대해 다뤄보았다~~~

뭐 가상 선택자도 있고 하지만 오늘은 기초를 다루기엔 앞에 4가지 선택자만 알아도 충분하다!

마지막으로 현재 수강하고 있는 얄코선생님의 사이트를 출처로 남기겠다!!

홍보는 아니고 HTML과 CSS의 내용을 이 강의를 보고 이에 해당하는 내용에 대해

책과 mdn자료를 통해 정리하는데 얄코선생님의 코드를 너무 많이 인용했을 경우

출처를 남긴다! 유튜브에 무료 강의도 있으니 보고 결정하세욤>,<

다음시간에는 결합자와 가상 클래스 선택자에 대해 배우도록 하자!!!!

그럼 이만~~~

'Study with Yedol > CSS' 카테고리의 다른 글

CSS 글자 스타일 적용 (0)	2023.12.26
CSS 색상 변경 방법 (0)	2023.12.23
CSS문법 Combinators(결합자, 선택자) (0)	2023.12.22
CSS 적용 방법 (0)	2023.12.20
CSS의 display 속성값 (0)	2023.12.19

CSS 문법 선택자의 종류

1. 모든 요소 선택자

2. 태그 선택자

2. class 선택자

3. id 선택자

4. 그룹선택자 (다중조건선택자 | OR선택자)

'Study with Yedol > CSS' 카테고리의 다른 글

관련글

티스토리툴바