CSS selector(선택자) 선언, 작성하는 방법

CSS Selector (선택자)란?

CSS는 HTML문서를 화려하게 아름답게 만드는 언어라고 이전 글에서 설명한 적이 있습니다.

 

[CSS] - HTML을 스타일리쉬하게 만드는 CSS

HTML을 스타일리쉬하게 만드는 CSS

 

다시 한번 CSS 구조를 살펴보면 아래와 같습니다.

 

• P 태그에 대하여 (선택자 정의)
• color는 (속성)
• blue로 표시해라 (속성값)

을 나타낸거에요. 이 때 P가 selector (선택자) 입니다.

 

CSS에서 선택자는 전체 선택자, 태그(요소) 선택자, 클래스 선택자, ID 선택자, 속성선택자, 가상 클래스 선택자, 복합 선택자 (Combinator)가 있습니다. 복합 선택자는 자꾸 헷갈려서 저도 반복 학습 중이에요.

 

전체 선택자 (universal seletor)

* {
  margin: 0;
  padding: 0;
}

전체 선택자는 HTML 전반에 해당되는 CSS를 정의할 때 씁니다.

위의 예시는 여백과 패딩을 0으로 설정하라는 뜻입니다.

 

요소 선택자 (element selectors)

p {
  color: blue;
}

요소 선택자는 태그에 대한 CSS 속성을 정의할 때 씁니다. HTML 태그로 <h4>, <p> 등을 사용하잖아요. 이 때 선택자는 그냥 태그 이름을 그대로 쓰면 됩니다.

 

클래스 선택자 (class selectors)

.my-class {
  font-size: 16px;
}

클래스 선택자는 html 내에 존재하는 클래스에 대해 CSS 속성을 정의할 때 씁니다. 웹문서를 생성할 때 우리는 태그 뒤에 속성을 정의합니다.  

 

<p class="my-class">첫 번째 문장입니다</p>
<p class="my-class2">두 번째 문장입니다</p>
<h4 class="my-class">첫 번째 제목입니다</h4>

위와 같은 HTML이 있다고 해볼께요.

.my-class로 CSS를 선언했으니 클래스 이름 my-class인 경우는 폰트를 16크기로 바꿀거에요.

첫번째 위치에 있는 <p>와 세번째 위치에 있는 <h4>가 바뀌겠네요.

 

ID 선택자 (ID selectors)

#my-id {
  background-color: yellow;
}

아이디 선택자는 html 내에 존재하는 ID에 대해 CSS 속성을 정의할 때 씁니다. id와 class의 차이점은 알고 계시죠? class는 반복해서 사용할 수 있지만, id는 문서 내에서 단 한번만 사용할 수 있어요. 그만큼 유니크한 곳에 사용해야 해요.

 

HTML 문서 내에 id가 my-id로 존재하는 위치만 백그라운드 색상이 노란색으로 바뀌겠네요.

 

속성 선택자 (Attribute selectors)

input[type="text"] {
  border: 1px solid gray;
}

input 태그는 여러가지 속성을 지니는데요. 위의 예시는 type 속성이 text 인 경우만 찾아서 CSS를 적용하는 방식입니다. 이 때 회색 테두리를 1px로 정해서 적용하겠네요.

 

다른 예시를 살펴볼께요.

a[href^="https://"] {
  color: green;
}

img[src$=".png"] {
  border: 2px solid red;
}

첫번째는 a 태그 href 속성이 "http://"로 시작할 때 녹색을 적용하는 예시입니다.

두번째는 img 태그 src 속성이 ".png"로 끝나는 모든 요소에 빨간색 테두리를 적용하는 예시입니다.

 

가상 클래스 선택자 (Pseudo-classes selectors)

a:hover {
  color: red;
}

p::first-line {
  font-weight: bold;
}

가상 클래스 선택자는 HTML 문서 상에는 존재하지 않지만 필요에 따라 임의로 가상의 선택자를 만드는 방법이에요. a 태그는 링크를 거는 태그인데 속성값 어디에도 hover라는 단어는 안나올 거에요. p 태그에서도 마찬가지로 first-line은 없겠죠?

 

a:hover 는 링크에 마우스를 올렸을 때 적용되는 CSS입니다. 위의 예시에서는 링크 색상을 red로 변경할 거에요.

p::first-line은 p의 첫번째 줄을 선택해서 폰트를 굵게 만들겁니다.

 

콜론이 하나 쓰이는 경우와 두 개 쓰이는 경우는 아직 제가 잘 이해를 못하고 있는 것 같아요.

설명하기가 어려워서 아래 링크를 첨부합니다.

 

https://tyrionlife.tistory.com/128

[CSS] 선택자에서 단일콜론과 이중콜론의 차이점(p::selection 의미)

 

복합선택자는 다음 번에 알아보겠습니다.