LGHV_3기_CSS 고급 선택자_HTML/CSS(10.1)

Pepzera·2025년 3월 17일
LG 헬로비전 DX DATA SCHOOL 3기 공부 정리웹 개발

LGHV3기_공부정리

목록 보기
15/34

Chap 10-1 CSS 고급 선택자

CSS 고급 선택자

1. 연결 선택자

연결 선택자

  • 연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자
  • ‘컴비네이션 선택자’ 또는 ‘조합 선택자’ 라고도 함

하위 선택자 (descendant selector)

  • 부모 요소에 포함된 모든 하위 요소에 스타일이 적용됨.
  • 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용
  • 하위 선택자를 정의할 때는 상위 요소와 하위 요소를 나란히 씀
  • 기본형 - 상위요소 하위요소 { }
  • 코드 예시 )
...
  <title>고급 선택자</title>
  <style>
    body {
      background-color:#eee;
    }
    section {
      width:600px;
      margin:20px auto;
      /* border: 1px solid blue; */
    }
    p {
      width:500px;
      padding:10px;
      background-color:#fff;
      border:1px solid #ccc;
      line-height:2;
    }

    /* section 요소의 모든 하위 p 요소의 스타일 바꾸기 */
    /* 여백을 두는 것이 하위 선택자 section()p 같이*/
    /* 여백을 사용해야 자손으로 이어질 수 있음. */
    section p {  
      color:blue;   /* 글자색을 파란색으로 */
    }
  </style>
</head>
<body>
  <section>
    <h1>예약 방법 & 사용 요금</h1>
    <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
    <div>
      <p>가족실(2~4인) : 60,000원/일</p>
      <p>도미토리(4인 공용) : 25,000원/일</p>
    </div>
  </section>   
</body>
</html>
  • 결과 )

    • section p {}
      • section 요소 안의 모든 p 요소에 적용할 스타일 규칙

자식 선택자 (descendant selector)

  • 자식 요소에 스타일을 적용하는 선택자
  • 두 요소 사이에 ‘>(부등호)’를 표시해 부모 요소와 자식 요소를 구분
  • 코드 예시 )
...
  <title>고급 선택자</title>
  <style>
    body {
      background-color:#eee;
    }
    section {
      width:600px;
      margin:20px auto;
    }
    p {
      width:500px;
      padding:10px;
      background-color:#fff;
      border:1px solid #ccc;
      line-height:2;
    }

    /* section 요소의 자식 p 요소의 스타일 바꾸기 */
    section > p  {/* section 요소 안에 포함된 p 요소 중 자식 p 요소에만 적용함 */
      color:blue;  /* 글자색을 파란색으로 */
    }
    div > p{
      color: red;
    }
  </style>
</head>
<body>
  <section>
    <h1>예약 방법 & 사용 요금</h1>
    <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
    <div>
      <p>가족실(2~4인) : 60,000원/일</p>
      <p>도미토리(4인 공용) : 25,000원/일</p>
  </section>   
</body>
</html>
  • 결과 )

    • section > p {}
      • section 요소 안에 포함된 p 요소 중 자식 p 요소에만 적용함

인접 형제 선택자(adjacent selector)

  • 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용
  • 요소1과 요소2 사이에 ‘+’ 기호 사용
  • 요소1과 요소2는 같은 레벨이면서 요소1 이후 첫번째 요소2에 적용
  • 코드 예시 )
...
  <title>고급 선택자</title>
  <style>
    body {
      background-color:#eee;
    } 
    section {
      width:600px;
      margin:20px auto;
    }
    p {
      width:500px;
      padding:10px;
      background-color:#fff;
      border:1px solid #ccc;
      line-height:2;
    }

    /* h1 요소의 형제 요소 중 첫번째 p 요소의 스타일 바꾸기 */
    h1 + p{  
      background-color:#222;  /* 배경은 검은색으로 */
      color: #fff;  /* 글자는 흰색으로 */
    }
  </style>
</head>
<body>
  <section>
    <!-- h1과 p는 형제 자매 관계 -->
    <h1>예약 방법 & 이용 요금</h1>
    <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
    <p>가족실(2~4인) : 60,000원/일</p>
    <p>도미토리(4인 공용) : 25,000원/일</p>
  </section>  
</body>
</html>
  • 결과 )

    • h1 + p { }
      • h1 요소 다음에 오는 p 요소들 중, 첫번째 p 요소에만 파란색 글씨 적용

형제 선택자(sibling selector)

  • 형제 요소들에 스타일 적용
  • 인접 형제 선택자와 다른 점은 모든 형제 요소에 다 적용된다는 것
  • 요소1과 요소2 사이에 기호 ‘~’ 사용
  • 코드 예시 )
