<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{color:blue;}
#ctxt{color:red;}
.ctxt{color:gray;}
</style>
</head>
<body>
<p>머리가 좋아지는 음식</p>
<p id="ctxt">건강에 좋은 차</p>
<p>머리가 좋아지는 음식</p>
<p class="ctxt">잠이 잘 오는 집</p>
<p id="ctxt">서울에서 두번째로 맛있는 집</p>
</body>
</html>
- Ex_ *태그
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{color:blue;}
</style>
</head>
<body>
<h1>입고신고쓰고끼는 것들..</h1>
<ul>
<li>옷</li>
<li>신발</li>
<li>안경</li>
<li>장갑</li>
</ul>
<p class="ctxt">발이 편한 신발과 눈이 편한 안경은 필수이다.</p>
</body>
</html>
- Ex_ 자식 선택자, 인접 선택자
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li > p{color:blue;}
h2 + p{color:red;}
#ctxt + p > span{color:yellow;}
</style>
</head>
<body>
<h1>자식 선택자</h1>
<ul>
<li><p>7월의 여행지</p></li>
<li><p>8월의 여행지</p></li>
</ul>
<p>내년의 여행지</p>
<h1>인접 선택자</h1>
<h2>엑스포 안내</h2>
<p>책자를 배부하고 있습니다.</p>
<p>안내데스크를 활용하시기 바랍니다.</p>
<h1 id="ctxt">건강해지는 차</h1>
<p>머리와 피부에 좋은 차는 어떤 것들일까.
<span>차의 종류</span>
에 대해 알아보도록 합시다.
</p>
</body>
</html>
자식 선택자: >
인접 선택자: +
- Ex_ 클래스 속성만 색 변경
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1[class]{color:blue;}
</style>
</head>
<body>
<h1 class="logo">서울특별시</h1>
<p>주소록을 작성합니다.</p>
<h1>경기도</h1>
<p>전화번호부를 작성합니다.</p>
<h1 class="logo1">경기도</h1>
</body>
</html>
- Ex_ 가상클래스 선택자(hover)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{color:blue;}
a:hover{color:red;}
</style>
</head>
<body>
<ul>
<li><a href="#">COMPANY</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">SERVICE</a></li>
</ul>
</body>
</html>
- Ex_ 가상클래스 선택자(focus)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:focus{color:red;}
</style>
</head>
<body>
<p>가상 클래스 선택자</p>
<ul>
<li><a href="#">COMPANY</a></li>
<li><a href="#1">PRODUCT</a></li>
<li><a href="#2">SERVICE</a></li>
</ul>
<ul>
<li><a href="#네이버">네이버</a></li>
<li><a href="#네이트">네이트</a></li>
<li><a href="#다음">다음</a></li>
</ul>
</body>
</html>
- Ex_ 가상클래스 선택자(visited)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:focus{color:red;}
a:visited{color:yellow;}
</style>
</head>
<body>
<p>가상 클래스 선택자</p>
<ul>
<li><a href="#">COMPANY</a></li>
<li><a href="#1">PRODUCT</a></li>
<li><a href="#2">SERVICE</a></li>
</ul>
<ul>
<li><a href="#네이버">네이버</a></li>
<li><a href="#네이트">네이트</a></li>
<li><a href="#다음">다음</a></li>
</ul>
</body>
</html>
- Ex_ 수도 클래스 선택자
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>수도클래스 선택자</title>
<style type="text/css">
p{border-bottom:1px dashed #000;}
p:first-letter{font-size:300%}
p:last-child{border:none;}
.box:after{content:"항목 추가"; color:red;}
p:first-child{color:red;}
</style>
</head>
<body>
<div class="box">
<p>COMPANY</p>
<p>PRODUCT</p>
<p>SERVICE</p>
</div>
</body>
</html>
- Ex_ 종속 선택자
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>종속 선택자</title>
<style type="text/css">
ul.box a{color:red;}
p.more a{color:blue;}
p#ctxt a{color:yellow;}
</style>
</head>
<body>
<ul class="box">
<li><a href="#">202호 - 프로젝트 출발</a></li>
<li><a href="#">204호 - 프로젝트 진행</a></li>
<li><a href="#">208호 - 대기</a></li>
</ul>
<p class="more"><a href="#">더보기</a></p>
<p id="ctxt"><a href="#">안녕</a></p>
</body>
</html>
- Ex_ 하위 선택자, 그룹 선택자
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>하위 선택자</title>
<style type="text/css">
ul.box li a{color:red;}
.box1 > li > a{color:yellow;}
h1, p{border:1px solid #000;} /* 그룹 선택자 */
</style>
</head>
<body>
<ul class="box">
<li><a href="#">202호 - 프로젝트 출발</a></li>
<li><a href="#">204호 - 프로젝트 진행</a></li>
<li><a href="#">208호 - 대기</a></li>
</ul>
<ul class="box1">
<li><a href="#">202호 - 프로젝트 출발</a></li>
<li><a href="#">204호 - 프로젝트 진행</a></li>
<li><a href="#">208호 - 대기</a></li>
</ul>
<h1>웹 표준 퍼블리싱</h1>
<p>웹디자인의 한 분야로 원래 용어는 웹콘첸츠 UI 디자인이다.</p>
</body>
</html>
25. 컴퓨터학과 졸업 / SQLD, 정보처리기사 취득