HTML CSS

(HTML/CSS/JavaScript)CSS 선택자(기본 선택자) - 9

mynote6676 2025. 5. 29. 12:14

CSS 선택자란?

CSS 선택자는 HTML 문서에서 스타일을 적용하고 싶은 특정 요소를 "선택"하는 도구입니다. 마치 가게

에서 물건을 고를 때 " 이거 주세요!" 라고 손으로 가리키는 것처럼, 선택자는 "이 요소에 스타일을 입히고 싶어요!" 라고

CSS에게 알려주는 역활을 합니다.

 

예를 들어,HTML에 <p> 태그가 여러 개 있을 때, "모든 문단을 파란색으로 만들자"거나 "특정 클래스가 붙은 문단만 

굵게 하자" 같은 작업을 선택자가 가능하게 해줍니다.

<h1> 태그를 선택해서 제목을 크게 만들기.

warning 클래스를 가진 요소를 빨간색으로 강조하기

#header라는 ID를 가진 부분에 배경색 추가하기.

 

선택자의 중요성

-웹 페이지의 디자인과 레이아웃을 제어하는 첫 단계.

 

기본 문법

-선택자 {속성: 값} 형태

 

 

기본 선택자 정리

명칭 선택지  설명
전체 선택자 {속성:속성 값;} 페이지에 있는 모든 요소를 대상으로 스타일을 적용한다.
태그 선택자 태그{속성:속성 값;} 특정 태그에 스타일을 적용한다.
클래스 선택자  .클래스이름{속성: 속성 값;} 특정 클래스에 스타일을 적용한다.
id선택자 #id이름{속성: 속성 값;} 특정 id에 스타일을 적용한다.

===============================================================

 

2. 선택자의 종류

 

1.전체 선택자(*)

 

전체 선택자는 HTML 문서에 있는 모든 요소를 한꺼번에 선택합니다. 이름 그대로 "모두 다!" 라는 뜻이에요.

CSS에서* 기호를 사용하며, 특정 태그나 조건 없이 페이지의 모든 요소에 스타일을 적용할 때 유용합니다.

-주로 초기화 작업에 사용됩니다. 예를 들어, 브라우저마다 기본적으로 설정된 여백(margin)이나 패딩(padding)이 달라서

디자인에 혼란이 올수 있는데, 이걸 한 번에 없애줄 때 많이 써요.

{
	margin: 0; // 예를 들어 글이 써진 페이지의 위치를 옮긴다.
    padding: 0; // backgroud color를 찍어보면 알겠지만 범위가 있는데 그 사이의 공백을 의미한다.
 }

:위 코드는 페이지의 모든 요소에서 여백과 패딩을 제거합니다. <h1>,<p>,<div>등 뭐든 적용.

 

2.태그 선택자

태그 선택자는 HTML 태그 이름을 직접 써서 해당 태그를 가진 모든 요소를 선택합니다. 예를 들어, <p>

태그를 선택하면 페이지에 있는 모든 문단에 스타일을 줄 수 있어요.

- 특정"종류"의 요소를 한꺼번에 다루고 싶을 때 유용합니다.

P {
	color: blue;
    font-size: 16px;
  }

: 이 코드는 모든 <p> 태그의 글자를 파란색으로 만들고 ,크기를 16픽셀로 설정합니다.

 

3.클래스 선택자(.class)

 

클래스 선택자는 HTML 요소의 class 속성을 기준으로 선택합니다. .뒤에 클래스 이름을 붙여서 사용하며, 같은 클래스를

가진 여러 요소에 동시에 스타일을 적용할 수 있어요.

- 개발자가 직접 요소에 "이름표"를 붙이는 셈이라, 원하는 대상을 더 구체적으로 골라낼 수 있습니다.

<div id="header">헤더 영역</div>

#header {
	background-color: gray;
    padding: 20px;
    }

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>기본 선택자 실습</title>
    <!-- <link rel="stylesheet" href="styles.css"> -->
    <style>
      * {
        margin: 0;
        padding: 0;
      } /* 전체 초기화 */
      h1 {
        font-size: 24px; (글 크기)
      }
      .content {
        color: purple;
      }
      #special-box {
        background-color: yellow;
        border: 2px solid black; //(1.테두리의 굵기 , 테두리의 선 형태 , 색깔)
      }
    </style>
  </head>
  <body>
    <h1 class="title">제목</h1>
    <p class="content">내용 1</p>
    <p class="content">내용 2</p>
    <div id="special-box">특별한 박스</div>
  </body>
</html>
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>기본 선택자 연습 2</title>
    <link rel="stylesheet" href="styles1.css" />
    <style>
      /* 문제 1: 모든 요소 글자 색상 회색 */

      /* 문제 2: 모든 <span> 태그 배경색 연한 파란색 */

      /* 문제 3: note 클래스 스타일링 */

      /* 문제 4: main-content ID 를 선택해서 원하는 대로 스타일링 */

      /* 문제 5: 모든 <header> 태그를 선택해서 원하는 대로 스타일링 */
    </style>
  </head>
  <body>
    <header>헤더 영역입니다.</header>
    <h2>제목입니다.</h2>
    <span class="note">중요한 메모입니다.</span>
    <p>일반 문단입니다.</p>
    <span class="note">또 다른 메모입니다.</span>
    <section id="main-content">메인 콘텐츠입니다.</section>
  </body>
</html>
728x90