...
  <title>고급 선택자</title>
  <style>
    body {
      background-color:#eee;
    }
    section {
      width:600px;
      margin:20px auto;
    }
    p {
      width:500px;
      padding:10px;
      background-color:#fff;
      border:1px solid #ccc;
      line-height:2;
    }

    /* h1 요소와 형제인 모든 p 요소의 스타일 바꾸기 */
    h1 ~ p{  
      background-color:#222;  /* 배경은 검은색으로 */
      color:#fff;  /* 글자는 흰색으로 */
    }
  </style>
</head>
<body>
  <section>
    <h1>예약 방법 & 이용 요금</h1>
    <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
    <p>가족실(2~4인) : 60,000원/일</p>
    <p>도미토리(4인 공용) : 25,000원/일</p>
  </section>    
</body>
</html>
  • 결과 )

    • h1 ~ p { }
      • h1 요소 다음에 오는 모든 형제 p 요소에 밑줄 적용

2. 속성 선택자

[속성] 선택자

  • 지정한 속성을 가진 요소를 찾아 스타일 적용

    종류선택 요소예시
    [속성]해당 속성이 있는 요소[required]
    [속성=값]지정한 속성값이 있는 요소[target = _blank]
    [속성 ~= 값]지정한 속성값이 포함된 요소 (단어별)[class ~= button]
    [속성= 값]지정한 속성값이 포함된 요소 (하이픈 포함, 단어별)
    [속성 ^= 값]지정한 속성값으로 시작하는 요소[title ^= eng]
    [속성 $= 값]지정한 속성값으로 끝나는 요소[href $= xls]
    [속성 *= 값]지정한 속성값의 일부가 일치하는 요소[href *= w3]

  • 코드 예시 )

...
<title>속성 선택자</title>
<style>
   ul {
		 list-style:none;
   }
	 li {
		 width:120px;	 
		 display:inline-block;
		 margin:10px;
	 }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			text-decoration: none;
			font-weight: bold;
		}

		/* id 속성이 있는 a 요소의 스타일 지정하기 */
		/* [] -> 속성 선택자 */
		/* a 요소 중에서 id 속성값이 있는 요소만 적용 */
	 	a[id]{
			background:yellow;  /* 배경색 지정 */
		 	border:1px solid #ccc;  /* 테두리 지정 */
		 	font-weight:normal;  /* 글자 굵기 지정 */
	 	}
</style>
</head>

<body>
	<ul>
		<li><a>메인 메뉴 : </a></li>
		<li><a href="#" id="class1">메뉴 1</a></li>
		<li><a href="#" id="class2">메뉴 2</a></li>
		<li><a href="#">메뉴 3</a></li>
		<li><a href="#">메뉴 4</a></li>
	</ul>
  </body>
 </html>
  • 결과 )

    • a[id] {}
      • a 요소 중에서 id 속성값이 있는 요소만 적용

[속성 = 값] 선택자

  • 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용

  • 코드 예시 )

...
<title>속성 선택자</title>
<style>
  ul { 
		 list-style:none;
  }
	li {
		display: inline-block;
		padding: 5px 30px;
		border: 1px solid black;
	}
	li a {
		font-size: 16px;
		text-decoration: none;
		color:#000;
	}

	/* target 속성 값이 _blank인 a 요소에만 스타일 지정하기 */
	a[target="_blank"]{
	/* 오른쪽에 30px 여백  */
	 padding-right:30px;  
	 background:url(images/newwindow.png) no-repeat center right;  /* 배경 이미지 지정 */
	 color: red;
	}
</style>
</head>
<body>
	<ul>
		<li><a href="https://www.w3schools.com/html/" target="_blank">HTML</a></li>
		<li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
		<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
	</ul>
  </body>
 </html>
  • 결과 )

    • a[target=”_blank”] {}
      • a 요소 중에서 target 속성값이 _blank인 요소에만 적용

[속성 ~= 값] 선택자

  • 여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용

  • 코드 예시 )

...
<title>속성 선택자</title>
<style>
   ul { list-style:none; }
	 li {
		 display:inline-block;
		 margin:10px;
	  }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}
		.flat {
      background:#eee;
      border:1px solid #222;
		}

		/* class 속성 값에 button이 포함된 요소에 스타일 지정하기 */
		a[class ~= "button"]{           
      box-shadow:rgba(0,0,0,0.5) 4px 4px; /* 그림자 지정 */
      border-radius: 5px;  /* 테두리를 둥글게 */
      border:1px solid #222;  /* 테두리 지정 */
		}
</style>
</head>
<body>
	<ul>
		<li><a href="#" class="flat">메뉴 1</a></li>
		<li><a href="#" class="flat">메뉴 2</a></li>
		<li><a href="#" class="button">메뉴 3</a></li>
		<li><a href="#" class="li button" >메뉴 4</a></li>
	</ul>
  </body>
 </html>
  • 결과 )

    • a[class ~= “button”] {}
      • a 태그 내에, class 속성에 button 값이 있는 모든 요소에 적용

[속성 |= 값] 선택자

  • 특정 값이 포함된 속성을 가진 요소를 찾아 스타일 적용
  • 하이픈으로 연결해 한 단어 값을 이루는 요소에도 적용
  • 코드 예시 )
