CSS 선택자 총정리 - 웹페이지의 모든 부분을 선택하여 디자인!

CSS는 웹 페이지의 디자인과 스타일을 정의하는 스타일 시트 언어입니다. 선택자는 CSS에서 특정한 HTML 요소를 선택하여 스타일을 적용하는 방법인데요. 예를들어<1h> 태그의 텍스트 색상을 빨간색으로 바꾸고 싶을 때 요소 선택자를 사용할 수 있습니다.

아직 CSS 기초 개념이나 문법 작성 방법에 대해 모르신다면 아래 게시글을 훑어봐주세요.

CSS 기초 - CSS란 무엇이고 왜 사용하나요?

CSS 문법 및 규칙

[2. 기본 요소 선택자]

요소 선택자는 특정 HTML 요소를 선택하는 가장 간단한 방법입니다. 예를 들어, h1이라고 쓰면 <h1> 태그를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

h1 {
    color: red;
  }
  

위의 코드는 <h1> 태그를 선택하여 텍스트의 색상을 빨간색으로 변경하는 예제입니다.

[3. 클래스 선택자]

클래스 선택자는 여러 요소에 동일한 스타일을 적용하고 싶을 때 사용됩니다. 클래스 선택자는 요소의 class 속성과 함께 사용됩니다. 예를 들어, <p >라고 쓰면 highlight라는 클래스 선택자를 사용한 요소를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

.highlight {
    background-color: yellow;
  }
  

위의 코드는 highlight라는 클래스 선택자를 가진 요소를 선택하여 배경색을 노란색으로 변경하는 예제입니다. HTML 요소는 다음과 같이 클래스를 추가할 수 있습니다: <p >

[4. 아이디 선택자]

아이디 선택자는 특정 요소를 유일하게 식별하고자 할 때 사용됩니다. 아이디 선택자는 요소의 id 속성과 함께 사용됩니다. 예를 들어, <div >라고 쓰면 header라는 아이디 선택자를 사용한 요소를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

#header {
    font-size: 24px;
  }
  

위의 코드는 header라는 아이디 선택자를 가진 요소를 선택하여 글꼴 크기를 24픽셀로 변경하는 예제입니다. HTML 요소는 다음과 같이 아이디를 추가할 수 있습니다: <div >

[5. 속성 선택자]

속성 선택자는 특정 속성을 가진 요소를 선택하는 방법입니다. 예를 들어, [type="button"]이라고 쓰면 type 속성이 "button"인 요소를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

[type="button"] {
    border: 1px solid blue;
  }
  

위의 코드는 type 속성이 "button"인 요소를 선택하여 테두리를 파란색으로 변경하는 예제입니다. 이 예제는 <input type="button">과 같은 요소를 선택합니다.

[6. 의사 클래스 선택자]

의사 클래스 선택자는 특정 상태나 동작에 따라 요소를 선택하는 방법입니다. 예를 들어, :hover라고 쓰면 마우스를 올렸을 때의 상태에서 요소를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

a:hover {
    color: purple;
  }
  

위의 코드는 링크(<a>)를 마우스로 가리켰을 때의 상태에서 글자 색상을 보라색으로 변경하는 예제입니다.

[7. 의사 요소 선택자]

의사 요소 선택자는 요소의 특정 부분을 선택하는 방법입니다. 예를 들어, ::first-line이라고 쓰면 요소의 첫 줄을 선택할 수 있습니다. 이렇게 선택된 부분에 원하는 스타일을 적용

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

위의 코드는 <p> 요소의 첫 줄을 선택하여 글꼴을 굵게 변경하는 예제입니다.

[8. 결합자를 활용한 선택자 조합]

결합자를 사용하여 여러 선택자를 조합하여 특정 요소를 선택할 수도 있습니다. 자식 선택자(>), 후손 선택자( ), 형제 선택자(+나 ~) 등이 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다

div.container > p {
    background-color: lightgray;
  }
  

위의 코드는 container라는 클래스를 가진 <div> 요소의 직계 자식인 <p> 요소를 선택하여 배경색을 밝은 회색으로 변경하는 예제입니다.

 

위 내용을 모두 정리하여

• 요소 선택자는 특정한 HTML 요소를 선택하여 스타일을 적용하는 방법입니다.

• 클래스 선택자는 여러 요소에 동일한 스타일을 적용하고 싶을 때 사용합니다.

• 아이디 선택자는 특정 요소를 유일하게 식별하고자 할 때 사용합니다.

• 속성 선택자는 특정 속성을 가진 요소를 선택합니다.

• 의사 클래스 선택자는 특정 상태나 동작에 따라 요소를 선택합니다.

• 의사 요소 선택자는 요소의 특정 부분을 선택합니다.

• 결합자를 활용하여 여러 선택자를 조합하여 특정 요소를 선택할 수 있습니다.

이렇게 다양한 선택자를 활용하여 웹 페이지를 더욱 다채롭게 스타일링 할 수 있습니다.