CSS 개요
마크업 언어가 실제로 화면에 표시되는 방법을 기술하는 언어
W3C에서 CSS를 표준으로 지정함
CSS 선택자
현재 HTML 문서 내에 같은 태그를 선택하는 선택자
📍 id 선택자
HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
(id 속성값은 페이지 내에서 유일해야 함)
#id{}
콤마를 이용하여 여러 선택자 동시 작성 가능
📍 class 선택자
HTML 문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자
.class{}
📍 * 모든 요소 선택자
단독 또는 다른 선택자와 함께 사용 가능
별{}
📍 기본 속성 선택자
태그에 작성된 특정 속성을 선택하는 선택자
div[name="name-1"] {background-color: bisque;}📍 자식 선택자
저장된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
부모 > 자식{}
📍 후손(자손) 선택자 (띄어쓰기)
#test-div p{background-color: pink;}📍 반응 선택자
사용자의 움직임에 반응하여 스타일이 달라지는 선택자
- :active 요소를 클릭하고 있는 경우
- :hover 요소에 마우스가 올라가있는 경우
📍 상태 선택자
입력 양식의 상태에 따라 선택되는 선택자
- focus : 요소에 초점이 맞춰졌을 때
- checked(radio, checkbox) : 요소가 체크되었을 때
- enabled / disabled : 요소가 사용가능한 / 불가능한 상태일 때
📍 동위 선택자
동위 관계에서 다음에 위치한 요소를 선택하는 선택자
- : 바로 뒤에 있는 요소 선택
- ~ : 뒤에 있는 모든 요소 선택
📍 문자열 속성 선택자
속성 값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자
- ~= : 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 요소를 선택
- |= : 속성 값이 특정 값을 단어로 포함하는 요소를 선택 (단 - 기호로 구분, - 앞의 내용이 동일해야 한다)
- ^= : 속성 값이 특정 값으로 시작하는 요소 선택
- $- : 속성 값이 특정 값으로 끝나는 요소 선택
- *= : 속성 값이 특정하는 값을 포함하는 요소 선택
📍 일반 구조 선택자
형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자 (위치를 기준으로 구분)
- :first-child - 형제 관계 요소 중 첫 번째 요소
- :last-child - 형제 관계 요소 중 마지막 요소
- :nth-child(수열) - 형제 관계 요소 중 지정된 수열 번째 요소를 모두 선택
- :nth-last-child(수열) - 형제 관계 요소 중 뒤에서부터 지정된 수열 번째 요소를 모두 선택
📍 형태 구조 선택자
- :first-of-type - 같이 선택된 형제들 중에서 첫 번째 요소
- :last-of-type - 같이 선택된 형제들 중에서 마지막 요소
- :nth-of-type - 같이 선택된 형제들 중에서 수열 번째 요소
- :nth-last-of-type(수열) - 같이 선택된 형제들 중에서 뒤에서 수열 번째 요소
일반 구조 vs 형태 구조
일반 구조는 선택된 요소의 태그와 작성된 태그를 비교해서 일치하면 실행, 안 하면 실행하지 않음
형태 구조는 선택된 형제들 중에서 순서 판별
📍 부정 선택자
선택자1: not(선택자2)
📍 기타 선택자
- :only-child - 특정 요소에 자식이 하나밖에 없을 때 선택
자식이 무조건 하나여야 함 - :only-of-type - 특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택
선택된 타입의 자식이 하나여야 함 - :empty - 자식 요소가 없는 요소를 선택
자식 요소의 개념: 태그, 글자, 띄어쓰기를 모두 자식 요소라고 함
📍 특정 요소 내부에 있는 특정 클래스만 선택
여러 선택자 동시 선택, 클래스가 여러 개인 요소만 선택 등
CSS 선택자 우선순위
1순위 : css 속성 : 속성값 !important;
2순위 : inline-style 속성 (요소에 직접 작성되는 style 속성)
3순위 : 아이디 선택자(#아이디 속성명) _ 동일한 우선 순위에서는 마지막에 작성된 설정값이 적용된다.
4순위 : 클래스 선택자(.class 속성명)
5순위 : 태그 선택자(태그명)
01_CSS개요, CSS 선택자
<!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_CSS개요, 기본 선택자1</title>
<style>
/*style태그: css 코드만 작성할수 있는 영역을 제공하는 태그*/
/* CSS 주석 */
/* 태그 선택자(태그명) */
div{
border: 3px solid red; /*3px 두께의 빨간 실선*/
}
strong{
background-color: yellow;
}
span{
background-color: pink;
}
/* 아이디 선택자(#) */
#li-1{ background-color: red;}
#li-2{ background-color: orange;}
#li-3{ background-color: yellow;}
#li-4{ background-color: green;}
#li-5{ background-color: blue;}
/* 콤마(,)를 이용한 여러 선택자 동시 작성 */
#li-1, #li-2, #li-3, #li-4, #li-5 {
color: aqua;
}
/* 클래스 선택자(.) */
.test-1{ color: red;}
.test-2{
background-color: black;
color: white;
}
.aaa{ font-weight: bold;} /* 글자 굵기 조절 */
/* 미리 클래스 선택자를 이용한 CSS 코드를 작성하고
이후에 HTML 코드에 클래스 지정하기*/
/* 모든 요소 선택자(*) */
@font-face {
font-family: 'SUITE-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
* {
/* 글꼴 크기 */
font-size: 20px;
/* 글꼴 모양 */
font-family: 'SUITE-Regular';
}
</style>
</head>
<body>
<h1>CSS(Cascading Style Sheets)</h1>
<pre>]
마크업 언어(HTML)가 실제로 화면에
표시되는 방법(모양, 색상, 크기, 스타일...)을 기술하는 언어
(HTML코드가 화면에 어떤 스타일로 보여질지 지정하는 언어)
W3C(웹 표준 지정 기관)에서 CSS를 표준으로 지정함
</pre>
<hr>
<h1>CSS Selector(선택자)</h1>
<pre>
현재 HTML 문서 내에 같은 태그를 선택하는 선택자
<strong>[작성법]</strong>
태그명 { CSS 코드; }
</pre>
<div>
<strong>strong 태그에 작성된 내용입니다.</strong>
<br>
<span>span 태그에 작성된 내용입니다.</span>
<ul>
<li>
<strong>strong 태그에 작성된 내용입니다.</strong>
</li>
<li>
<span>span 태그에 작성된 내용입니다.</span>
</li>
</ul>
</div>
<hr>
<h3>id 선택자(#id 속성값)</h3>
<pre>
HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
(중요!) id 속성 값은 페이지 내에서 유일해야 한다!
-> 중복되는 id 속성 값이 있으면 안 된다!
[작성법]
#id 속성값{ CSS 코드; }
</pre>
<!--
Java : 카멜 표기법(helloWorld)
DB : 대문자, 띄어쓰기는 _로 표시(MEMBER_NO)
HTML : 하이픈 표기법(li-1, class-1)
-->
<ol>
<li id="li-1">id 선택자 테스트1</li>
<li id="li-2">id 선택자 테스트2</li>
<li id="li-3">id 선택자 테스트3</li>
<li id="li-4">id 선택자 테스트4</li>
<li id="li-5">id 선택자 테스트5</li>
</ol>
<hr>
<h3>class 선택자(.class 속성값)</h3>
<pre>
HTML 문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자
[작성법]
.class속성값{ CSS 코드; }
<ul>
<li class="test-1">클래스 선택자 테스트1</li>
<li class="test-2">클래스 선택자 테스트2</li>
<li class="test-1">클래스 선택자 테스트3</li>
<li class="test-2">클래스 선택자 테스트4</li>
<li class="test-1">클래스 선택자 테스트5</li>
<li class="aaa">클래스 선택자 테스트6</li>
<!-- 여러 클래스 적용 -->
<li class="aaa test-1">클래스 선택자 테스트7</li>
<li class="test-2 aaa">클래스 선택자 테스트8</li>
<!-- 여러 클래스 작성 시 class 속성 값 순서는 의미 없음
-> style 태그 css 코드 작성 순서에 따라 다름
-->
<li class="test-1 test-2 aaa">클래스 선택자 테스트9</li>
<li class="test-2 test-1 aaa">클래스 선택자 테스트10</li>
</ul>
<hr>
<h3>모든 요소 선택자 (*)</h3>
<pre>
(단독 또는 다른 선택자와 함께 사용 가능한 선택자로)
모든 요소를 선택하는 선택자
</pre>
</pre>
</body>
</html>CSS선택자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_CSS선택자2</title>
<!-- link 태그: 외부 CSS 파일과 연결하는 태그 -->
<link rel="stylesheet" href="css/selector2.css" type="text/css">
</head>
<body>
<h3>기본 속성 선택자</h3>
<pre>
태그에 작성된 특정 속성을 선택하는 선택자
(id, class도 선택 가능은 하지만 보통 $ , . 을 사용함)
[작성법]
선택자[속성명="속성값"] {CSS 코드; }
(참고)
1) 선택자는 생략할 수 있다
-> 특성 속성을 가진 모든 요소 선택
2) "속성값" 양쪽의 쌍따옴표("")는
홑따옴표('')로 변경하거나 생략할 수 있다.
</pre>
<div name="name-1">div1</div>
<div name="name-1">div2</div>
<div name="name-2">div3</div>
<div name="name-2">div4</div>
<p name="name-1">p1</p>
<p name="name-1">p2</p>
<p name="name-2">p3</p>
<p name="name-2">p4</p>
<hr>
<h3>자식 선택자(>)</h3>
<pre>
지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
[작성법]
선택자1 > 선택자2 {CSS 코드;}
- 선택자1: 부모 요소 선택(반드시 필요)
- 선택자2: 자식 요소 선택(반드시 필요)
</pre>
<ul id="parent-ul">부모
<li>자식1</li>
<li>
<span>자식2</span>
</li>
<li>자식3</li>
<li>
<span>자식4</span>
</li>
</ul>
<hr>
<h3>후손(자손) 선택자( (띄어쓰기) )</h3>
<pre>
지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자
(자식 : 1단계 아래)
(후손 : n단계 아래 모두)
[작성법]
선택자1 선택자2 {CSS 코드;}
선택자1 : 부모(조상) 요소 선택자
선택자2: 후손 요소 선택자
</pre>
<div id="test-div">
<p>test-div 자식 요소입니다.</p>
<p>test-div 후손 요소입니다.</p>
<div>
<p>이것도 후손일까?</p>
</div>
</div>
<hr>
<hr>
<h3>반응 선택자</h3>
<pre>
사용자의 움직임에 반응하여 스타일이 달라지는 선택자
(클릭 유지, 마우스오버 등)
- 요소를 클릭하고 있는 경우는 (:active)
- 요소에 마우스가 올라가있는 경우는 (:hover)
hover: 마우스를 올리고 내릴 때
</pre>
<div class="div-cls" id="active-test">active 테스트</div>
<div class="div-cls" id="hover-test">hover 테스트</div>
<hr>
<h3>상태 선택자</h3>
<pre>
입력 양식(input, input 관련 태그)의
상태에 다라 선택되는 선택자
: focus -> 요소에 초점이 맞춰졌을 때
: checked -> 요소가 체크되었을 때(radio, checkbox)
: enabled / disabled
-> 요소가 사용가능한/ 불가능한 상태일 때
</pre>
<h4>:focus</h4>
<input type="text" id="focus-test">
<h4>:checked</h4>
<label for="apple">사과</label>
<input type="checkbox" name="fruits" id="apple"> <br>
<label for="banana">바나나</label>
<input type="checkbox" name="fruits" id="banana"> <br>
<label for="melon">멜론</label>
<input type="checkbox" name="fruits" id="melon"> <br>
<!-- enabled가 기본값 -->
<h4>:enabled / :disabled</h4>
<div id="test-div2">
사용가능 : <input type="text" enabled><br>
사용불가능 : <input type="text" disabled value="변경하면 안 되는 값">
</div>
<hr><hr>
<h3>동위 선택자</h3>
<pre>
동위 관계(동등한 위치 == 형제 관계)에서
뒤(다음)에 위치한 요소를 선택하는 선택자
A
B
B
1) A 바로 뒤(다음)에 있는 B 요소 하나를 선택 (+)
A 선택자 + B 선택자 {CSS 코드;}
2) A 뒤에 있는 모든 요소를 선택 (~ 틸드(Tilde))
A 선택자 ~ B 선택자 {CSS 코드;}
<div id="div1">1번 입니다.</div>
<div>2번입니다.</div>
<div id="div3">3번입니다.</div>
<div id="div4">4번입니다.</div>
<p>관련 없는 태그입니다.</p>
<div id="div5">5번입니다.</div>
</pre>
<hr><hr>
<h2>checkbox 모양 바꾸기</h2>
<pre>
[준비물]
- 동위 선택자(+)
- 상태 선택자(:checked)
- input type="checkbox"
- label 태그(for 속성)
- 체크박스 이미지
</pre>
<input type="checkbox" id="check1">
<label for="check1"></label>
</body>
</html>style만 따로 입력하는 CSS 파일 만들기
selector2
/* CSS 파일
파일 전체가 <style> 태그 내부라고 생각하면 됨 */
/* 기본 속성 선택자 */
div[name="name-1"] {background-color: bisque;}
[name="name-2"]{background-color: violet;}
p[name=name-2]{background-color: crimson;}
/* 자식 선택자 */
#parent-ul > li{ background-color: orange;}
#parent-ul > li > span{background-color: cyan;}
/* 후손 선택자 */
#test-div{border: 2px solid black;}
#test-div>div>p{background-color: pink;}
/* 반응 선택자 */
.div-cls{
/* block 형식 요소만 크기 조정 가능 */
width: 200px;
height: 200px;
border: 1px solid black;
background-color: #ddd; /* 16진수 표기법 */
/* 아래쪽 요소와의 간격 띄우기 */
margin-bottom: 30px;
/* 요소에 마우스 커서가 올라오면 손가락 모양으로 변경 */
cursor: pointer;
}
/* 클릭하고 있을 때만 반응하는 active */
#active-test:active{
background-color: darkslateblue;
}
/* 마우스 포인터가 올라갔을 때만 반응하는 hover */
#hover-test:hover{
background-color: darkorchid;
width: 230px;
height: 230px;
/* 변화 시간 지정 */
/*transition-duration: 0.5s;*/
}
/* hover-test 요소가 변화를 일으키면 0,5초 동안 변함 */
#hover-test{ transition-duration: 0.5s;}
/* 상태 선택자 */
/* 요소에 초점이 맞춰졌을 때(:focus) */
#focus-test:focus{
background-color: rgb(235, 250, 102);
}
/* 요소가 체크되었을 때(:checked) */
input[name="fruits"]:checked{
/* radio, checkbox는
크기를 제외한 스타일이 적용되지 않는다. */
background-color: red;
width: 30px;
height: 30px;
}
/* 사용 가능/ 불가능(:enabled / :disabled) */
#test-div2 > input:enabled{
background-color: lightgreen;
}
#test-div2 > input:disabled{
background-color: aquamarine;
}
/* 동위 선택자 */
/* A 바로 뒤에 있는 B 선택 (+) */
#div1 + div{background-color: olive;}
/* A 뒤에 있는 모든 B 요소 선택 */
#div3 ~ div{background-color: blueviolet;}
/* ****checkbox 모양 바꾸기**** */
/* label 태그 스타일 지정 */
#check1+label{
width: 30px;
height: 30px;
border: 1px solid black;
/* 수평분할 + 크기조절 */
display: inline-block;
cursor: pointer; /* 마우스 손가락 모양 */
/* 모서리 라운딩 */
border-radius: 15%;
}
#check1:checked + label{
background-image: url("../../images/check.png");
background-repeat: no-repeat;
background-size: cover;
}
/* #check1 존재는 하지만 화면에 보이지 않게 하기 */
#check1{
display: none;
}
CSS 선택자3
<!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_CSS선택자3</title>
<link rel="stylesheet" href="css/selector3.css">
</head>
<body>
<h1>문자열 속성 선택자</h1>
<pre>
속성 값의 문자열을 확인하여 스타일 적용하는 방식의 선택자
1) 선택자[속성명 ~= "특정값"] {CSS 코드;}
-> 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중
속성 값이 특정 값을 단어로 포함하는 요소를 선택
2) 선택자[속성명 |= "특정값"]{CSS 코드;}
-> 속성 값이 특정 값을 단어로 포함하는 요소를 선택
단, "-"기호로 구분, "-"앞의 내용이 동일해야 한다.
3) 선택자[속성명 ^= "특정값"] {CSS 코드;}
-> 속성값이 특정 값으로 시작하는 요소 선택
(^ : 캐럿)
4) 선택자[속성명 $= "특정값"{CSS 코드;}]
-> 속성 값이 특정 값으로 끝나는 요소를 선택
5) 선택자[속성명 *= "특정값"] {CSS 코드;}
-> 속성 값이 특정한 값을 포함하는 요소 선택
</pre>
<div name="aaa bbb str-1" class="str-class">div1</div>
<div name="str-2 aaa" class="str-class">div2</div>
<div name="str" class="class-str">div3</div>
<div name="aaa str-3" class="str-class2">div4</div>
</body>
</html>selector3
/* ~= : 여러 속성 값 중 하나라도 일치하면 선택 */
div[name~="aaa"]{
background-color: darkgreen;
}
/* |= : "-"기호 앞쪽 단어가 일치하는 요소 선택 */
div[class |= "str"] {
color: yellow; /* 글자색 */
font-weight: bold; /* 글꼴 굵기 */
}
/* ^- : 특정 값으로 시작하는 요소 선택 */
div[class ^= "class"] {
background-color: black;
color: white;
}
/* $= : 특정 값으로 끝나는 요소 선택 */
div[class $= "class2"] {
font-size: 24px;
}
/* 특정 값을 포함하는 요소 선택 */
div[name *= "2"] {
border: 3px solid yellow;
}CSS 선택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_CSS선택4</title>
<link rel="stylesheet" href="css/selector4.css">
</head>
<body>
<h2>일반 구조 선택자</h2>
<pre>
형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자
(중요) 위치를 기준으로 구분함
:first-child
:last-child
:nth-child(수열)
:nth-last-child(수열)
</pre>
<div id="test1">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
<hr>
<h2>형태 구조 선택자</h2>
<pre>
선택된 형제관계 요소 중 특정 요소를 선택하는 선택자
(선택된 요소들을 기준으로 구분)
:first-of-type: 같이 선택된 형제들 중에서 첫 번째 요소
:last-of-type : 같이 선택된 형제들 중에서 마지막 요소
:nth-of-type : 같이 선택된 형제들 중에서 수열 번째 요소
:nth-last-of-type(수열): 같이 선택된 형제들 중에서 뒤에서 수열 번쨰 요소들을
</pre>
<div id="test2">
<pre>테스트0</pre>
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
<hr>
<h2>부정 선택자(선택자1: not(선택자2))</h2>
<ul id="test3">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>selector4
/* 일반 구조 선택자 */
/* first-child : 형제 관계 요소 중 첫 번째 요소 */
#test1 > p:first-child{
background-color: red;
color: white;
}
/* last-child : 형제 관계의 요소 중 마지막 요소 */
#test1 > p:last-child { /* pre로 바꾸면 pre의 색 바뀜 */
background-color: orange;
}
/* #test1 > p 선택자를 통해서
#test1의 자식 중 p 태그만 선택했지만
#test1의 자식 중에는 pre 태그가 포함되어있다.
(선택은 p태그, 형제는 p+pre)
#test1의 자식 중 p 태그의 형제 요소 중
마지막 요소(pre)를 선택하여
해당 요소가 :last-child 앞에 작성된 요소(p)가
맞을 경우에만 선택
*/
/* nth-child(수열)
형제 관계 요소 중 지정된 수열 번째 요소를 모두 선택
(nth = n번째)
* 순서를 따질 때 1부터 시작(인덱스와 다름)
*/
#test1 > p:nth-child(2) {
/* #test1의 자식 요소 중 2번째 요소를 선택하고 p 태그인지 검사 */
background-color: yellow;
}
#test1 > p:nth-child(4) {
/* #test1의 자식 요소 중 4번째 요소를 선택하고 p 태그인지 검사 */
background-color: pink;
}
/* 홀수 번째 형제 요소를 선택 */
#test1 > p:nth-child(2n-1) {
font-size: 20px;
font-weight: bold;
}
/* 짝수 번째 형제 요소 선택 */
#test1 > p:nth-child(2n) {
border: 1px solid black;
}
/* :nth-last-child(수열)
형제 관계 요소 중
뒤에서부터 지정된 수열 번쨰 요소를 모두 선택
*/
#test1 > p:nth-last-child(2) {
color: hotpink;
}
/* --------------------------------------------------------- */
/* 형태 구조 선택자 */
/* :first-of-type : 같이 선택된 형제들 중에서 첫 번째 요소 */
#test2 > p:first-of-type{
background-color: orange;
}
/* :last-of-type : 같이 선택된 형제들 중에서 마지막 요소 */
#test2 > p:last-of-type{
background-color: skyblue;
}
/* :nth-of-type(수열) : 같이 선택된 형제들 중에서 수열 번째 요소 */
/* #test2 자식 p 태그 중 홀수 번째 요소의 글자를 30px로 지정 */
#test2 > p:nth-of-type(2n-1) {
font-size: 30px;
}
/* :nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열 번째 모든 요소 */
/* #test2 자식 p 태그 중 뒤에서 짝수 번째 모든 요소의 배경을 red로 지정 */
#test2 > p:nth-last-of-type(2n) {
background-color: red;
}
/* 부정 선택자 */
/* test3의 자식 li 요소 중 3의 배수를 제외한 요소만 선택 */
#test3 > li:not(nth-of-type(3n)) {
background-color: aqua;
}CSS 선택자5
<!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>05_CSS선택자5</title>
<link rel="stylesheet" href="css/selector5.css">
</head>
<body>
<h1>기타 선택자</h1>
<h3>:only-child</h3>
<pre>
특정 요소에 자식이 하나밖에 없을 때 선택
</pre>
<div id="test1">
<p>자식1</p>
<pre>자식2</pre>
</div>
<hr>
<h3>:only-of-type</h3>
<pre>
특정 요소의 자식 중
지정된 형태와 같은 자식 요소가 하나만 있을 때 선택
</pre>
<div id="test2">
<p>자식1</p>
<pre>자식2</pre>
<!-- <p>자식3</p> -->
</div>
<h3>:empty</h3>
<p>
자식 요소가 없는 요소를 선택
- 자식 요소의 개념
태그, 글자, 띄어쓰기 모두를 자식 요소라고 함
</p>
<!-- empty에 해당하는 요소 예시 -->
<!-- <div></div> -->
<div id="test3">
<p></p> <!-- 얘만 변경됨 -->
<p>123</p>
<p> </p>
<p> <strong>하이</strong> </p>
</div>
<hr>
<h3>특정 요소 내부에 있는 특정 클래스만 선택하기</h3>
<ul id="test4-1">
<li class="c4">1</li>
<li class="c4">2</li>
<li class="c4">3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="test4-2">
<li class="c4">6</li>
<li class="c4">7</li>
<li class="c4">8</li>
<li>
<span class="c4">9</span>
</li>
<li>
<span class="c4">10</span>
</li>
<p class="c4">11</p>
<p class="c4">12</p>
</ul>
<hr>
<h3>여러 선택자 동시 선택</h3>
<pre>
같은 스타일을 지정하고 싶으나
요소를 선택하는 선택자가 일치하지 않을 때 사용
선택자1, 선택자2, 선택자3, ... {CSS 코드;}
</pre>
<div id="test5-1">테스트1</div>
<div id="test5-2">테스트2</div>
<div id="test5-3">테스트3</div>
<hr>
<h2>클래스가 여러 개인 요소만 선택</h2>
<div class="test6">테스트</div>
<div class="test6 c6">테스트</div>
<div class="c6">테스트</div>
</body>
</html>selector5
/* only-child */
#test1 > p:only-child{
background-color: rgb(221, 141, 36);
}
/* only-of-type */
#test2 > p:only-of-type{
background-color: chartreuse;
}
/* :empty */
#test3 > p:empty{
height: 30px;
background-color: cadetblue;
}
/* 특정 요소 내부에 있는 특정 클래스만 선택 */
/* #test4-1의 후손 중 클래스가 c4인 요소 선택 */
#test4-1 .c4{
background-color: aquamarine;
}
/* #test4-2의 자식 중 클래스가 c4인 li 요소만 선택 */
#test4-2 > li.c4{
background-color: brown;
}
/* 여러 선택자 동시 선택 */
#test5-1, #test5-2, #test5-3 {
background-color: aquamarine;
border: 2px solid black;
}
/* 클래스가 여러 개인 요소만 선택 */
.test6.c6{
background-color: chocolate; /* 띄어쓰기 주의 */
}CSS 선택자6
<!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>06_선택자 우선순위</title>
<link rel="stylesheet" href="css/selector6.css">
</head>
<body>
<h1>CSS 선택자 우선 순위</h1>
<pre>
기본적으로 css 속성은 style 태그 또는 css 파일에 작성된 순서
(위->아래)대로 해석이 진행되지만
같은 요소에 여러 css 속성이 설정되는 경우 우선순위가 적용된다.
* 알아둬야 될 것
1) 동일한 우선 순위로 css 속성이 설정된 경우
-> 제일 마지막에 작성된 css 속성이 반영된다
2) 여러 선택자를 이용해서 같은 요소를 선택하더라도
지정되는 css 속성이 다르면 모두 반영된다.
1순위 : css 속성 : 속성값 !important;
2순위 : inline-style 속성 (요소에 직접 작성되는 style 속성)
3순위 : 아이디 선택자(#아이디 속성명)
4순위 : 클래스 선택자(.class 속성명)
5순위 : 태그 선택자(태그명)
</pre>
<!-- 2순위 inline style -->
<div class="cls1" id="test1" style="background-color: crimson;">우선순위 테스트</div>
</body>
</html>selector6
/* 5순위 태그 선택자 */
div{
width: 200px;
height: 200px; /* 1순위 !important*/
background-color: cornflowerblue !important;
}
/* 4순위 클래스 선택자 */
.cls1{
background-color: aqua;
/* 배경색이 aqua로 변경되지만, 겹치지 않는 width, height는 그대로 반영이 되었다. */
}
.cls1{
background-color: thistle;
/* 동일한 우선 순위에서는 마지막에 작성된 설정값이 적용된다. */
}
/* 3순위 아이디 선택자 */
#test1{
height: 100px;
background-color: black;
color: white;
}
개발 일지