728x90
반응형
문제
- container의 자식 p태그의 글자 색 빨간색
- p_color 클래스의 하위 모든 p태그 백그라운드 회색으로 변경
- p_color 클래스와 같은 레벨(형제 요소)에 있는 div_color 클래스에 있는 p태그의 글자색을 파란색으로 변경
- p_color 클래스의 자식요소에 있는 div_color 클래스의 모든 요소의 글자색을 초록색으로 변경
- container 클래스의 모든 하위 p태그의 테두리를 1px, solid, black 로 변경
<body>
<div id="container">
<h1>HTML/CSS/JAVASCRIPT</h1>
<p>HTML 태그는 쉽다.</p>
<p>미디어쿼리는 중요하다.</p>
<div class="p_color">
<p>CSS는 어렵다.</p>
<div class="div_color">
<p>오라클은 재있다.</p>
<h2>JQuery는 꿀잼이다.</h2>
<span>JSP는 노잼이다.</span>
</div>
<p>JAVASCRIPT는 더 어렵다.</p>
</div>
<div class="div_color">
<p>자바는 쉬웠다.</p>
</div>
</div>
</body>
코드
<style>
/* container의 자식 p태그의 글자 색 빨간색 */
#container > p {
color: red;
}
/* p_color 클래스의 하위 모든 p태그 백그라운드 회색으로 변경 */
.p_color p {
background-color: #ccc;
}
/* p_color 클래스와 같은 레벨(형제 요소)에 있는 div_color 클래스에 있는 p태그의 글자색을 파란색으로 변경 */
.p_color ~ .div_color p {
color: blue;
}
/* p_color 클래스의 자식요소에 있는 div_color 클래스의 모든 요소의 글자색을 초록색으로 변경 */
.p_color > .div_color {
color: green;
}
/* container 클래스의 모든 하위 p태그의 테두리를 1px, solid, black 로 변경 */
#container p {
border: 1px solid black;
}
</style>
출력 결과
728x90
반응형
'HRD_훈련 > 실습' 카테고리의 다른 글
| [CSS] 프롬포트 실습 (29일차) (0) | 2023.06.26 |
|---|---|
| [CSS] 선택자 실습 (29일차) (0) | 2023.06.26 |
| [CSS] Background 문제 (28일차) (0) | 2023.06.24 |
| [CSS] 스크립트 onclick 실습 (28일차) (0) | 2023.06.23 |
| [CSS] Postion 실습 (27일) (0) | 2023.06.22 |