HTML&CSS

CSS 선택자와 속성 정리

yo09 2024. 11. 25. 10:16

💡선택자

1. 전체 선택자

  • { ... }
  • 모든 HTML 요소를 선택합니다.
  • 예시: { color: red; } → 모든 텍스트가 빨간색으로 변합니다.

2. 태그 선택자

태그 { ... }

  • 특정 태그 이름을 가진 모든 요소를 선택합니다.
  • 예시: h1 { font-size: 2em; } → 모든 <h1> 태그의 글꼴 크기가 2em로 설정됩니다.

3. 아이디 선택자

#아이디명 { ... }

  • 특정 아이디를 가진 요소를 선택합니다. 아이디는 페이지 내에서 유일해야 하므로 중복되지 않습니다.
  • 예시: #header { background-color: blue; } → 아이디가 header인 요소의 배경색을 파란색으로 설정합니다.

4. 클래스 선택자

.클래스명 { ... }

  • 특정 클래스를 가진 모든 요소를 선택합니다. 클래스는 중복해서 사용할 수 있습니다.
  • 예시: .button { padding: 10px; } → 클래스가 button인 모든 요소에 10px의 패딩을 적용합니다.

5. 자손 선택자

선택자 선택자 { ... }

  • 첫 번째 선택자의 자손(하위 레벨의 모든 요소들)을 선택합니다.
  • 예시: div p { color: green; } → 모든 <div> 안에 있는 <p> 요소의 텍스트 색을 초록색으로 설정합니다.

6. 자식 선택자

선택자 > 선택자 { ... }

  • 첫 번째 선택자의 직계 자식만을 선택합니다.
  • 예시: ul > li { list-style-type: square; } → <ul> 요소의 직계 자식인 <li> 요소에만 사각형 리스트 스타일을 적용합니다.
  • 여러 개 자식 선택 가능(선택자>자식>자식>자식...)

 

💡 가상 요소 선택자 (::)

선택자::before 특정 태그 앞에 위치하는 공간을 선택

EX) 사용 예시

// css
.list::before{
  content:'-'
}

// html
<h3 class="list">오늘 할 일</h3>

출력 : - 오늘 할 일

여기서 “-”는 텍스트가 아닌, 가상 요소이므로 텍스트로 선택 X

 

💡 text-decoration

  • HTML에서 <a href> 태그는 기본적으로 파란색 텍스트와 밑줄 스타일이 적용됩니다. 이를 제거하려면 text-decoration: none;을 사용해야 합니다.
a {
  text-decoration: none;
}

위와 같이 설정하면 모든 링크(링크)에서 기본적으로 나타나는 파란색 텍스트와 밑줄이 제거됩니다.

 

💡 text-overflow

  • clip: 영역을 넘는 텍스트는 잘리며, 추가적인 표시 없이 사라집니다.
  • ellipsis: 영역을 넘어가는 텍스트는 "..."(말줄임표)로 표시됩니다.
  • text-overflow 속성은 **white-space: nowrap**과 overflow: hidden 속성과 함께 사용해야 효과가 있습니다. 그렇지 않으면 텍스트가 잘리거나 말줄임표가 표시되지 않습니다.
.clip-text {
  width: 150px;
  white-space: nowrap;   /* 텍스트가 줄 바꿈 되지 않게 */
  overflow: hidden;      /* 영역을 벗어난 텍스트 숨기기 */
  text-overflow: clip;   /* 영역을 벗어난 텍스트 잘리기 */
}

 

💡 position 속성

상대 위치(relative) vs 절대 위치(absolute)

relative의 특징

  • 요소는 원래 자리에 존재하며, 이동할 수 있습니다.
  • 이동 후에도 원래 자리는 여전히 차지하고 있어 레이아웃에 영향을 미치지 않습니다.
  • 상대적으로 이동하므로, 다른 요소들의 배치에는 영향을 주지 않습니다.

absolute의 특징

  • 요소는 정해진 위치에 정확하게 배치됩니다.
  • 배치된 요소는 다른 요소들과 겹치거나, 문서 흐름에서 벗어나게 됩니다.
  • absolute가 적용된 요소는 상위 요소의 position 값에 따라 배치됩니다. 만약 상위 요소에 position: relative가 없다면, 문서의 최상위 요소인 <html>을 기준으로 배치됩니다.

relative와 absolute 함께 사용하기

  • relative는 기준점을 설정하는 데 유용하고, absolute는 이 기준점에 상대적인 위치를 지정하는 데 유용합니다.
  • 예를 들어, position: relative;를 부모 요소에 설정하고, 그 안에 position: absolute;를 설정한 자식 요소를 사용하면, 자식 요소는 부모 요소 내에서만 배치됩니다.

예시:

.relative-parent {
  position: relative; /* 부모 요소에 상대 위치 설정 */
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

.absolute-child {
  position: absolute; /* 자식 요소에 절대 위치 설정 */
  top: 20px;
  left: 30px;
  background-color: coral;
}

//html
<div class="relative-parent">
  <div class="absolute-child">절대 위치 자식 요소</div>
</div>

.absolute-child 요소는 .relative-parent 요소를 기준으로 top: 20px, left: 30px 만큼 이동