HRD_훈련/실습
[CSS] 컬러 실습 (29일차)
리드미.
2023. 6. 26. 22:39
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
반응형