1. CSS 선택자
1-1. 선택자 종류
1-1-1. 선택자 문법
선택자 문법 설명
| 전체 선택자 | * | 모든 요소 선택 |
| 태그 선택자 | 태그이름 | 특정 태그 요소 선택 |
| 클래스 선택자 | .클래스이름 | 특정 클래스를 가진 요소 선택 |
| ID 선택자 | #아이디이름 | 특정 ID를 가진 요소 선택 |
| 자식 선택자 | 부모요소 > 자식요소 | 부모 요소 바로 아래 자식 요소 선택 |
| 후손(하위) 선택자 | 조상요소 자손요소 | 조상 요소의 하위 자손 요소 선택 |
| 인접 형제 선택자 | 요소1 + 요소2 | 요소1 바로 뒤에 나오는 요소2 선택 |
| 일반 형제 선택자 | 요소1 ~ 요소2 | 요소1 다음에 나오는 요소2 선택 |
1-1-2. 선택자 적용
- 전체 선택자
- 모든 요소를 선택합니다. 문서 전체에 CSS 스타일을 적용
* {
margin: 0;
padding: 0;
}- 태그 선택자
- 특정 태그 요소를 선택
p {
color: red;
}- 클래스 선택자
- 특정 클래스를 가진 요소를 선택합니다. 여러 요소에서 동시에 사용 가능
.some-class {
font-size: 1.2em;
}- ID 선택자
- 특정 ID를 가진 요소를 선택합니다. 한 페이지에서 하나의 요소에만 적용 가능
#some-id {
border: 1px solid black;
}- 자식 선택자
- 부모 요소 바로 아래 자식 요소를 선택
.parent > .child {
color: blue;
}- 후손(하위) 선택자
- 조상 요소의 하위 자손 요소를 선택
.ancestor .descendant {
font-weight: bold;
}- 인접 형제 선택자
- 요소1 바로 뒤에 나오는 요소2를 선택
h2 + p {
font-style: italic;
}- 일반 형제 선택자
- 요소1 다음에 나오는 요소2를 선택
h2 ~ p {
font-size: 1.2em;
}1-2. 선택자 우선순위
- CSS의 선택자를 통해 원하는 요소에 CSS를 적용함에 있어 어떤 방법으로 CSS를 적용하는가에 따라 우선순위가 나뉘게 된다.
- 결과적으로 온전히 지금 적용하고자 하는 CSS가 선택자를 통해 적용되게 하기 위해서는 !important를 활용할 수 있다.
- 아래와 같이 작성 했을 시 우선 순위 상으로는 CSS파일 작성 순서와 관계없이 id 선택자를 활용한 red가 글꼴색으로 적용되어야 하지만 userid 클래스를 가진 요소에 있는 !important로 인해 클래스 선택자를 활용한 CSS 설정이 적용되게 된다.
#userid {
color: red;
}
.userid {
color: blue !important;
}
- 참고용 예시
- 관련 코드
<!DOCTYPE html>
<html lang="ko">
<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">
<style>
.test1 {
background: yellow;
color: black;
}
div {
width: 300px;
height: 300px;
background: darkviolet;
}
#test2 {
background: plum;
color: darkblue;
}
.test2 {
background: blue !important;
color: white !important;
}
</style>
<title>Document</title>
</head>
<body>
<h1>선택자 우선순위</h1>
<p>기본적으로 css 속성은 위에서부터 아래로 적용이 되지만, 같은 태그에 여러 개의 css속성이
설정된 경우에는 우선순위에 따라 스타일이 적용된다.
</p>
<pre>태그 선택자 < 클래스 선택자 < 아이디 선택자 < 인라인 선택자 < !important 순서로
우선순위를 가진다.</pre>
<hr>
<h2>선택자 우선순위 테스트</h2>
<!-- div#test1.test1{우선순위 테스트1} -->
<div id="test1" class="test1">우선순위 테스트1</div>
<!-- p#test2.test2[style="background: yellowgreen"]{우선순위 테스트 2} -->
<p id="test2" class="test2" style="background: yellowgreen;">우선순위 테스트 2</p>
</body>
</html>
결과 화면
1-3. 선택자 활용 예시
1
- 관련 코드
<!DOCTYPE html>
<html lang="ko">
<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">
<style>
/* css 주석(//와 같은 단일행 주석도 적용 안됨) */
/* 모든 선택자는 '*'기호를 사용한다. */
/*
* {
color: red;
}
*/
/* 태그 선택자 테스트 */
p, li {
color: blue;
}
/* 아이디 선택자 테스트 */
#id2 {
background: yellow;
color: green;
}
/* 클래스 선택자 테스트 */
.class1 {
background: grey;
color: purple;
}
.class2{
color:orangered;
}
</style>
<title>CSS3 기본 선택자</title>
</head>
<body>
<h1>CSS 기본 선택자</h1>
<p>선택자(selector)란?<br>
특정한 HTML 태그를 선택할 때 사용하는 기능으로, 태그를 선택하여 원하는 스타일과 기능을
적용할 수 있다.
</p>
<hr>
<h2>모든 선택자</h2>
<p>HTML 문서 안의 모든 태그를 선택할 때 전체 선택자를 사용할 수 있다.</p>
<ul>
<li>테스트1</li>
<li>테스트2</li>
<li>테스트3</li>
</ul>
<hr>
<h2>태그 선택자</h2>
<p>HTML 문서 내에 같은 태그를 모두 선택할 때 사용한다.</p>
<p>- p{color: red;}와 같은 형태로 사용된다.</p>
<hr>
<h2>아이디 선택자</h2>
<p>HTML 문서 내에 해당하는 아이디 속성의 값을 가진 태그만 선택할 때 사용한다.</p>
<p>- #아이디명{color: orange;}와 같은 형태로 사용된다.</p>
<ol>
<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>
</ol>
<hr>
<h2>클래스 선택자</h2>
<p>HTML 문서 내에 여러 개의 태그를 동일한 클래스명으로 지정하여 선택할 때 사용한다.</p>
<p>- .클래스명{color: purple;}과 같은 형태로 사용된다.</p>
<ul>
<li class="class1" id="id2">클래스 선택자 테스트1</li> <!-- id선택자로 css 적용한 것이 우선순위가 높다.(04번 예제에서 다룰 예정) -->
<li class="class2">클래스 선택자 테스트2</li>
<li class="class1">클래스 선택자 테스트3</li>
<li class="class2">클래스 선택자 테스트4</li>
<li class="class1">클래스 선택자 테스트5</li>
</ul>
<button>클릭!</button>
<!-- 나중에 javascript를 배우면 선택자의 개념을 자주 사용하게 되니 잘 배워 두자. -->
<script type="text/javascript">
let btn = document.querySelector('button');
btn.onclick = () => {
let testli = document.querySelectorAll('ul>li.class2');
for(let li = 0; li < testli.length; li++){
testli[li].style.backgroundColor = 'red';
}
}
window.onload = function(){
let idTag = document.getElementById('id2');
console.log(idTag);
}
</script>
</body>
</html>결과 화면
2
- 관련 코드
<!DOCTYPE html>
<html lang="ko">
<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">
<!-- 내부 스타일 시트 방식 -->
<style>
/* 속성값과 일치하는 객체(태그, 요소) 선택 */
div[name=name2] {
background: orangered;
}
/* 속성 안의 값이 특정 값을 단어(띄어쓰기 단위)로써 포함하는 객체 선택 */
div[name~=name1] {
background: yellow;
}
/* 속성 값이 특정 값과 일치하거나 '-'문자가 곧바로 해당 값 뒤에 따라붙는 객체 선택 */
div[class|=class] { /* class 또는 class- */
background: cyan;
}
/* 속성 값을 가지고 있으며, 접두사로 특정 값이 포함되어 있는 객체 선택 */
div[name^=name] {
background: blue;
}
/* 속성 안의 값이 특정 값으로 끝나는(접미사) 객체 선택 */
div[class$=class] {
color: white;
}
/* 속성 안의 값이 특정 값을 포함하는 객체 선택 */
div[class*=div] {
background: yellow;
color: red;
}
/* 자손 선택자 */
#test1>h4 {
background:hotpink;
}
#test1>ul>li {
background:cyan;
}
/* 후손 선택자 */
#test1 ul {
background: yellow;
}
/* 동일한 선택자를 또 사용해도 문제 없다. */
#test1 ul {
color: red;
}
/* 형제관계 선택자(동위 선택자) */
#div-test1 {
background: red;
}
/* 해당 요소 바로 다음에 특정 타입의 요소를 모두 선택 */
#div-test1 + div {
background: yellow;
}
/* 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택 */
/* 아래 css에 영향을 주기 때문에 주석
#div-test2 ~ div {
background: purple;
color: white;
}
*/
#active-test, #hover-test {
width:150px;
height:150px;
background:orangered;
}
/* css에서 제공하는 이벤트 관련 pseudo(수두) 선택자. */
#active-test:active {
background: yellow;
color: white;
}
#hover-test:hover {
cursor: pointer;
background: cyan;
color: purple;
font: 40px bold;
}
input[type=checkbox]:checked {
width: 20px;
height: 20px;
}
#userId:focus, #userPwd:focus {
background: green;
}
option:disabled {
background: red;
color: white;
}
option:enabled {
background: yellowgreen;
}
input:disabled {
background: blue;
}
</style>
<!--
css를 적용한 style 태그 내부의 내용을 외부 파일(외부 리소스)로 빼내서 불러올 수도 있다.
하지만 외부파일을 불러오는 방식을 할 경우 때때로 웹 브라우저가 캐시로 이미 저장해준
화면을 그대로 변화없이 그려주게 되는 경우가 있고 그 때마다 캐시를 지워서 다시 적용해
주어야 하기 때문에 수업에서는 style태그를 활용하는 내부 스타일 시트 방식으로 진행한다.
-->
<!-- 외부 스타일시트 방식 -->
<!--<link rel="stylesheet" href="selector2.css">-->
<title>CSS3 선택자2</title>
</head>
<body>
<h2>기본 속성 선택자</h2>
<p>기본 선택자 뒤에 []를 사용하여 속성과 속성값을 사용한다.
(주로 id나 class 속성 아닌 것들에 적용)
</p>
<pre> 선택자[속성=속성값] {설정내용}의 형식으로 사용된다.</pre>
<div name="name1 name5 name6" class="div-class">div 1</div>
<div name="name2" class="div-class">div 2</div>
<div name="name3" class="div-class">div 3</div>
<div name="name4" class="class-div">div 4</div>
<hr>
<h2>후손 선택자와 자손 선택자</h2>
<p>자손 선택자: 바로 아래의 요소, 후손 선택자: 하위 요소 전부</p>
<pre>자손 선택자: 선택자>자손선택자{설정내용}의 형식으로 사용,
후손 선택자: 선택자 후손선택자{설정내용}의 형식으로 사용
</pre>
<div id="test1">
<h4>자손입니다.</h4>
<h4>나도 자손입니다.</h4>
<div>
<ul id="testul">리스트
<li>나는 ul의 자손이면서 동시에 div의 후손입니다.</li>
<li>나도 ul의 자손이면서 동시에 div의 후손입니다.</li>
</ul>
</div>
</div>
<hr>
<h2>동위 선택자</h2>
<p>동위 관계(형제 관계)에서 뒤에 위치한 태그를 선택할 때 사용한다.</p>
<pre>바로 뒤의 요소 선택 시 : 선택자a + 선택자b {설정내용}으로 사용하며,
뒤에 있는 모두를 선택할 때는 선택자a ~ 선택자b {설정내용}으로 사용된다.
</pre>
<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>
<script type="text/javascript">
/* 나중에 javascript에서 다룰 때는 태그가 객체(object)의 개념이 된다. */
window.onload = function(){
let secondDiv = document.querySelector('div[name=name2]');
console.log(typeof secondDiv);
}
</script>
<hr>
<h2>반응 선택자</h2>
<p>사용자의 움직임에 따라 달라지는 선택자</p>
<pre>사용자가 클릭한 태그: 선택자:active{설정내용},
사용자의 마우스가 올라가 있는 태그: 선택자:hover{설정내용}으로 사용된다.</pre>
<div id="active-test">active 테스트</div>
<div id="hover-test">hover 테스트</div>
<hr>
<h2>상태 선택자</h2>
<p>입력 양식의 상태에 따라 선택되는 선택자</p>
<pre>체크 상태의 input태그 선택: input태그:checked{설정내용}</pre>
<!-- input[type="checkbox" name="fruits" value="사과"]#apple+label[for="apple"]{사과} -->
<input type="checkbox" name="fruits" value="사과" id="apple">
<label for="apple">사과</label>
<input type="checkbox" name="fruits" value="바나나" id="banana">
<label for="banana">바나나</label>
<input type="checkbox" name="fruits" value="복숭아" id="peach">
<label for="peach">복숭아</label>
<hr>
<p>초점이 맞추어진 input태그 선택</p>
<label for="userId">아이디: </label>
<input type="text" id="userId" placeholder="아이디를 입력하세요"><br>
<label for="userPwd">패스워드: </label>
<input type="password" id="userPwd" placeholder="비밀번호를 입력하세요"><br>
<p>사용 가능한 input태그선택</p>
<pre>태그:enabled{설정내용}, 태그:disabled{설정내용}</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>
<input type="text" disabled>
<button disabled>버어튼</button>
</body>
</html>
결과 화면
3
- 관련 코드
<!DOCTYPE html>
<html lang="ko">
<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">
<style>
/* 형제 탐색 선택자들(traversing siblings) */
/* 형제 관계 관련 pseudo선택자들은 한칸 띄워 쓰자 */
/* 형제 관계 태그 중 첫 번째 태그 선택 */
#test1 :first-child {
background: red;
color: white;
}
/* 형제 관계 태그 중 막지막 태그 선택 */
#test1 :last-child {
background: orange;
color: white;
}
/* 형제 관계 태그 중 앞에서 수열번 째 태그 선택(서순 체계(1부터)) */
#test1 :nth-child(2n) {
background: skyblue;
color: white;
}
/* 형제 관계 중 뒤에서 수열번 째 태그 선택 */
#test1 :nth-last-child(4) {
background: yellowgreen;
color: white;
}
/* 형제 관계 태그 중 첫 번째 태그 선택 */
#test2 :first-of-type {
background: red;
color: white;
}
/* 형제 관계 태그 중 마지막 번째 태그 선택 */
#test2 :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:not(:nth-child(2n-1)) {
background: orange;
}
/* 첫 번째 글자 선택 */
#test4 p:first-letter {
font-size: 2em;
}
/* 첫 번째 줄 선택 */
#test4 p:first-line {
background: coral;
}
/* 태그 뒤에 위치하는 공간을 선택 */
#test4 p:after {
content: "@@@ 태그 뒤에 추가 @@@"
}
/* 사용자가 드래그한 글자 선택*/
#test4 p::selection {
background: red;
color: white;
}
/* 태그별로 자동 번호를 매겨주는 속성 */
#test4 p:before {
content: counter(rint) ". ";
}
</style>
<title>CSS3 선택자3</title>
</head>
<body>
<h2>일반 구조 선택자</h2>
<p>특정한 위치에 있는 태그 선택(위치로 구분)</p>
<!-- div#test1>(p{테스트$}*5+pre{테스트$@6}*1) -->
<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>
<p>특정한 위치에 있는 태그 선택(태그 별로 구분)</p>
<div id="test2">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
<hr>
<h2>부정 선택자</h2>
<p>지금까지의 선택자에 대해 반대로 적용하는 선택자</p>
<div id="test3">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
<hr>
<h2>문자 선택자</h2>
<p>태그 내부에서 특정 조건의 문자를 선택하는 선택자</p>
<div id="test4">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
</div>
</body>
</html>
결과 화면
수업 중 보내주신 내용
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS 주석 */
/* 모든 선택자 '*' 기호 사용 */
/*
* {
color: red;
} */
/* 태그 선택자 */
p, li {
color: blue;
}
/* id 선택자 */
#class1 {
background: yellow;
color: green;
}
/* class 선택자 */
.class1 {
background: grey;
color: purple;
}
</style>
<title>CSS3 기본 선택자</title>
</head>
<body>
<h1>CSS 기본 선택자</h1>
<p>선택자(selector)란<br>
특정한 HTML 태그를 선택할 때 사용하는 기능으로, 태그를 선택하여 원하는 스타일과 기능을 적용할 수 있다.
</p>
<hr>
<h2>모든 선택자</h2>
<p>HTML 문서 안의 모든 태그를 선택할 때 전체 선택자를 사용할 수 있다.</p>
<ul>
<li>테스트1</li>
<li>테스트2</li>
<li>테스트3</li>
</ul>
<hr>
<h2>태그 선택자</h2>
<p>HTML 문서 내에 같은 태그를 모두 선택할 때 사용한다.</p>
<p>- p{color: red;}와 같은 형태로 사용된다.</p>
<hr>
<h2>아이디 선택자</h2>
<p>HTML 문서 내에 해당하는 아이디 속성의 값을 가진 태그만 선택할 때 사용한다.</p>
<p>- #아이디명{color: orange;}와 같은 형태로 사용된다.</p>
<ol>
<li id="class1">아이디 선택자 테스트1</li>
<li id="id2">아이디 선택자 테스트2</li>
<li id="id3">아이디 선택자 테스트3</li>
<li id="id4">아이디 선택자 테스트4</li>
<li id="id5">아이디 선택자 테스트5</li>
</ol>
<hr>
<h2>클래스 선택자</h2>
<p>HTML 문서 내에 여러 개의 태그를 동일한 클래스명으로 지정하여 선택할 때 사용한다.</p>
<p>- .클래스명{color: purple;}과 같은 형태로 사용된다.</p>
<ul>
<li class="class1" id="id">클래스 선택자 테스트1</li>
<li class="class2">클래스 선택자 테스트2</li>
<li class="class1">클래스 선택자 테스트3</li>
<li class="class2">클래스 선택자 테스트4</li>
<li class="class1">클래스 선택자 테스트5</li>
</ul>
<button>클릭</button>
</body>
</html>
'Web Crawling > Web Crawling ?' 카테고리의 다른 글
| 크롤링 도구 (0) | 2025.02.23 |
|---|---|
| 브라우저 렌더링 동작 구조 (0) | 2025.02.23 |
| 크롤링 데이터 저장 (0) | 2025.02.23 |
| WEB의 구조 (0) | 2025.02.23 |
| OPEN API 란 ? (0) | 2025.02.23 |