3. 선택자 활용
페이지 정보
작성자 관리자 댓글 0건 조회 513회 작성일 22-01-05 22:44본문
3. 선택자 활용
실습 : css3.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS(Cascade Style Sheet)</title>
</head>
<body>
<section id="container">
<header>
<h1>스타일시트 연습</h1>
</header>
<p>선택자 활용방법 1</p>
<p>선택자 활용방법 2</p>
<ul id="navi">
<li>메인메뉴1
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
</ul>
</li>
<li>메인메뉴2</li>
<li>메인메뉴3</li>
</ul>
<ul id="foodMenu">
<li>짬뽕</li>
<li>짜장면</li>
<li>볶음밥</li>
<li>잡채밥</li>
</ul>
</section>
</body>
</html>
내부에 스타일을 추가한다. <head> </head> 태그 내에 아래 내용을 추가한다.
<style type="text/css">
ul {
color : blue;
}
/*class는 .이름, id는 #이름 */
#navi {
color:green;
}
</style>
웹브라우저로 확인한다.
스타일을 다음과 같이 수정한다.
<style type="text/css">
ul {
color : blue;
}
/*class는 .이름, id는 #이름 */
#navi {
color:green;
}
li {
color : red;
}
</style>
스타일을 다음과 같이 수정한다.
<style type="text/css">
ul {
color : blue;
}
/*class는 .이름, id는 #이름 */
#navi {
color:green;
}
#navi li {
color : red;
}
</style>
스타일을 다음과 같이 수정한다.
<style type="text/css">
ul {
color : blue;
}
/*class는 .이름, id는 #이름 */
#navi {
color:green;
}
#navi li ul li {
color : red;
}
</style>
<style type="text/css">
ul + #foodMenu {
color:red;
}
/* ul태그와 인접한 foodMenu 에 스타일 적용*/
header + p {
color:blue;
}
/*header와 인접한 p태그만 적용 */
</style>
header 다음의 모든 p태그에 적용한다.
<style type="text/css">
header ~ p {
color:blue;
}
</style>
p태그 다음의 모든 ul태그에 적용된다.
<style type="text/css">
p ~ ul {
color:blue;
}
</style>
p태그와 foodMenu에만 적용한다.
<style type="text/css">
p,#foodMenu {
color:blue;
}
</style>
ul li:nth-child(n)
:ul태그 안에서 자식요소인 n번째 li요소에 스타일 적용
<style type="text/css">
#foodMenu li:nth-child(3){
color:red;
text-decoration:underline;
}
#foodMenu li:first-child{
color:green;
}
#foodMenu li:last-child{
color:darkgray;
}
</style>
댓글목록
등록된 댓글이 없습니다.