CSS입문
CSS_선택자(전체,클래스,아이디,일치,자식,후손,인접형제,일반형제,속성 선택자)_22.04.07(thur)
양빵빵
2022. 4. 7. 18:09
<!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>
* {
font-family: cursive;
}
body{
color:blue;
}
li {
font-weight: bold;
}
</style>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>포도</li>
<li>오렌지</li>
</ul>
<!-- div+p+spn -->
<div>당근</div>
<p>토마토</p>
<spn>오렌지</spn>
</div>
</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>
.orang{
color: orange;
}
#big{
font-size: 1.5em;
}
.reverse{
transform: rotate(180deg);
width: fit-content;
}
.shadow{
text-shadow: 1px 1px 6px #333;
}
p, span{
font-style: italic;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
.orang, #big{
}
</style>
</head>
<body>
<!-- div>(ul>li*3)+div+p+spn -->
<div class="shadow">
<!-- 전체 음영을 넣고 싶을때 전체태그 말고 클래스태그로 가능. 조상태그에 음영클래스를 넣는다. -->
<ul>
<li>사과</li>
<li class="reverse">딸기</li>
<li class="orang reverse" id="big">오렌지</li>
<!-- id="big" 은 li 오렌지에서만 쓸수 있음. id는 유일해야함. -->
</ul>
<div>당근</div>
<p>토마토</p>
<span class="orang">오렌지</span>
<!-- h1.reverse#small -->
<h1 class="reverse" id="small">클래스,아이디 적용</h1>
<!-- h2.shadow.reverse -->
<h2 class="shadow reverse">클래스 2개 적용</h2>
<!-- li 오렌지와 spn 오렌지만 새깔을 바꾸고 싶을때 태그선택자x, 클래스 선택자 사용 -->
</div>
</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>
/* li 태그 이면서 orang 클래스를 가지고 있는 요소에 적용 */
li.orang {
color: orange;
}
span.orang{
background: orange;
}
#apple{
background-color: red;
}
h1.yellow.low.primary#change{
background-color: yellow;
}
aside.banner.image#roll{
border: 1px solid red;
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<aside class="banner image" id="roll">배불러~</aside>
<!-- div>(ul>li*3)+div+p+spn -->
<div class="shadow">
<!-- 전체 음영을 넣고 싶을때 전체태그 말고 클래스태그로 가능. 조상태그에 음영클래스를 넣는다. -->
<ul>
<li id="apple">사과</li>
<li class="reverse">딸기</li>
<li class="orang reverse" id="big">오렌지</li>
<!-- id="big" 은 li 오렌지에서만 쓸수 있음. id는 유일해야함. -->
</ul>
<div>당근</div>
<p>토마토</p>
<span class="orang">오렌지</span>
<h1 id="change" class="yellow low primary">파인애플</h1>
</div>
</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>
/* 맨 뒤 선택자가 타겟, 앞에는 조건 */
ul > .orang{
color: orange;
}
.shadow > p{
font-style: italic;
}
div > em {
color:gray;
}
</style>
</head>
<body>
<em>안뇽안뇽</em>
<div class="shadow">
<em>메롱메롱</em>
<ul>
<li id="apple">사과</li>
<li class="reverse">딸기</li>
<li class="orang reverse" id="big">오렌지</li>
</ul>
<div>당근</div>
<p>토마토<em>마토</em></p>
<span class="orang">오렌지</span>
</div>
</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>
/* 맨 뒤 선택자가 타겟, 앞에는 조건 */
div .orang{
color:orange;
}
body span.orang{
background-color: brown;
}
.shadow *{
font-weight: bold;
background-color: green;
}
</style>
</head>
<body>
<em>안뇽안뇽</em>
<div class="shadow">
<em>메롱메롱</em>
<ul>
<li id="apple">사과</li>
<li class="reverse">딸기</li>
<li class="orang reverse" id="big">오렌지</li>
</ul>
<div>당근</div>
<p>토마토<em>마토</em></p>
<span class="orang">오렌지</span>
</div>
</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>
.orang + li{
color:orangered;
}
li + .orang{
color:orange;
}
li + li{
font-size: 24px;
}
</style>
</head>
<body>
<ul>
<li class="orang">어륀지</li>
<li>사과</li>
<li>딸기</li>
<li class="orang">오렌지</li>
<li>자몽</li>
<li>포도</li>
</ul>
</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>
.orang ~ li {
background: orangered;
}
</style>
</head>
<body>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orang">오렌지</li>
<li>자몽</li>
<li>포도</li>
</ul>
</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>
[type=password] {
color: red;
width: 100px;
}
[disabled] {
/* 투명도 30% */
opacity:0.8;
font-size: 0.8em;
}
/* ^: 시작, $: 끝 */
button[class^='btn']{
border-radius: 20px;
/* 모서리를 둥글게 */
}
button[class$='ss']{
background: yellowgreen;
}
</style>
</head>
<body>
<input type="text" value="hello">
<input type="password" value="1234">
<input type="text" value="작성 불가!" disabled>
<select>
<option>감자</option>
<option disabled>고구마</option>
<option>버섯</option>
</select>
<br>
<button class="norm">Normal</button>
<button class="btn-success">Success</button>
<button class="btn-danger">Danger</button>
</body>
</html>