HTML/CSS

[HTML/CSS] 4. CSS 선택자

김미숙's avatar
김미숙
Mar 07, 2025
[HTML/CSS] 4. CSS 선택자
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>
notion image
 
<!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>
notion image
 
‼️
  • 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>
notion image
‼️
  • 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>
notion image
 
<!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>
notion image
‼️

.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>
notion image
 
 
Share article

parangdajavous

RSS·Powered by Inblog