CSS Selectors (2)

안녕하세요. 오늘을 CSS의 선택자(Selectors) 두 번째 시간으로

 

이번에는 CSS 고급 선택자인 

 

연결 선택자와 속성 선택자에 알아볼게요.

 

 

 

연결 선택자

 

연결 선택자는 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자로

 

특정 패턴에 따라 요소들 간의 관계를 기반으로 스타일을 적용시켜요.

 

연결 선택자 종류

 

1. 자손 선택자

 

자손 선택자(하위 선택자)는 부모 요소에 포함된 '모든 하위 요소'에 적용이 돼요.

 

선택자 A와 B 사이에 공백을 두어 사용을 하고,

 

div 요소 내의 모든 p요소에 스타일을 적용시켜요.

 

A B {
  /* 여기에 스타일을 작성하세요 */
}

 

 

2. 자식 선택자

 

자식 선택자는 자식 요소에 스타일을 적용하는 선택자로

 

A의 직접적인 자식인 B요소에게만 적용이 돼요.

 

 

A > B {
  /* 스타일 */
}

 

 

3. 인접 형제 선택자

 

인접 형제 선택자는 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용이에요.

 

A + B {
  /* 스타일 */
}

 

 

4. (일반) 형제 선택자

 

형제 선택자는 형제 요소들에 스타일을 적용해요.

 

인접 형제 선택자와의 차이점은 모든 형제 요소에 다 적용이 된다는 점이에요.

 

A ~ B {
  /* 스타일 */
}

 

 

연결 선택자를 사용한 코드 예시예요.

// CSS

/* 자손 선택자 */
div p {
  color: red;
}

/* 자식 선택자 */
ul > li {
  font-weight: bold;
}

/* 인접 형제 선택자 */
h1 + p {
  font-style: italic;
}

/* (일반) 형제 선택자 */
div ~ span {
  text-decoration: underline;
}


// HTML

<div>
    <p>HTML 고급 선택자</p>
    <!-- 
      ul 요소의 직접적인 자식인 li요소에만 스타일 적용 
    -->
    <ul>
      <li>
        <!-- 
          하위 선택자는 자식 요소 뿐만이 아니라 손자요소, 손자의 손자 요소 등 모든 하위 요소에 적용 
        -->
        <p>div 내의 모든 p요소</p>
      </li>
    </ul>
  </div>
  <p>HTML의 고급 선택자를 학습합니다.</p>

  <ul>
    <li>1. 연결선택자</li>
    <li>2. 속성선택자</li>
    <li>3. 가상 클래스와 가상 요소</li>
  </ul>

  <!-- 형제 요소: 같은 레벨에 있는 요소 -->
  <h1>연결 선택자</h1>
  <p>자손 선택자</p>
  <p>자식 선택자</p>

  <div></div>
  <span>자손 선택자는</span>
  <span>부모 요소에 포함된 모든 하위 요소에 적용됩니다.</span>

 

 

 

속성 선택자

 

속성선택자는 HTML 요소의 특정 속성을 기반으로 스타일을 적용해요.

 

그래서 특정 요소를 가진 요소, 특정 값이나 값의 일부를 갖니 속성을 포함한 요소를 선택하고,

 

해당 태그 내에 특정 속성을 선택할 경우에 사용이 돼요.

 

속성 선택자의 종류

 

1. [속성] 선택자

 

해당 속성(명)을 가진 모든 요소를 선택함으로

 

속성의 값에 상관없이 적용이 돼요.

 

요소[속성명] {
  /* 스타일 */
}

 

 

2. [속성="값"] 선택자

 

주어진 속성과 속성 값이 일치하는 요소를 선택해요.

 

요소[속성명="값"] {
  /* 스타일 */
}

 

 

3. [속성~="값"] 선택자

 

여러 속성 값 중에 해당 값이 포함되어 있는 요소를 선택해요.

 

요소[속성명~="값"] {
  /* 스타일 */
}

 

 

4. [속성|="값"] 선택자

 

특정 값이 포함된 속성을 가진 요소를 선택함으로

 

하이픈(-)으로 연결해 한 단어 값을 이루는 요소에도 적용이 돼요.

요소[속성명|="값"] {
  /* 스타일 */
}

 

 

5. [속성&="값"] 선택자

 

특정 값으로 시작하는 요소를 선택해요.

요소[속성명^="값"] {
  /* 스타일 */
}

 

 

6. [속성$="값"] 선택자

 

특정 값으로 끝나는 요소를 선택해요.

 

파일 경로, url에 주로 사용해요.

요소[속성명$="값"] {
  /* 스타일 */
}

 

 

7. [속성*="값"] 선택자

 

값의 일부가 일치하는 속성을 가진 요소를 선택해요.

요소[속성명*="값"] {
  /* 스타일 */
}

 

 

속성 선택자를 사용한 예시코드를 보여드릴게요.

 

// CSS

/* [속성] 선택자 */
input[value] {
  background-color: yellow;
}

/* [속성="값"] 선택자 */
input[type="password"] {
  background-color: green;
}

/* [속성~="값"] 선택자 */
div[class~="sentence"] {
  border: 1px solid black;
}

input[value~="Name"] {
  border: 1px solid pink;
}

/* [속성|="값"] 선택자 */
/* 
  - 하이픈으로 연결된 속성값은 스타일 적용에 무시 
  - : 연결된 단어이지만 각각의 속성값으로 적용 가능
*/
div[class|="sentence"] {
  text-decoration: underline;
}

/* [속성^="값"] */
a[href^="https://"] {
  color: green;
}

/* [속성$="값"] */
a[href$=".com"] {
  background-color: black;
}

/* [속성*="값"] */
.example[class*="example"] {
  font-size: 20px;
}
/* 
*[class*="example"] {} 
*/


// HTML

<input 
    type="text" 
    name="firstname" 
    value="First Name" 
  />
  <input 
    type="password" 
    name="lastname"
  />
  <br />
  <a href="https://www.example.com">Visit Example.com</a>
  <br />
  <div class="example sentence-div">
    This is a div element with a class attribute
  </div>

  <div class="sentence-div">
    This is a div element with a class attribute
  </div>

 

 

 

여기까지 CSS Selectors의 고급 선택자

 

연결 선택자와 속성 선택자에 대해 알아봤는데요.

 

선택자들을 잘 활용하면 더 정교하고 효율적인 스타일링이 가능할 것 같아요.

 

다음 포스팅은 CSS Selectors의 마지막 내용인

 

가상 클래스와 가상 요소에 알아볼게요.