수업/└HTML&CSS
[2022.01.03]CSS_selector
onlyun
2022. 1. 5. 00:16
1. work_01 : selector
(1) 결과 출력
(2) 소스 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2022.01.03_Insert title here</title>
<link type="text/css" rel="stylesheet" href="0103_css_sel2.css">
<style>
body {
background-color:rgb(247, 247, 144);
}
</style>
</head>
<body>
<h1>가벼운 마음으로 배우는-녹색</h1>
<P text="g">Healing green</P>
<h1 class="ccoma1">가벼운 마음으로 배우는-파란색</h1>
<p text="b">Relaxing blue</p>
<h1 class="ccoma2">가벼운 마음으로 배우는-빨간색</h1>
<p text="r">Passion red</p>
</body>
</html>(+) 참조된 외부 스타일 시트 코드
#main {
background-color:yellow;
}
.s1, .s2 {
color:white; background-color:brown;
}
div > ul > li {
font-size:20px; font-weight:bold;
}
.att {
font-size:16px; color:green;
}
.s3 {
font-size:24px;
font-style:italic; font-weight:bold;
color:blue;
}
p.s2 + ul > li {
color:white; background-color:rgb(71, 13, 13);
margin-top:5px; margin-bottom:5px;
padding-top:2.5px; padding-bottom:2.5px;
}
ul {
list-style-type:square;
}
2. work_02 : selector_list
(1) 결과 출력
(2) 소스 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2022.01.03 CSS Selector</title>
<link type="text/css" rel="stylesheet" href="0103_css_sel.css">
</head>
<body>
<p>Div 요소의 아이디 #main </p>
<p class="s1">선택자_1</p>
<p id="main">아이디 #main 하위의 div 요소 1</p>
<div>
<ul>
<li>클래스 선택자</li>
<li>아이디 선택자</li>
<li class="att">속성 선택자</li>
</ul>
</div>
<p class="s2">선택자_2</p>
<ul>
<li>클래스 선택자_2</li>
<li>아이디 선택자_2</li>
<li>속성 선택자_2</li>
</ul>
<p class="s3">선택자_3</p>
</body>
</html>(+) 참조된 외부 스타일 시트 코드
h1 {
color:green;
}
.ccoma1 {
color:blue;
}
.ccoma2 {
color:red;
}
p[text] {
color:white;
}
p[text="g"] {
background-color:green;
}
p[text="b"] {
background-color:blue;
}
p[text="r"] {
background-color:red;
}
※ 소스 코드 파일 ※
0103_css_sel.css
0.00MB
0103_css_slector.html
0.00MB
-(구분선)-