...
<title>속성 선택자</title>
<style>
   ul { list-style:none; }
	 li {
		 display:inline-block;
		 margin:10px;
	 }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}

		/* 속성 값의 시작 부분이 일치하는 요소에 스타일 지정하기 */
		a[class |= "us"]{  /* 속성값이 "us"이거나 "us-"로 시작하는 요소를 찾는 선택자 */
		  /* 속성값이 us로 일치 */
			background: url(images/us.png) no-repeat left center;
		}
		a[class |= "jap"]{  /* 속성값이 "jap"이거나 "jap-"로 시작하는 요소를 찾는 선택자 */
		  /* 하지만, 속성값이 jap 또는 jap- 가 아닌 ja 이기 때문에 적용이 안됨 */
			background: url(images/jp.png) no-repeat left center;
		}
</style>
</head>
<body>
	<ul>
		<li>외국어 서비스 : </li>
		<li><a href="#" class="us-english">영어</a></li>
		<li><a href="#" class="ja-pan">일본어</a></li>
	</ul>
</body>
 </html>
  • 결과 )

    • a[class |= “us”] {}
      • class가 “us-”로 시작하는 한 단어이므로 스타일 적용됨
    • a[class |= “jap”] {}
      • class가 “jap”도 “jap-”도 아닌 ja이므로 스타일 적용 X

[속성 ^= 값] 선택자

  • 특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일 적용
  • 코드 예시 )
...
<title>속성 선택자</title>
<style>
   ul {
		 list-style:none;
   }
	 li {
		 display:inline-block;
		 margin:10px;
	 }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}

		/* 속성 값의 시작 부분이 일치하는 요소에 스타일 지정하기 */
		a[title ^= "eng"]{  /* 속성값이 "eng"로 시작하는 요소를 찾는 선택자 */
			background: url(images/us.png) no-repeat left center;
			padding: 5px 25px;
		}
		a[title ^= "jap"]{  /* 속성값이 "jap"로 시작하는 요소를 찾는 선택자 */
			background: url(images/jp.png) no-repeat left center;
			padding: 5px 25px;
		}
</style>
</head>

<body>
	<ul>
		<li>외국어 서비스 : </li>
		<li><a href="#" title="english">영어</a></li>
		<li><a href="#" title="asiajapan">일본어</a></li>
	</ul>
  </body>
 </html>
  • 결과 )

    • a[title ^= “eng”] {}
      • 속성값이 “eng”로 시작하므로 스타일 적용
    • a[title ^= “jap”] {}
      • 속성값이 “jap”로 시작하지 않으므로 스타일 적용 X

[속성 $= 값] 선택자

  • 특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일 적용
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:square;
   }
		li a {
			line-height:30px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}

		/* 속성 값의 끝 부분이 일치하는 요소에 스타일 지정하기 */
		a[href $= hwp]{ /* 연결한 파일의 확장자가 hwp인 링크 */
			background: url(images/hwp_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
			padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
		}
		a[href $= xls]{ /* 연결한 파일의 확장자가 hwp인 링크 */
			background: url(images/excel_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
			padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
		}
</style>
</head>

<body>
	<h3>회사 소개 파일 다운 받기</h3>
	<ul>
		<li><a href="intro.hwp">hwp 파일</a></li>
		<li><a href="intro.xls">엑셀 파일</a></li>
	</ul>
  </body>
 </html>
  • 결과 )

    • a[href $= hwp] {}
      • 속성값이 “hwp”로 끝나므로 스타일이 적용됨
    • a[href $= xls] {}
      • 속성값이 “xls”로 끝나므로 스타일이 적용됨

[속성 *= 값] 선택자

  • 값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:circle;
   }
	li {
		padding: 5px 30px;
	}
	li a {
		font-size: 16px;
		color: black;
		text-decoration: none;
	}
	/* 속성 값의 일부가 일치하는 요소에 스타일 지정하기 */
	a[href *= "w3"]{  /* href 속성값 중에 w3가 있는 a 요소를 찾는 선택자 */ 
	 background:blue;
	 color:white;		 
	}
</style>
</head>

<body>
	<h1>HTML5 참고 사이트 </h1>
	<p>(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)</p>
	<ul>
		<li><a href="https://html.spec.whatwg.org/">HTML 표준안 사이트</a></li>
		<li><a href="https://caniuse.com/">HTML 지원 여부 체크</a></li>
		<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
	</ul>
</body>
</html>
  • 결과 )

    • a[href *= “w”] {}
      • href의 속성값 중에서 “w3”이 일치하므로 스타일을 적용
profile
Pepzera
Hi
이전 포스트

LGHV_3기_이미지와 그라데이션 효과로 배경 꾸미기_HTML/CSS(9.2)

다음 포스트

LGHV_3기_CSS 고급 선택자_HTML/CSS(10.2)

0개의 댓글