본문 바로가기
Programming/HTML+CSS

[CSS] 6. 고급 선택자(2) - 속성 선택자 1

nozeroslope 2023. 5. 30. 15:58

css3 logo image

 

 

 

우리는 지금까지 HTML 태그 작성 시, 여러 가지 '속성'을 함께 사용해 왔습니다. CSS의 선택자를 작성할 때, 연결 선택자 이외의 방식으로 이 속성 값을 지정해 특정 요소를 세부적으로 선택할 수 있습니다. 

 

 

○ [속성] - 특정 속성이 있는 요소를 선택한다

 

특정 요소에서 태그를 사용할 때, 해당 태그에 세부적인 속성을 부여하는 경우가 있습니다. 이때 어떤 요소 중에서 특정한 속성을 가진 요소를 지정하고 싶을 때 [속성]을 사용합니다. 예를 들어서 링크를 부여할 때 <a> 태그에 href 속성을 사용하는 것처럼 말이죠. 

 

만일 <a> 태그 중, href 속성을 사용하는 요소에만 특정 CSS 속성을 적용하고 싶다면, 다음과 같이 '[ ]'를 사용합니다. 

 

a[href] {
    // .....
}

 

아래의 예시를 통해서, 여러 개의 <a> 요소 중 href 속성을 사용한 요소만 색상을 지정한 케이스입니다. 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>example</title>
  <style>
    ul{
      list-style: none;
    }
    li{
      width: 150px;
      display: inline-block;
      margin: 15px;
    }
    li a{
      padding: 5px 20px;
      font-size: 14px;
      text-decoration: none;
      font-weight: bold;
    }
    a[href]{
      background: blanchedalmond;
      border: 1px solid grey;
      font-weight: normal;
    }
  </style>
</head>
<body>
	<ul>
    <li><a>메뉴 리스트 - </a></li>
    <li><a href="#">MENU 1</a></li>
    <li><a href="#">MENU 2</a></li>
    <li><a href="#">MENU 3</a></li>
    <li><a href="#">MENU 4</a></li>
  </ul>
</body>
</html>

 

 

 

 

 

 

 

○ [속성 = 속성값] - 특정 속성 값이 있는 요소를 선택한다

 

위에서 설명한 속성을 선택할 때, 해당 선택 속성에 '특정 속성값'일 경우만 한정해서 선택도 가능합니다. <a>에서 target 속성 값을 "_blank"로 적용한 요소일 경우만 선택한다고 가정하면, 아래와 같이 작성하면 됩니다. 

 

a[target="_blank"] {
     // ...
}

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>example</title>
  <style>
    ul {
      list-style: none;
    }
    li {
      padding: 5px 30px;
    }
    li a {
      font-size: 15px;
      text-decoration: none;
      color: black;
    }
    a[target="_blank"] {
      padding-right: 30px;
      background:url(images/bg_sample_600.jpg) no-repeat center right;
    }
  </style>
</head>
<body>
	<ul>
		<li><a href="https://www.naver.com" target="_blank">리스트1</a></li>
		<li><a href="https://www.google.com">리스트2</a></li>
		<li><a href="https://www.daum.net">리스트3</a></li>		
  </ul>
</body>
</html>

 

 

 

 

 

○ [속성 ~= 속성값] - 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택

 

위의 ~=를 사용하는 경우는, 여러 개의 속성 값 중에서 특정 속성 값이 포함된 요소를 선택하게 됩니다. 설명만으로는 이해가 잘 되지 않을 수 있는데요, 예를 들어서 'class'라는 속성을 사용하는데 'button'이라는 속성 값을 사용하는 모든 class 속성을 선택할 때 사용합니다. 단독 속성 값이 아니라, button이라는 속성 값이 있기만 하면 무조건 선택이 되는 기능입니다. 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>example</title>
  <style>
    ul {
      list-style: none;
    }
    li {
      display: inline-block;
      margin: 10px;
    }
    li a {
      padding: 5px 20px;
      font-size: 15px;
      color: blue;
      text-decoration: none;
    }
    .flat {
      background: white;
      border: 1px solid black;
    }
    a[class ~= "button"] {
      box-shadow: rgba(0,0,0,0.5) 5px 5px;
      border-radius: 6px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
	<ul>
		<li><a href="#" class="flat">MENU 1</a></li>
		<li><a href="#" class="flat">MENU 2</a></li>
		<li><a href="#" class="button">MENU 3</a></li>
		<li><a href="#" class="flat button" >MENU 4</a></li>
  </ul>
</body>
</html>

 

 

 

 

위에서 button이라는 속성 값이 들어간 MENU 3, MENU 4가 모두 선택되었습니다. 

 

 

 

'Programming > HTML+CSS' 카테고리의 다른 글

[CSS] 6. 고급 선택자(2) - 속성 선택자 3  (0) 2023.06.06
[CSS] 6. 고급 선택자(2) - 속성 선택자 2  (0) 2023.06.05
[CSS] 6. 고급 선택자(1) - 연결 선택자 2  (0) 2023.05.24
[CSS] 6. 고급 선택자(1) - 연결 선택자 1  (0) 2023.05.20
[CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과3  (0) 2023.05.16

'Programming/HTML+CSS' Related Articles

티스토리툴바