CSS_01_ 연결 선택자

hyeong taek jo·2023년 8월 13일

HTML

목록 보기

8/10

📌 1. 그룹 선택자

여러 선택자를 한꺼번에 적용하고 싶을때, 선택자들을 쉼표(,)로 구분하여 연결하면 그룹으로 스타일이 적용된다.

h2 { color: navy; }

h2, h3 { text-align: center; }

h2, h3, p { background-color: lightgray; }

📌 2. 하위 선택자

부모요소에 포함된 하위 요소 모두에 스타일이 적용되는 것

ul li {
		margin: 10px;
	}

📌 3. 자식 선택자

<style>
	#container > ul {
  	border: 1px solid blue
	}
</style>
</head>
<body>
	<section id="container">
	 <h1>예약 방법 및 요금</h1>
	 <ul>
	 	<li>직접 통화</li>
		<li>문자 남기기</li>
	</ul>
	<ul>
		<li>1인 : 40,000원</li>
		<li>2인 : 60,000원</li>
		<li>3인 : 80,000원</li>
		<li>4인 : 100,000원</li>
	</ul>
	</section>
</body>

📌 4. 인접 형제 선택자

#E+F{
  margin: 0 auto;
  width: 1080px;
}
E의 다음 형제 요소 F 하나만 선택

<style type="text/css">
	h1 + ul { /* h1의 요소 다음의 첫번째 ul요소에 적용할 스타일 */
		color: blue;
		font-weight: bold;
	}
</style>
</head>
<body>
	<section id="container">
	 <h1>예약 방법 및 요금</h1>
	 <ul>
	 	<li>직접 통화</li>
		<li>문자 남기기</li>
	</ul>
	<ul>
		<li>1인 : 40,000원</li>
		<li>2인 : 60,000원</li>
		<li>3인 : 80,000원</li>
		<li>4인 : 100,000원</li>
	</ul>
	</section>
</body>

예약 방법 및 요금

직접 통화
문자 남기기

1인 : 40,000원
2인 : 60,000원
3인 : 80,000원
4인 : 100,000원

📌 5. 형제 선택자

#E~F{
  margin: 0 auto;
  width: 1080px;
}
E의 다음 형제 요소 F 모두 선택

<style type="text/css">
	h1 ~ ul { /* h1의 요소 다음의 첫번째 ul요소에 적용할 스타일 */
		color: blue;
		font-weight: bold;
	}
</style>
</head>
<body>
	<section id="container">
	 <h1>예약 방법 및 요금</h1>
	 <ul>
	 	<li>직접 통화</li>
		<li>문자 남기기</li>
	</ul>
	<ul>
		<li>1인 : 40,000원</li>
		<li>2인 : 60,000원</li>
		<li>3인 : 80,000원</li>
		<li>4인 : 100,000원</li>
	</ul>
	</section>
</body>