728x90
<style>
p{
/*
font-family 에 복수개의 값을 입력하는 경우가 많다.
글꼴이 없을 때 뒤에 있는 다른 글꼴들로 대체하기 위해서
*/
font-family: "궁서체";
font-size: 30px;
font-weight: bold;
font-style: italic;
}
</style>- font-family에 복수개의 값을 입력하는 경우가 많다. 글꼴이 없을 때 뒤에 있는 다른 글꼴들로 대체하기 위해서
- font-size 는 글자의 크기 font의 기본 크기는 16xp
- font-weight는 글지를 두껍게 만든다
- font-style은 폰트의 스타일로 이탤릭체가 대표적이다
★ 선택자는 선택되는 범위가 좁으면 좁을수록 우선순위가 높다!
1. 전체 선택자(*) : html태그 모두에게 공통적으로 스타일에 부여
<style>
/*
1. 전체 선택자(*) : html태그 모두에게 공통적으로 스타일에 부여
*/
*{
color: blue;
}
</style>
</head>
<body>
<p>p태그 영역</p>
<p>p태그 영역</p>
<span>span태그 영역</span>
<span>span태그 영역</span>
</body>
</html>
2. 태그 선택자(태그명) : 특정 태그에게 스타일을 부여
<style>
/*
★ 선택자는 선택되는 범위가 좁으면 좁을수록 우선순위가 높다!
1. 전체 선택자(*) : html태그 모두에게 공통적으로 스타일에 부여
2. 태그 선택자(< >): 특정 태그에게 스타일을 부여
*/
*{
color: blue;
}
p{
color: red;
}
</style>
</head>
<body>
<p>p태그 영역</p>
<p>p태그 영역</p>
<span>span태그 영역</span>
<span>span태그 영역</span>
</body>
</html>
3. 클래스 선택자( . ) : 태그들 중에 클래스 값을 가지고 있는 요소에게 부여(중복가능)
<style>
/*
★ 선택자는 선택되는 범위가 좁으면 좁을수록 우선순위가 높다!
1. 전체 선택자(*) : html태그 모두에게 공통적으로 스타일에 부여
2. 태그 선택자(태그명) : 특정 태그에게 스타일을 부여
3. 클래스 선택자( . ) : 태그들 중에 클래스 값을 가지고 있는 요소에게 부여(중복가능)
4. 아이디 선택자( # ) : 태그들 중엥 유일한 아이디 값을 가지고 있는 요소에게 부여(중복불가)
*/
*{
color: blue;
}
p{
color: red;
}
.txt{
color: yellow;
}
</style>
</head>
<body>
<p class="txt">p태그 영역</p>
<p>p태그 영역</p>
<span class="txt">span태그 영역</span>
<span>span태그 영역</span>
</body>
</html>
4. 아이디 선택자( # ) : 태그들 중엥 유일한 아이디 값을 가지고 있는 요소에게 부여(중복불가)
<style>
/*
★ 선택자는 선택되는 범위가 좁으면 좁을수록 우선순위가 높다!
1. 전체 선택자(*) : html태그 모두에게 공통적으로 스타일에 부여
2. 태그 선택자(태그명) : 특정 태그에게 스타일을 부여
3. 클래스 선택자( . ) : 태그들 중에 클래스 값을 가지고 있는 요소에게 부여(중복가능)
4. 아이디 선택자( # ) : 태그들 중엥 유일한 아이디 값을 가지고 있는 요소에게 부여(중복불가)
*/
*{
color: blue;
}
p{
color: red;
}
.txt{
color: yellow;
}
#name{
color: purple;
}
</style>
</head>
<body>
<p class="txt">p태그 영역</p>
<p >p태그 영역</p>
<span class="txt">span태그 영역</span>
<span id="name">span태그 영역</span>
</body>
</html>
우선순위 = 전체 < 태그 < 클래스 < 아이디
우선순위가 낮은 순으로 지정한 뒤 우선순위가 높은 순으로 덮어 씌운다는 개념으로 이해하자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
자손 선택자(공백) : 특정태그를 기준으로 밑에 포함된 모든 태그들을 자손
자식 선택자(>) : 특정태그를 기준으로 바로 밑에 있는 태그를 자식
형제 선택자(+) : 특정태그를 기준으로 내 바로 앞에 있는 태그를 가지고 올때
*/
body li{
color: red;
}
body > p{
color: blue;
}
h1 > p{
color: yellow;
}
body > h1 > p{
}
h1 + p{
color: purple;
}
h1 + ul{
color: aqua;
}
</style>
</head>
<body>
<h1>
<p>h1태그</p>
</h1>
<p>p태그</p>
<ul>
<li>li태그</li>
<li>li태그</li>
<li>li태그</li>
</ul>
</body>
</html>코드 결과 화면
가상 클래스 선택자(nth-child(n)) : 특정태그를 기준으로 몇번째 자식을 선택할때 사용
ul태그에 명시되지않는 2번째 li태그를 불러올때
==> ul > li:nth-child(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
1. hover : 마우스를 올렸을 때, 땟을때 동작
2. active : 마우스를 클릭했을 때
- 항상 active는 hover밑에 작성
*/
h1:hover{
color: blueviolet;
}
h1:active{
color: red;
}
</style>
</head>
<body>
<h1>반응 선택자를 통한 스타일 변경!</h1>
</body>
</html>
게임으로 익혀보자!
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
ps. 다 알면 좋겠지만.. 클래스(.)/2.아이디(#)/3.자식/4.가상클래스 만이라도 기억하자!
728x90
'Study > HTML,CSS' 카테고리의 다른 글
| HTML/CSS기초 4일차 공간활용( margin, padding, border) (0) | 2022.10.06 |
|---|---|
| HTML/CSS기초 2일차 <a>,<table>,<Form>,<input> (1) | 2022.10.04 |
| HTML/CSS기초 1일차 (1) | 2022.10.01 |