[CSS] 선택자(Selector)

목차

CSS 선택자의 미세한 조절: 연결선택자와 속성선택자로 스타일링하기 🎯🖋️

안녕하세요, 스타일링 마스터 여러분! 🌟 CSS는 웹 페이지의 요소들을 세밀하게 선택하여 디자인할 수 있는 도구입니다. 오늘은 이 선택 과정에서 연결선택자와 속성선택자를 어떻게 활용할 수 있는지 함께 알아봅시다.

 

1. 연결선택자: 요소들의 관계를 이용한 선택

연결선택자는 여러 요소들 사이의 특정 관계를 기반으로 원하는 요소를 선택합니다.

• 자식 선택자 (>): 바로 아래에 있는 자식 요소만 선택합니다.

ul > li {
    color: blue; /* ul의 직접적인 자식인 li만 파란색으로 표시 */
}

• 후속 선택자 (~): 같은 부모를 가지며, 현재 요소 뒤에 오는 모든 요소를 선택합니다.

h2 ~ p {
    font-weight: bold; /* h2 다음에 오는 모든 p 요소를 굵게 표시 */
}

• 인접 형제 선택자 (+): 바로 다음에 오는 형제 요소만을 선택합니다.

h2 + p {
    font-size: 20px; /* h2 바로 다음에 오는 p 요소의 글자 크기를 20px로 설정 */
}

 

2. 속성선택자: 요소의 속성을 기반으로 선택

속성선택자는 요소의 특정 속성 및 값에 따라 원하는 요소를 선택할 수 있습니다.

• 기본 속성 선택자:

input[type="text"] {
    border: 1px solid gray; /* 텍스트 입력 상자에만 테두리 스타일 적용 */
}

• 부분 일치 속성 선택자 (^=, $=, *=):

a[href^="https"] {
    color: green; /* https로 시작하는 링크는 초록색으로 표시 */
}

a[href$=".pdf"] {
    font-weight: bold; /* .pdf로 끝나는 링크는 굵게 표시 */
}

a[href*="google"] {
    text-decoration: underline; /* google을 포함하는 링크는 밑줄을 그어줍니다. */
}

 

마치며

연결선택자와 속성선택자를 활용하면 웹 페이지의 요소를 보다 세밀하게 선택하고 디자인할 수 있습니다. 이를 통해 전체적인 디자인의 일관성을 유지하면서도 특정 요소에만 원하는 스타일을 적용하는 것이 가능해집니다. 다음 포스트에서는 더 복잡한 선택자 조합에 대해 알아보도록 하겠습니다. 스타일의 세계에서 만나요! 🌈🖋️🎯