11주차 - jsp&css (6) 자식 객체에 스타일 적용하기
2022. 9. 13. 19:07ㆍjsp/css
이번의 목표
01. 자식 객체에 스타일을 적용해보자.
02. 자식의 자식 객체에도 스타일을 적용해보자.
03. 자식의 자식 객체에서 id와 class를 이용하여 스타일을 적용해보자.
네이버의 홈페이지 html 코드를 보면 <div> 안에 하위 <div>가 몇번이고 반복 되는 것을 알 수 있습니다.
이럴 때에도 하위의 범위를 지정하여 스타일을 적용할 수 있습니다.
01. jsp 코드
02. 실행 화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex05</title>
<style type="text/css">
div ul { color: red;}
div h2 {
color: yellow;
background-color: purple;
}
div ul li {
display: inline;
}
div ul li#id1{
color: blue;
}
div ul li.class1{
color: fuchsia;
}
</style>
</head>
<body>
<div>
<h2>Descendant Selector_1</h2>
<ul>
<li>자식의 자식 (후손1)</li>
<li>자식의 자식 (후손2)</li>
<li>자식의 자식 (후손3)</li>
<li id="id1">자식의 자식 (후손4)</li>
<li class="class1">자식의 자식 (후손5)</li>
</ul>
</div>
<h2>Descendant Selector_2</h2>
</body>
</html>02. 실행 화면
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (8) 가상 클래스 (0) | 2022.09.13 |
|---|---|
| 11주차 - jsp&css (7) 가상 클래스 (0) | 2022.09.13 |
| 11주차 - jsp&css (5) [] 속성을 이용하여 스타일을 적용하기 (0) | 2022.09.13 |
| 11주차 - jsp&css (4) .class class를 지정하여 스타일을 적용하기 (0) | 2022.09.13 |
| 11주차 - jsp&css (3) #id 아이디를 지정하여 스타일을 적용하기 (0) | 2022.09.13 |