- 후손 태그, 자손 태그
선택자1 선택자2 {} : 선택자1의 후손태그 중 선택자2인 태그 선택
선택자1 > 선택자2 {} : 선택자1의 자식태그 중 선택자2인 태그 선택
선택자1 , 선택자2 {} : 선택자1태그 이거나 선택자2인 태그 선택
선택자1선택자2 {} : 선택자1 인 경우와 선택자2인 경우 같이 가지고 있는 태그 선택
- id 선택자 , 클래스 선택자
id 선택자 :
웹 페이지에서 유일무이한 단 하나의 특정 영역 지정하여 CSS 명령 적용
id명 앞에 샾(#) 붙여야 한다.
클래스 선택자 :
두 군데 이상의 특정 영역 지정하여 동일한 CSS 적용
반드시 클래스 명 앞에 점(.) 붙여야 한다.
📌
<!DOCTYPE html>
<!-- src/main/webapp/6/selector4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>후손 태그 선택, 자손태그 선택</title>
</head>
<body>
<h1 class="title">h1 class="title" 태그</h1>
<div id="header">
<h1 class="title">h1 class="title" 태그</h1>
<div id="nav">
<h1>div id="nav" 하위 h1 태그</h1>
</div>
<p>#header 태그의 하위 p태그
</div>
<h1 id="content">body의 하위 h1 태그</h1>
<p>body 태그의 하위 p태그
</body>
</html>
📌
<!DOCTYPE html>
<!-- src/main/webapp/6/selector4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>후손 태그 선택, 자손태그 선택</title>
<style>
/* #header 태그의 하위 태그 중 h1태그의 글자색을 빨강색으로*/
#header h1{
color : red;
}
</style>
</head>
<body>
<h1 class="title">h1 class="title" 태그</h1>
<div id="header">
<h1 class="title">h1 class="title" 태그</h1>
<div id="nav">
<h1>div id="nav" 하위 h1 태그</h1>
</div>
<p>#header 태그의 하위 p태그
</div>
<h1 id="content">body의 하위 h1 태그</h1>
<p>body 태그의 하위 p태그
</body>
</html>
📌
<!DOCTYPE html>
<!-- src/main/webapp/6/selector4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>후손 태그 선택, 자손태그 선택</title>
<style>
/* #header 태그의 하위 태그 중 h1태그의 글자색을 빨강색으로*/
#header h1{
color : red;
}
/* #header 태그의 자식 태그 중 h1태그의 글자색을 분홍색으로*/
#header > h1{
color : pink;
}
</style>
</head>
<body>
<h1 class="title">h1 class="title" 태그</h1>
<div id="header">
<h1 class="title">h1 class="title" 태그</h1>
<div id="nav">
<h1>div id="nav" 하위 h1 태그</h1>
</div>
<p>#header 태그의 하위 p태그
</div>
<h1 id="content">body의 하위 h1 태그</h1>
<p>body 태그의 하위 p태그
</body>
</html>
📌
<!DOCTYPE html>
<!-- src/main/webapp/6/selector4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>후손 태그 선택, 자손태그 선택</title>
<style>
/* #header 태그의 하위 태그 중 h1태그의 글자색을 빨강색으로*/
#header h1{
color : red;
}
/* #header 태그의 자식 태그 중 h1태그의 글자색을 분홍색으로*/
#header > h1{
color : pink;
}
/* #header 태그 또는 h1태그의 글자색을 파란색으로*/
#header , h1{
color : blue;
}
</style>
</head>
<body>
<h1 class="title">h1 class="title" 태그</h1>
<div id="header">
<h1 class="title">h1 class="title" 태그</h1>
<div id="nav">
<h1>div id="nav" 하위 h1 태그</h1>
</div>
<p>#header 태그의 하위 p태그
</div>
<h1 id="content">body의 하위 h1 태그</h1>
<p>body 태그의 하위 p태그
</body>
</html>
📌
<!DOCTYPE html>
<!-- src/main/webapp/6/selector4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>후손 태그 선택, 자손태그 선택</title>
<style>
/* #header 태그의 하위 태그 중 h1태그의 글자색을 빨강색으로*/
#header h1{
color : red;
}
/* #header 태그의 자식 태그 중 h1태그의 글자색을 분홍색으로*/
#header > h1{
color : pink;
}
/* #header 태그 또는 h1태그의 글자색을 파란색으로*/
#header , h1{
color : blue;
}
/*div 태그의 배경색을 노랑색 설정*/
div{
background: yellow;
}
</style>
</head>
<body>
<h1 class="title">h1 class="title" 태그</h1>
<div id="header">
<h1 class="title">h1 class="title" 태그</h1>
<div id="nav">
<h1>div id="nav" 하위 h1 태그</h1>
</div>
<p>#header 태그의 하위 p태그
</div>
<h1 id="content">body의 하위 h1 태그</h1>
<p>body 태그의 하위 p태그
</body>
</html>
📌
<!DOCTYPE html>
<!-- src/main/webapp/6/selector4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>후손 태그 선택, 자손태그 선택</title>
<style>
/* #header 태그의 하위 태그 중 h1태그의 글자색을 빨강색으로*/
#header h1{
color : red;
}
/* #header 태그의 자식 태그 중 h1태그의 글자색을 분홍색으로*/
#header > h1{
color : pink;
}
/* #header 태그 또는 h1태그의 글자색을 파란색으로*/
#header , h1{
color : blue;
}
/*div 태그의 배경색을 노랑색 설정*/
div{
background: yellow;
}
/* #header 태그의 하위의 #nav 태그의 배경색을 초록색으로*/
#header #nav {
background : green;
}
</style>
</head>
<body>
<h1 class="title">h1 class="title" 태그</h1>
<div id="header">
<h1 class="title">h1 class="title" 태그</h1>
<div id="nav">
<h1>div id="nav" 하위 h1 태그</h1>
</div>
<p>#header 태그의 하위 p태그
</div>
<h1 id="content">body의 하위 h1 태그</h1>
<p>body 태그의 하위 p태그
</body>
</html>
📌
<!DOCTYPE html>
<!-- src/main/webapp/6/selector4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>후손 태그 선택, 자손태그 선택</title>
<style>
/* #header 태그의 하위 태그 중 h1태그의 글자색을 빨강색으로*/
#header h1{
color : red;
}
/* #header 태그의 자식 태그 중 h1태그의 글자색을 분홍색으로*/
#header > h1{
color : pink;
}
/* #header 태그 또는 h1태그의 글자색을 파란색으로*/
#header , h1{
color : blue;
}
/*div 태그의 배경색을 노랑색 설정*/
div{
background: yellow;
}
/* #header 태그의 하위의 #nav 태그의 배경색을 초록색으로*/
#header #nav {
background : green;
}
/*h1태그 중 class속성이 title인 태그의 배경색을 파랑색으로 설정*/
h1.title {
background: blue;
}
</style>
</head>
<body>
<h1 class="title">h1 class="title" 태그</h1>
<div id="header">
<h1 class="title">h1 class="title" 태그</h1>
<div id="nav">
<h1>div id="nav" 하위 h1 태그</h1>
</div>
<p>#header 태그의 하위 p태그
</div>
<h1 id="content">body의 하위 h1 태그</h1>
<p>body 태그의 하위 p태그
</body>
</html>
📌
<!DOCTYPE html>
<!-- src/main/webapp/6/selector4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>후손 태그 선택, 자손태그 선택</title>
<style>
/* #header 태그의 하위 태그 중 h1태그의 글자색을 빨강색으로*/
#header h1{
color : red;
}
/* #header 태그의 자식 태그 중 h1태그의 글자색을 분홍색으로*/
#header > h1{
color : pink;
}
/* #header 태그 또는 h1태그의 글자색을 파란색으로*/
#header , h1{
color : blue;
}
/*div 태그의 배경색을 노랑색 설정*/
div{
background: yellow;
}
/* #header 태그의 하위의 #nav 태그의 배경색을 초록색으로*/
#header #nav {
background : green;
}
/*h1태그 중 class속성이 title인 태그의 배경색을 파랑색으로 설정*/
h1.title {
background: blue;
}
/*h1태그 중 id속성이 content인 태그의 글자크기를 20px로 설정*/
h1#content{
font-size : 20px;
}
</style>
</head>
<body>
<h1 class="title">h1 class="title" 태그</h1>
<div id="header">
<h1 class="title">h1 class="title" 태그</h1>
<div id="nav">
<h1>div id="nav" 하위 h1 태그</h1>
</div>
<p>#header 태그의 하위 p태그
</div>
<h1 id="content">body의 하위 h1 태그</h1>
<p>body 태그의 하위 p태그
</body>
</html>
'수업(국비지원) > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] CSS선택자(selector) - 메뉴만들기 (0) | 2023.04.17 |
|---|---|
| [HTML/CSS] CSS선택자(selector) - 박스 모델(Box Model) (0) | 2023.04.17 |
| [HTML/CSS] CSS선택자(selector) - CSS 이용한 디자인과 내용 구분 (0) | 2023.04.17 |
| [HTML/CSS] CSS선택자(selector) (0) | 2023.04.17 |
| [HTML/CSS] CSS 적용 - 외부 CSS Style변경, 글자 스타일 지정, 목록 스타일 지정하기 (0) | 2023.04.17 |
