[HTML/CSS] 4. CSS 선택자

김미숙

Mar 07, 2025

Contents

선택자

‼️

선택자

.+ 태그 {} → 태그된 박스

#+태그 {} → 태그된 박스

div {} → div 전체

padding

내용(content)과 테두리(border) 사이의 내부 여백

margin

요소의 바깥쪽 여백, 즉 요소와 요소 사이의 간격을 조절

border

요소의 테두리를 설정. 테두리의 두께, 스타일, 색상 등을 조절

border-radius

HTML 요소의 테두리를 둥글게 만드는 속성

display

요소가 화면에 어떻게 표시될지를 결정
블록(block) / 인라인(inline) / 플렉스(flex) / 그리드(grid)

background-color

요소의 배경색을 설정

span: 텍스트의 일부를 감싸서 스타일을 적용할 때 사용하는 인라인 요소

특정 단어에 색상을 입히거나, 크기를 조절할 때 많이 사용
span 태그에 id 속성을 사용하면 avaScript나 CSS에서 특정 요소를 선택할 수 있음
한 개의 특정 요소를 식별할 때 사용 (id는 고유해야 함)


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .red-box {
        background-color: red;
      }

      .box {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
      }

      #box {
        display: block;
      }

      div {
        background-color: thistle;
        font-size: 16px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>Hello World</div>
    <div class="box">Hello World</div>
    <div class="box">Hello World</div>
    <span id="box">Hello World</span>
    <span>Hello World</span>
    <div class="red-box">빨간 박스</div>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .b1 {
        display: block;
        height: 200px;
      }

      .b2 {
        display: inline;
        height: 200px;
      }

      .b3 {
        display: inline-block;
        height: 200px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="b1">1</div>
    <hr />
    <div class="b2">2</div>
    <hr />
    <div class="b3">3</div>
  </body>
</html>

‼️

justify-content

Flexbox 또는 Grid 레이아웃에서 가로(주 축) 정렬을 조절
수평 정렬을 조절하는 핵심 속성
📌 주요 값 정리

값	설명	예제
`flex-start`	왼쪽 정렬 (기본값)	🔵🔵🔵
`flex-end`	오른쪽 정렬	⬜⬜🔵🔵🔵
`center`	중앙 정렬	⬜🔵🔵🔵⬜
`space-between`	양 끝 정렬 (간격 동일)	🔵⬜🔵⬜🔵
`space-around`	요소 양쪽에 여백 추가	⬜🔵⬜🔵⬜🔵⬜
`space-evenly`	모든 요소 사이에 같은 간격	🔵⬜🔵⬜🔵

flex-direction

Flexbox 레이아웃에서 아이템들의 배치 방향을 설정
아이템들을 가로 또는 세로로 배치할지 결정
📌 주요 값 정리

값	설명	예시
`row` (기본값)	가로 방향 (왼쪽 → 오른쪽)	🔵🔵🔵
`row-reverse`	가로 방향 (오른쪽 → 왼쪽)	🔵🔵🔵 (뒤집힘)
`column`	세로 방향 (위 → 아래)	🔵 🔵 🔵
`column-reverse`	세로 방향 (아래 → 위)	🔵 🔵 🔵 (뒤집힘)


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .f-box {
        display: flex;
        justify-content: end;
      }

      .f-box2 {
        display: flex;
        flex-direction: column;
        height: 500px;
        justify-content: center;
      }

      .f-box3 {
        display: flex;
        justify-content: space-around;
      }
    </style>
  </head>
  <body>
    <div class="f-box3">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>

    <div class="f-box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>

    <div class="f-box2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

‼️

align-items

Flexbox 또는 Grid 레이아웃에서 아이템들의 세로(교차 축) 정렬을 설정
아이템들이 세로 방향으로 어떻게 정렬될지 결정
📌 주요 값 정리

값	설명	예시
`stretch` (기본값)	아이템이 세로로 늘어남 (부모 컨테이너 크기 맞추기)	🔵🔵🔵
`flex-start`	세로 상단 정렬	🔵⬜⬜
`flex-end`	세로 하단 정렬	⬜⬜🔵
`center`	세로 중앙 정렬	⬜🔵⬜
`baseline`	텍스트의 기준선에 맞춰 정렬	🔵⬜🔵


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .f-box {
        display: flex;
        justify-content: space-between;
        height: 500px;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="f-box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .f-outer-box {
        display: flex;
        justify-content: space-between;
      }

      .f-inner-left-box {
        display: flex;
      }

      .f-inner-right-box {
        display: flex;
      }
    </style>
  </head>
  <body>
    <div class="f-outer-box">
      <div class="f-inner-left-box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div class="f-inner-right-box">
        <div>4</div>
        <div>5</div>
      </div>
    </div>
  </body>
</html>

‼️

.f-box div{} 와 .f-box > div{} 의 차이점

.f-box div{}

후손 선택자 (descendant selector)
.f-box 안에 있는 모든 div를 선택.
div가 .f-box의 자식, 자식의 자식 등 어디에 있든 상관없이 모두 선택.

.f-box > div{}

자식 선택자 (child selector)
.f-box의 직접 자식인 div만 선택
.f-box의 자식이 아닌 하위 요소의 자식 div는 선택되지 않음

📌 요약

선택자	설명	선택되는 요소
`.f-box div`	후손 선택자	`.f-box` 내의 모든 `div`
`.f-box > div`	자식 선택자	`.f-box`의 직접 자식 `div`만

flex-wrap

Flexbox 레이아웃에서 아이템들이 컨테이너를 넘어설 때 어떻게 처리할지 결정
아이템들이 한 줄에 모두 들어가지 않으면 어떻게 나누어 배치할지를 설정할 수 있음
📌 주요 값 정리

값	설명	예시
`nowrap` (기본값)	아이템이 한 줄에 다 배치됨 (넘치면 화면 밖으로 나감)	🔵🔵🔵🔵🔵
`wrap`	아이템이 넘치면 다음 줄로 배치됨	🔵🔵🔵🔵🔵
`wrap-reverse`	아이템이 넘치면 반대로 다음 줄에 배치됨 (반대 방향)	🔵🔵🔵🔵🔵


<!DOCTYPE html>
<html lang="ko">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .f-box {
        display: flex;
        flex-wrap: wrap;
      }

      .f-box div {
      }

      .f-box > div {
        height: 100px;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div class="f-box">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
  </body>
</html>

Contents

선택자

<!DOCTYPE html> <html lang="en"> <head> <style> .red-box { background-color: red; } .box { border: 1px solid black; padding: 10px; margin: 10px; border-radius: 10px; } #box { display: block; } div { background-color: thistle; font-size: 16px; font-weight: bold; } </style> </head> <body> <div>Hello World</div> <div class="box">Hello World</div> <div class="box">Hello World</div> <span id="box">Hello World</span> <span>Hello World</span> <div class="red-box">빨간 박스</div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> div { border: 1px solid black; padding: 10px; } .b1 { display: block; height: 200px; } .b2 { display: inline; height: 200px; } .b3 { display: inline-block; height: 200px; width: 200px; } </style> </head> <body> <div class="b1">1</div> <hr /> <div class="b2">2</div> <hr /> <div class="b3">3</div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> div { border: 1px solid black; padding: 10px; } .f-box { display: flex; justify-content: end; } .f-box2 { display: flex; flex-direction: column; height: 500px; justify-content: center; } .f-box3 { display: flex; justify-content: space-around; } </style> </head> <body> <div class="f-box3"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="f-box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="f-box2"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> div { border: 1px solid black; padding: 10px; } .f-box { display: flex; justify-content: space-between; height: 500px; align-items: center; } </style> </head> <body> <div class="f-box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> div { border: 1px solid black; padding: 10px; } .f-outer-box { display: flex; justify-content: space-between; } .f-inner-left-box { display: flex; } .f-inner-right-box { display: flex; } </style> </head> <body> <div class="f-outer-box"> <div class="f-inner-left-box"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="f-inner-right-box"> <div>4</div> <div>5</div> </div> </div> </body> </html>

<!DOCTYPE html> <html lang="ko"> <head> <style> div { border: 1px solid black; padding: 10px; } .f-box { display: flex; flex-wrap: wrap; } .f-box div { } .f-box > div { height: 100px; width: 100px; } </style> </head> <body> <div class="f-box"> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div> </body> </html>