210903 금
CSS
1. 웹페이지 구성
-문서 내용 작성과 꾸미는 부분을 분리하여 내용을 수정해도 디자인을 바꿀 필요가 없고 디자인을 수정해도 글 내용을 바꿀 필요가 없음
-다양한 기기에도 디자인만 따로 적용하여 구동시킬 수 있음
2. style과 stylesheet
-style은 정해진 속성을 입력하여 웹 페이지를 꾸미는 것
-stylesheet는 웹 페이지에서 반복적으로 쓰는 style을 모아놓은 것
*스타일 기본 형식
p{text-align: center;}
1) 기본 선택자
<!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>01_기본 선택자</title>
<!-- 내부 스타일 시트 -->
<style>
/* CSS 주석 */
/*모든 선택자는 '*' 기호를 사용*/
/* * { color : red; }*/
/* 태그 선택자 테스트 */
p { color : lightgray;}
/*아이디 선택자 테스트*/
#id3{
background: lightpink;
color: white;
}
/* 클래스 선택자 테스트 */
.class1 {
background: lightskyblue;
color : white;
}
.class2 {
color: blue;
}
</style>
</head><body>
<h1>CSS 기본 선택자</h1>
<h2>선택자란</h2>
<p>
특정한 HTML 태그를 선택할 때 사용하는 기능으로,
태그를 선택하여 원하는 스타일과 기능을 적용할 수 있다
</p>
<h2>모든 선택자</h2>
<p>
HTML 문서 안의 모든 태그를 선택할 때
전체 선택자를 사용할 수 있다
</p>
<h2>태그 선택자</h2>
<p>
HTML 문서 내에 같은 태그를 모두 선택할 때 사용한다
</p>
<pre> - p { color : red; } 와 같은 형태로 사용</pre>
<h2>아이디 선택자</h2>
<p>
HTML 문서 내에 해당하는 아이디 속성의 값을 가진
태그만 선택할 때 사용한다
</p>
<pre>- #아이디명 { color : blue; } 와 같은 형태로 사용</pre>
<o1>
<li id = "id1">아이디 선택자 테스트1</li>
<li id = "id2">아이디 선택자 테스트2</li>
<!-- 아이디가 달라도 문제는 없지만 되도록 고유값을 사용해주는 것이 좋다-->
<li id = "id3">아이디 선택자 테스트3</li>
<li id = "id4">아이디 선택자 테스트4</li>
<li id = "id5">아이디 선택자 테스트5</li>
</o1>
<h2>클래스 선택자</h2>
<p>
HTML 문서 내에 여러 개의 태그를 동일한 클래스 명으로 지정하여 선택할 때 사용한다
</p>
<pre>- .클래스명 { color : purple; }와 같은 형태로 사용</pre>
<ul>
<li class = "class1">클래스 선택자 테스트1</li>
<li class = "class2">클래스 선택자 테스트2</li>
<li class = "class1">클래스 선택자 테스트3</li>
<li class = "class2">클래스 선택자 테스트4</li>
<li class = "class1">클래스 선택자 테스트5</li>
</ul>
</body>
</html>
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>02_다양한 선택자</title>
<style>
/* 속성 선택자 */
/* 속성 값이 특정 값인 태그 */
div[name=name2] {
background: lightskyblue;
}
/*속성 값이 특정 값을 단어로 포함하는 태그(띄어쓰기로 구분)*/
div[name~=name1] {
background: pink;
}
/* 속성 값이 특정 값을 단어로 포함하는 태그
('-'로 구분, '-' 앞의 내용이 값 동일해야 함)*/
div[class|=class] {
background: cyan;
}
/* 속성 값이 특정 값으로 시작하는 태그 선택*/
div[name^=name] {
background: gray;
}
/* 속성 값이 특정 값으로 끝나는 태그 선택 */
div[class$=class] {
color: white;
}
/* 속성 값이 특정 값을 포함하는 태그 선택
(해당 값이 적어도 하나 존재한다면) */
div[class*=div] {
background: salmon;
}
/* 자손, 후손 선택자 */
/* div test1의 자손 h4*/
#test1>h4 {
background: pink;
}
/* div test1의 (자손이자) 후손 ul */
#test1 ul {
background: lightgray;
}
/* div test1의 자손 ul의 자손 li*/
#test1>ul>li {
background: skyblue;
}
/* div test1의 후손 li */
#test1 li {
color: white;
}
/* 동위 선택자 */
/* 선택자 바로 뒤의 요소 선택 시 + */
#div-test1+div {
background: yellow;
}
/* 선택자 뒤에 있는 모든 요소 선택 시 ~ */
#div-test2~div {
background: orangered;
}
/* 반응 선택자 */
/* 영역 표시를 위한 스타일 */
/* 선택자 ,로 나열 */
#active-test,
#hover-test {
width: 300px;
height: 300px;
background: skyblue;
color: white;
}
/* 클릭한 태그 */
#active-test:active {
background: pink;
}
/* 마우스 오버한 태그 */
#hover-test:hover {
cursor: wait;
}
/*상태 선택자*/
/* 체크 박스가 체크 될 경우*/
input[type=checkbox]:checked {
width: 100px;
height: 100px;
}
/* 초점이 맞춰진 input 태그 선택 */
#userid:focus,
#userpwd:focus {
background: lightslategrey;
}
/*사용 불가능한 옵션 */
option:disabled {
background: lightslategrey;
}
/* 사용 가능 옵션 */
option:enabled {
background: yellowgreen;
color: white;
}
</style>
</head>
<body>
<h1>다양한 선택자</h1>
<h2>속성 선택자</h2>
<p>
기본 선택자 뒤에 []를 사용하여 속성과 속성 값을 사용한다
</p>
<pre>- 선택자[속성=속성값] { 설정 내용 } 의 형식으로 사용</pre>
<div name='name1' class='div-class'>div 1</div>
<div name='name2 name1' class='div-class'>div 2</div>
<div name='name3 name1' class='div-class'>div 3</div>
<div name='name4' class='class-div'>div 4</div>
<h2>자손/후손 선택자</h2>
<p>
자손 : 바로 아래의 요소<br>
후손 : 하위 요소 전부
</p>
<pre> 선택자 > 자손 선택자 { 설정 내용 } ,
선택자 후손 선택자 { 설정 내용 }의 형식으로 사용</pre>
<div id='test1'>
<h4>div의 자손입니다</h4>
<h4>나도 div의 자손입니다</h4>
<ul id='testul'>리스트
<li>나는 ul의 자손이면서 동시에 div의 후손입니다</li>
<li>나는 ul의 자손이면서 동시에 div의 후손입니다</li>
</ul>
</div>
<h2>동위 선택자</h2>
<p>
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용한다
</p>
<pre>- 바로 뒤의 요소 선택 시 : 선택자a + 선택자b { 설정 내용 },
- 뒤에 있는 모든 요소 선택 시 : 선택자a ~ 선택자 b { 설정 내용 } 의 형식으로 사용
</pre>
<div>
<div id='div-test1'>div test1</div>
<div id='div-test2'>div test2</div>
<div id='div-test3'>div test3</div>
<div id='div-test4'>div test4</div>
<div id='div-test5'>div test5</div>
</div>
<h2>반응 선택자</h2>
<p>
사용자의 움직임에 따라 달라지는 선택자
</p>
<pre>사용자가 클릭한 태그 : 선택자: active { 설정 내용 },
사용자의 마우스가 올라가 있는 태그 : 선택자: hover { 설정 내용 }의 형식으로 사용
</pre>
<div id='active-test'>active 테스트</div>
<br>
<div id='hover-test'>hover 테스트</div>
<h2>상태 선택자</h2>
<p>
입력 양식의 상태에 따라 선택되는 선택자
</p>
<pre>체크 상태의 input 태그 선택 : input태그: checked { 설정 내용 } 의 형식으로 사용</pre>
<input type="checkbox" id='apple' name='fruits' value='사과'>
<label for='apple'>사과</label>
<input type="checkbox" id='banana' name='fruits' value='바나나'>
<label for='banana'>바나나</label>
<input type="checkbox" id='peach' name='fruits' value='복숭아'>
<label for='peach'>복숭아</label>
<pre>초점이 맞춰진 input 태그 선택 : input 태그:focus { 설정 내용 } 의 형식으로 사용</pre>
<label>아이디 : </label>
<input type="text" id="userid" placeholder="아이디를 입력하세요">
<br>
<label>비밀번호 : </label>
<input type="password" id="userpwd" placeholder="비밀번호를 입력하세요">
<pre>사용 가능한 input 태그 선택 : input태그:enabled { 설정 내용 },
사용 불가능한 input 태그 선택 : input태그:disable { 설정 내용 } 의 형식으로 사용
</pre>
<h3>당신의 연령대는?</h3>
<select>
<option value="10" disabled>10대</option>
<option value="20">20대</option>
<option value="30">30대</option>
<option value="40">40대</option>
<option value="50">50대</option>
<option value="60" disabled>60대</option>
</select>
<br><br><br><br><br><br><br><br><br>
</body>
</html>
(1) 속성 선택자
<body>
<h1>다양한 선택자</h1>
<h2>속성 선택자</h2>
<p>
기본 선택자 뒤에 []를 사용하여 속성과 속성 값을 사용한다
</p>
<pre>- 선택자[속성=속성값] { 설정 내용 } 의 형식으로 사용</pre>
<div name = 'name1' class = 'div-class'>div 1</div>
<div name = 'name2 name1' class = 'div-class'>div 2</div>
<div name = 'name3 name1' class = 'div-class'>div 3</div>
<div name = 'name4' class = 'class-div'>div 4</div>
<h2>자손/후손 선택자</h2>
<p>
자손 : 바로 아래의 요소<br>
후손 : 하위 요소 전부
</p>
<pre> 선택자 > 자손 선택자 { 설정 내용 } ,
선택자 후손 선택자 { 설정 내용 }의 형식으로 사용</pre>
<div id = 'test1'>
<h4>div의 자손입니다</h4>
<h4>나도 div의 자손입니다</h4>
<ul id = 'testul'>리스트
<li>나는 ul의 자손이면서 동시에 div의 후손입니다</li>
<li>나는 ul의 자손이면서 동시에 div의 후손입니다</li>
</ul>
</div>1> div[name=name2]{background: lightskyblue;}일 때 / 속성 값이 특정 값인 태그
=> name2라는 값은 없으므로 아무것도 적용 안됨
2> div[name~=name1]{background : pink;}일 때 / 속성 값이 특정 값을 단어로 포함하는 태그(띄어쓰기로 구분)
=> name1이 포함된 1, 2, 3행에 모두 적용됨
3> div[class|=class]{background: cyan;}일 때 / '-'로 구분, '-' 앞의 내용이 값 동일해야 하므로
=> class명이 class-div인 4행에만 적용됨
4> div[name^=name]{background: gray;}일 때 / 속성 값이 특정 값으로 시작하는 태그 선택
=> name1, 2, 3, 4 모두 적용되어 4행 모두 선택됨
5> div[class$=class]{color : white;} / 속성 값이 특정 값으로 끝나는 태그 선택
=> class명이 div-class인 1, 2, 3행에만 적용됨
6> div[class*=div]{background: salmon;} / 속성 값이 특정 값을 포함하는 태그 선택(해당 값이 적어도 하나 존재한다면)
=> 모든 행의 클래스명은 div를 모두 포함하므로 모든 행에 적용됨
(2) 자손 후손 선택자
<h2>자손/후손 선택자</h2>
<p>
자손 : 바로 아래의 요소<br>
후손 : 하위 요소 전부
</p>
<pre> 선택자 > 자손 선택자 { 설정 내용 } ,
선택자 후손 선택자 { 설정 내용 }의 형식으로 사용</pre>
<div id = 'test1'>
<h4>div의 자손입니다</h4>
<h4>나도 div의 자손입니다</h4>
<ul id = 'testul'>리스트
<li>나는 ul의 자손이면서 동시에 div의 후손입니다</li>
<li>나는 ul의 자손이면서 동시에 div의 후손입니다</li>
</ul>
</div>1> div test1의 자손 h4
#test1 > h4 {background: pink;}일 때
=> h4를 가지고 있는 두 행이 분홍으로 바뀜
2> div test1의 (자손이자) 후손 ul
#test1 ul{background: lightgray;}일 때
=> ul 안에 포함된 세 행이 gray로 바뀜
3> div test1의 자손 ul의 자손 li
#test1 > ul > li{background: skyblue;}일 때
=> li가 포함된 두 행이 skyblue로 바뀜
4> div test1의 후손 li
#test1 li{color : white;}일 때
=> test1 li의 후손인 두 행이 white로 바뀜
(3) 동위 선택자
<h2>동위 선택자</h2>
<p>
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용한다
</p>
<pre>- 바로 뒤의 요소 선택 시 : 선택자a + 선택자b { 설정 내용 },
- 뒤에 있는 모든 요소 선택 시 : 선택자a ~ 선택자 b { 설정 내용 } 의 형식으로 사용
</pre>
<div>
<div id = 'div-test1'>div test1</div>
<div id = 'div-test2'>div test2</div>
<div id = 'div-test3'>div test3</div>
<div id = 'div-test4'>div test4</div>
<div id = 'div-test5'>div test5</div>
</div>1> 선택자 바로 뒤의 요소 선택 시
#div-test1 + div{background : yellow;}일 때
=>
2>선택자 뒤에 있는 모든 요소 선택 시
#div-test2 ~ div{background : orangered;}
(4) 반응 선택자
<h2>반응 선택자</h2>
<p>
사용자의 움직임에 따라 달라지는 선택자
</p>
<pre>사용자가 클릭한 태그 : 선택자: active { 설정 내용 },
사용자의 마우스가 올라가 있는 태그 : 선택자: hover { 설정 내용 }의 형식으로 사용
</pre>
<div id = 'active-test'>active 테스트</div>
<br>
<div id = 'hover-test'>hover 테스트</div>1> 선택자 ,로 나열
#active-test,
#hover-test {
width : 300px;
height : 300px;
background : skyblue;
color : white;
}
2> 클릭한 태그
#active-test:active {
background : pink;
3> 마우스 오버한 태그
#hover-test:hover{
cursor : wait;
}
=> 마우스 hover 테스트에 가져다 대면 로딩중 생김
(5) 상태 선택자
<h2>상태 선택자</h2>
<p>
입력 양식의 상태에 따라 선택되는 선택자
</p>
<pre>체크 상태의 input 태그 선택 : input태그: checked { 설정 내용 } 의 형식으로 사용</pre>
<input type = "checkbox" id = 'apple' name = 'fruits' value = '사과'>
<label for = 'apple'>사과</label>
<input type = "checkbox" id = 'banana' name = 'fruits' value = '바나나'>
<label for = 'banana'>바나나</label>
<input type = "checkbox" id = 'peach' name = 'fruits' value = '복숭아'>
<label for = 'peach'>복숭아</label>
<pre>초점이 맞춰진 input 태그 선택 : input 태그:focus { 설정 내용 } 의 형식으로 사용</pre>
<label>아이디 : </label>
<input type = "text" id = "userid" placeholder = "아이디를 입력하세요">
<br>
<label>비밀번호 : </label>
<input type = "password" id = "userpwd" placeholder = "비밀번호를 입력하세요">
<pre>사용 가능한 input 태그 선택 : input태그:enabled { 설정 내용 },
사용 불가능한 input 태그 선택 : input태그:disable { 설정 내용 } 의 형식으로 사용
</pre>
<h3>당신의 연령대는?</h3>
<select>
<option value = "10" disabled>10대</option>
<option value = "20">20대</option>
<option value = "30">30대</option>
<option value = "40">40대</option>
<option value = "50">50대</option>
<option value = "60" disabled >60대</option>
</select>
<br><br><br><br><br><br><br><br><br>
</body>
</html>
3) 다양한 선택자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>03_다양한 선택자2</title>
<style>
/* 구조 선택자 */
/* 일반 구조 선택자 -> 위치로만 구분 */
/* 형제 관계 태그 중 첫 번째 태그 선택 */
#test1 p:first-child{
background: pink;
color : white;
}
/* 형제 관계 태그 중 첫 번째 태그 선택
-> 마지막 태그는 pre이므로 해당 사항 없음*/
#test1 p:last-child{
background: orange;
color : white;
}
/*형제 관계 태그 중 앞에서 수열번째 태그 선택*/
#test1 p:nth-child(2n){
background: yellowgreen;
}
/* 형제 관계 태그 중 뒤에서 수열번째 태그 선택*/
#test1 p:nth-last-child(4){
background: skyblue;
color:white;
}
/* 형태 구조 선택자 -> 태그별로 구분*/
/* (해당 타입의) 형제 관계 태그 중 첫 번째 태그 선택*/
#test2 p:first-of-type{
background: pink;
color:white;
}
/* (해당 타입의) 형제 고나계 태그 중 마지막 태그 선택 */
#test2 p:last-of-type{
background: orange;
color : white;
}
/* (해당 타입의) 형제 관계 태그 중 앞에서 수열번째 태그 선택*/
#test2 p:nth-of-type(2n){
background: yellowgreen;
color : white;
}
/* (해당 타입의) 형제 관계 태그 중 뒤에서 수열번째 태그 선택 */
#test2 p:nth-last-of-type(3){
background: skyblue;
color : white;
}
/* 첫 번째 글자를 선택 */
#test3 p::first-letter{
font-size : 2em;
}
/*첫 번째 줄을 선택*/
#test3 p::first-line{
background: cyan;
}
/* 태그 뒤에 위치하는 공간을 선택 */
#test3 p::after {
content : "@@@@ 태그 뒤에 추가 @@@@";
}
/* 태그 별로 자동 번호를 매겨주는 속성*/
#test3 p{
counter-increment: num;
}
/*태그 앞에 위치하는 공간을 선택*/
#test3 ::before{
content : counter(num) ". ";
}
/*사용자가 드래그한 글자 선택*/
#test3 p::selection{
background: red;
color:white;
}
/*부정 선택자*/
#test4 p:nth-child(2n-1){
background: yellow;
}
#test4 p:not(:nth-child(2n-1)) {
background : orange;
}
</style>
</head>
(1) 일반 구조 선택자
<h2>일반 구조 선택자</h2>
<p>특정한 위치에 있는 태그 선택(위치로 구분)</p>
<div id = 'test1'>
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>1> 형제 관계 태그 중 첫 번째 태그 선택
#test1 p:first-child{
background: pink;
color : white;
}
2> 형제 관계 태그 중 첫 번째 태그 선택(마지막 태그는 pre이므로 해당 사항 없음) / 이거 답 좀 이상함
#test1 p:last-child{
background: orange;
color : white;
}
3> 형제 관계 태그 중 앞에서 수열번째 태그 선택
#test1 p:nth-child(2n){
background: yellowgreen;
}
4> 형제 관계 태그 중 뒤에서 수열번째 태그 선택
#test1 p:nth-last-child(4){
background: skyblue;
color:white;
}
(2) 형태 구조 선택자
<h2>형태 구조 선택자</h2>
<p>특정한 위치에 있는 태그 선택(태그 별로 구분)</p>
<div id = 'test2'>
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>1> (해당 타입의) 형제 관계 태그 중 첫 번째 태그 선택
#test2 p:first-of-type{
background: pink;
color:white;
}
2> (해당 타입의) 형제 관계 태그 중 마지막 태그 선택
#test2 p:last-of-type{
background: orange;
color : white;
}
3> (해당 타입의) 형제 관계 태그 중 앞에서 수열번째 태그 선택
#test2 p:nth-of-type(2n){
background: yellowgreen;
color : white;
}
4> (해당 타입의) 형제 관계 태그 중 뒤에서 수열번째 태그 선택
#test2 p:nth-last-of-type(3){
background: skyblue;
color : white;
}
(3) 문자 선택지
<h2>문자 선택자</h2>
<p>
태그 내부에서 특정 조건의 문자를 선택하는 선택자
</p>
<div id = 'test3'>
<p>차 하늘에는 어머님, 이름과 별 쓸쓸함과 멀리 가을 써 있습니다. 노루, 까닭이요, 라이너 시인의 사랑과 별 새워 있습니다. 묻힌 어머니, 내 아침이 이네들은 자랑처럼 이름과, 까닭입니다. 이런 아름다운 멀리 이웃 벌레는 시인의 시와 동경과 까닭입니다. 별에도 시와 말 있습니다. 그러나 가득 청춘이 써 이름과, 내 어머님, 어머님, 쉬이 버리었습니다. 오면 가난한 한 계십니다. 멀리 멀듯이, 남은 이름을 가득 거외다. 무엇인지 같이 라이너 듯합니다. 패, 언덕 없이 아름다운 그러나 이웃 것은 있습니다.
당신은 지나가는 피어나듯이 무성할 다 하나의 계십니다. 별이 하나 시인의 둘 그리고 계집애들의 비둘기, 파란 새워 버리었습니다. 멀듯이, 내 이름을 쓸쓸함과 된 위에도 있습니다. 이름을 남은 걱정도 라이너 지나가는 동경과 많은 지나고 까닭입니다. 사람들의 없이 말 시와 남은 불러 않은 까닭입니다. 청춘이 벌써 아스라히 있습니다. 많은 까닭이요, 벌써 내 이름을 소녀들의 경, 버리었습니다. 위에 지나가는 헤일 너무나 옥 아직 버리었습니다. 이름을 별 둘 북간도에 것은 어머님, 잔디가 별을 거외다.
위에도 소학교 이국 이름과, 아이들의 내일 하나 봅니다. 내 이름을 속의 하늘에는 이런 까닭입니다. 이름을 그리고 노새, 내 풀이 잔디가 했던 시인의 소녀들의 듯합니다. 강아지, 책상을 나의 보고, 별 까닭이요, 소녀들의 까닭이요, 어머님, 있습니다. 풀이 이네들은 피어나듯이 가슴속에 내린 가을로 하나에 옥 헤일 버리었습니다. 별을 지나고 흙으로 밤을 이름자를 버리었습니다. 딴은 별들을 가슴속에 이름과, 별 내 이름과, 까닭입니다. 가을 다하지 너무나 애기 이웃 차 있습니다. 멀듯이, 이 밤을 너무나 이름과, 덮어 속의 까닭입니다. 잔디가 이름자 다하지 잠, 언덕 딴은 계십니다. 부끄러운 아무 언덕 자랑처럼 않은 패, 까닭입니다.
우는 써 계절이 아스라히 까닭입니다. 사랑과 나는 많은 거외다. 가을 파란 별이 이국 새겨지는 새워 언덕 봅니다. 하나에 무엇인지 불러 말 어머님, 아침이 어머니, 나는 나는 까닭입니다. 마리아 사랑과 소녀들의 멀리 잔디가 까닭이요, 듯합니다. 노루, 어머니 부끄러운 이름자를 새워 있습니다. 나는 당신은 한 새워 가을 있습니다. 나는 릴케 가을로 멀리 위에도 없이 동경과 아름다운 다 거외다. 나는 이름자를 하나에 지나가는 이런 밤이 듯합니다. 노새, 헤일 멀리 아름다운 언덕 피어나듯이 별 경, 계십니다. 풀이 소학교 많은 같이 쉬이 사람들의 이름자를 비둘기, 듯합니다.
<p></p>
</div>
(4) 부정 선택자
<br>
<h2>부정 선택자</h2>
<p>
지금까지의 선택자에 대해 반대로 적용하는 선택자
</p>
<div id = 'test4'>
<p>테스트 1</p>
<p>테스트 2</p>
<p>테스트 3</p>
<p>테스트 4</p>
<p>테스트 5</p>
</div>
<br><br><br><br><br><br><br><br>
</body>
</html>
4) 선택자 우선순위
<!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>04_선택자 우선 순위</title>
<style>
/*태그 선택자 */
div{
width : 300px;
height : 300px;
background: orangered;
}
/*클래스 선택자가 우선한다*/
.test1 {
background: yellowgreen;
color : white;
}
/* 아이디 선택자 */
#test1 {
background: pink;
}
/* 아이디 선택자 */
#test2 {
width : 300px;
height : 300px;
background: yellow;
color : black;
}
/* 클래스 선택자 */
/* 아이디 선택자가 이미 적용되어 있으르모 적용되지 않음*/
.test2 {
background: black;
color : white;
}
/* 태그 선택자*/
/* 중복 속성은 적용되지 않으며 스타일이 적용되지 않았던 내용만 적용됨
인라인 스타일 적용되어 있어도 !important가 가장 마지막에 적용됨*/
p{
background: red !important;
color : white !important;
font-size: 2em;
}
</style>
</head><body>
<h1>선택자 우선 순위</h1>
<p>
기본적으로 CSS 속성은 위에서부터 아래로 적용이 되지만,
같은 태그에 여러 개의 CSS 속성이 설정 된 경우에는 우선 순위에 따라 스타일이 적용된다
</p>
<pre>
태그 선택자 -> 클래스 선택자 -> 아이디 선택자 -> 인라인 스타일 -> !important
</pre>
<hr>
<h2>선택자 우선 순위 테스트</h2>
<div id = "test1" class = "test1" style = "background: tomato;">우선 순위 테스트 div 영역</div>
<p id = "test2" class = "test2" style = "background: violet;">우선 순위 테스트 p 영역</p>
<!--
실습. 선택자 게임
https://flukeout.github.io
-->
</body>
</html>
(1) 태그 선택자
div{
width : 300px;
height : 300px;
background: orangered;
}
(2) 클래스 선택자가 우선한다
.test1 {
background: yellowgreen;
color : white;
}
(3) 아이디 선택자
#test1 {
background: pink;
}
=> 위랑 동일
(4) 아이디 선택자
#test2 {
width : 300px;
height : 300px;
background: yellow;
color : black;
}
(5) 클래스 선택자
/* 아이디 선택자가 이미 적용되어 있으르모 적용되지 않음*/
.test2 {
background: black;
color : white;
}
=> 위랑 동일
(6) 태그 선택자
(중복 속성은 적용되지 않으며 스타일이 적용되지 않았던 내용만 적용됨 인라인 스타일 적용되어 있어도 !important가 가장 마지막에 적용됨)
p{
background: red !important;
color : white !important;
font-size: 2em;
}
'웹개발 수업 > CSS' 카테고리의 다른 글
| [Day +54 / CSS]CSS 기초(13. 풀스크린 실습, 14. 컬럼 나누기 실습1) (0) | 2021.09.07 |
|---|---|
| [Day +54 / CSS]CSS 기초(10. 레이아웃 스타일(배치) , 11. 레이아웃 스타일(flex), 12. 레이아웃 스타일(grid)) (0) | 2021.09.07 |
| [Day +53 / CSS 과제]텍스트 스타일 실습, 레이아웃 스타일 실습 (0) | 2021.09.06 |
| [Day +53 / CSS]CSS 기초(7. 테두리 스타일, 8. 레이아웃 스타일(인라인 블럭), 9. 레이아웃 스타일(여백)) (0) | 2021.09.06 |
| [Day +53 / CSS]CSS 기초(5. 텍스트 스타일, 6. 배경 스타일) (0) | 2021.09.06 |
