AI와 데이터 사이언스의 이론과 실전
CSS - 선택자(전체, 요소, 상속, id, class, 그룹, 자식, 자손, 형제, 인접형제, 속성, 가상 선택자) 본문
HTML과 CSS/CSS
CSS - 선택자(전체, 요소, 상속, id, class, 그룹, 자식, 자손, 형제, 인접형제, 속성, 가상 선택자)
큐트아리 2023. 10. 16. 14:241. 선택자
선택자(Selectors)는 CSS 규칙이 어떤 요소에 적용될지를 지정하는 방법을 정의합니다.
1.1.전체 선택자
- 스타일을 모든 요소(body안에 들어간 태그,앨리먼트)에 적용
- * 기호를 사용해서 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음
* { 속성명1: 속성값2; 속성명2: 속성값; ...}
- 다른 개별 선택자가 더 우선순위가 전체태그 했어도 다른 선택자를 사용한 style 적용
<예시 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체 선택자</title>
<style>
* {color: darkgreen; }
h2 {color: deeppink; font-size: 50px;}
</style>
</head>
<body>
<h2>전체 선택자</h2>
<ol>
<li>스타일을 모든 요소에 적용</li>
<li>* 기호를 사용해서 표현</li>
<li>너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하</li>
</ol>
</body>
</html><결과>
1.2. 요소 선택자
- 특정 요소가 쓰인 모든 요소에 스타일을 적용
<예시코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소 선택자</title>
<style>
h2 {font-size: 50px;}
p {color: deepskyblue;}
</style>
</head>
<body>
<h2>요소 선택자</h2>
<p>특정 요소가 쓰인 모든 요소에 스타일을 적용</p>
<p><span>span 요소는 inline으로 주어진 글자만큼만 공간차지</span></p>
<p><strong>strong 요소는 두꺼운 글씨</strong></p>
<p><ins>ins 요소는 밑줄</ins></p> <!--밑줄-->
<p>상속으로 인해 부모 요소 p태그의 속성값이 자식 요소인 span strong ins에게 전달되어 다 파란색으로 바뀜</p>
</body>
</html><결과>
1.2.1. 상속
- 부모 요소의 속성값이 자식 요소에게 전달되는 것
- https://www.w3.org/TR/CSS22/propidx.html 여기에서 inherited(상속여부)이 yes인 애들은 상속됨
<예시 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상속</title>
<style>
div {
color: green; /*상속 됨*/
border: 3px dotted red; /*상속 안됨*/
padding: 70px; /*상속 안됨*/
}
h3 {border: 3px dotted blue;}
</style>
</head>
<body>
<h2>상속</h2>
<div>
div 영역
<h3>상속이란</h3>
<p>부모 요소의 속성값이 자식 요소에게 전달되는 것</p>
<p>color는 상속되는 애라 div속 p태그 h3태그 모두 파란색 됨</p>
<p>border은 상속되지 않아서 div만 테두리 쳐짐 </p>
<p>h3의 파란 테두리는 별도의 스타일 줘서 생긴것</p>
<p>padding또한 상속되지 않아서 div에만 적용되고 그 안의 것은 여백적용안됨</p>
</div>
</body>
</html><결과>
4.3. id 선택자
- 웹 문서안의 특정 부분 스타일을 적용
- #기호를 이용하여 id 속성을 가진 요소에 스타일을 적용
<문법>
[HTML]
<body>
<h2 id = 'hello'>안녕</h2>
<h2>반가워</h2>
<p id = 'hello'>또봐</p> # id는 중복될 수 없음으로 불가능 html,css는 오류가 안남으로 시스템마다 둘다 적용될수도 하나만 될수도 있음
</body> [CSS]
h2 {font-size:30px;} /*안녕 반가워 모두 30px적용*/
h2#hello {font-size:20px;} /*안녕만 20px 적용*/
#hello {color: pink} /*안녕만 핑크색 적용*/<예시코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id 선택자</title>
<style>
#container {
background-color: gold;
padding: 20px; /*안쪽 여백*/
width: 500px; /*가로 지정*/
height: 300px;
text-align: center;
}
#header {
background-color: deepskyblue;
width: 200px;
height: 300px;
text-align: center;
margin: 50px auto ; /*바깥여백(요소사이거리) 위 오른쪽 아래 왼쪽 혹은 위아래 왼오 auto는 가운데 정렬*/
line-height: 200px;
}
</style>
</head>
<body>
<h2>id 선택자</h2>
<div id="container">div 첫번째 영역</div>
<div id="header">div 두번째 영역</div>
</body>
</html><결과>
1.4. class 선택자
- 특정 집단의 요소를 한번에 스타일 적용
- . 기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용
<문법>
[HTML]
<body>
<h2 class = 'hello'>안녕</h2>
<h2>반가워</h2>
<p class = 'hello'>하이</p>
<p>또보네</p>
</body> [CSS]
h2 {font-size:30px;} /*안녕 반가워 모두 30px적용*/
h2.hello {color: deeppink;} /*h2의 class가 hello인 안녕만 deeppink 적용*/
.hello {color: pink} /*안녕, 하이 둘다 핑크색 적용 이전의 deeppink는 덮어씌워짐*/<예시코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class 선택자</title>
<style>
.bigText {font-size: 50px;}
.smallText {font-size: 10px;}
.redText {color : red;}
</style>
</head>
<body>
<h2 class="bigText">class 선택자</h2>
<p>역할 : <span class="smallText redText">특정 집단의 요소를 한번에 스타일 적용</span></p>
<p>.<span class="smallText"> 기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용
</span></p>
</body>
</html><결과>
1.5. 그룹 선택자
- 여러개의 요소를 나열하고 ,(콤마)로 구분하여 스타일을 적용
<문법>
h2,p { text-align: center;}<예시코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그룹 선택자</title>
<style>
* { text-align: center;}
h2 { font-size: 50px;}
h3 { font-size: 30px;}
p,li { font-size: 20px;}
li {display: inline-block;
margin-right: 40px ;
font-weight: bold;
color: blue;}
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>여러개의 요소를 나열하고 ,(콤마)로 구분하여 스타일을 적용</p>
<h3>선택자의 종류</h3>
<li>전체 선택자</li>
<li>요소 선택자</li>
<li>아이디 선택자</li>
<li>클래스 선택자</li>
<li>그룹 선택자</li>
</body>
</html><결과>
※ HTML 구조 확인하기
- 상위 : 부모
- 동위 : 형제
- 하위 : 자식
- 하하위 : 자손
<html>
<head>
<title>test</title>
</head>
<body>
<h2>html 구조</h2>
<p>html의 <b>구조</b>입니다</p>
</body>
</html>
여기서 HTML의 기준으로 head와 docy가 자식이고 title, h2, p가 자손입니다. 또한 head 기준으로 부모는 html이고 body는 형제 title은 자식 테스트는 자손입니다. h2를 기준으로 p는 h2(본인) 바로 뒤에 나오는 형제 즉, 바로 아래 동생임으로 인접형제입니다. 만약 h2와 p 사이에 또 다른 형제인 h6가 있다면 h2의 인접형제는 p가 아닌 h6입니다.
1.6. 자식 선택자
- 부모의 요소 하위의 자식 요소의 스타일을 적용
<문법>
body > p {color: deeppink;} #body안의 p태그를 선택1.7. 자손 선택자
- 조상요소 하위의 모든 요소의 스타일을 적용할 때 사용(자식을 포함)
- 조상 요소와 자손 요소 사이에는 띄어쓰기로 구분합니다.
<문법>
body p {color:deeppink} # 자손이 선택됨 즉 p와 p자식들 다 선택됨<예시코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식자손 선택자</title>
<style>
ul > a {font-size: 30px; color: blue;} /*자식만 선택*/
ul a { color: deeppink;} /*자식과 자손 모두 선택*/
</style>
</head>
<body>
<h2>자식 자손 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li><a href="https://www.google.com">구글</a></li>
<li>다음</li>
<li><a href="https://www.nate.com">네이트</a></li>
</ul>
</body>
</html><결과>
1.8. 인접 형제 선택자
- 붙어있는 형제만 가능, 사이에 누구도 있으면 안됨
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- 연속된 동생 요소의 스타일을 적용
- 형의 요소와 동생 요소 사이에 더하기(+) 기호를 사용
<문법>
h2 + p 하면 h2의 바로 아랫줄에 붙어있는 형제를 선택
h2 + p {color:deeppink}1.9. 일반 형제 선택자
- 형제 관계를 갖는 요소 중 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
- 형과 동생 사이에 물결(~)로 표시
- 인접 형제 선택자와는 달리 형을 기준으로 동생을 선택할때 바로 아래 동생뿐만 아니라 더 밑의 동생들을 모두 선택
<문법>
h2 ~ p {color : deeppink}
# h2와 떨어져있는 p 찾을 수 있음
<예시코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>일반형제 선택자</title>
<style>
p + span {color: gold; } /*p바로아래span인 여섯째만 변함*/
h3 + p { background-color: aqua;} /*h3바로 아래p인 둘째만 변함*/
h3 ~ p {color:red;} /*h3동생들중 모든 p에 적용*/
</style>
</head>
<body>
<h2>일반형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘쨰</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
</body>
</html><결과>
1.10. 속성 선택자
- html 요소에서 src, href, style, type, id, class등 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 너무 많음
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors 여기서 참고
<문법>
[HTML]
<img src='apple.png' alt='사과이미지'>
<img src='banana.png' alt='바나나이미지'> CSS
[scr] {border:3px solid red;}
[scr = 'apple.png'] {witdh: 200px; height: 200px;}
<예시코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자</title>
<style>
[href] {text-decoration: none; color: deeppink;} /*text-decoration: none;은 밑줄 없애기*/
.attr { background-color: gold;}
[class ='attr'] {font-size: 30px;}
[title] {text-align: center; font-size: 50px;}
</style>
</head>
<body>
<h2 title ='h2 요소의 title 속성'>속성 선택자</h2>
<p><a href="https://www.naver.com" target="_blank">네이버</a></p>
<p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</p>
</body>
</html><결과>
1.11. 가상 선택자
- 클래스를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 요소를 선택
- first-child : 첫번째에 해당하는 요소의 스타일을 적용
- nth-child(n) : 요소 중에서 n번째에 해당하는 요소의 스타일을 적용, 단일만 가능
- nth-child(even) : 요소 중에서 짝수번째에 해당하는 요소의 스타일을 적용
- nth-child(odd) : 요소 중에서 홀수번째에 해당하는 요소의 스타일을 적용
- last-child : 마지막에 해당하는 요소의 스타일을 적용
<문법>
[HTML]
<ul>
<li>김사과</li>
<li>반하나</li>
<li>오렌지</li>
<li>이메론</li>
</ul>[CSS]
li:first-child
li 요소 중에서 첫번째에 해당하는 요소의 스타일을 적용
예) ul > li:first-child {color:deeppink;}
li 요소 중에서 🟢n번째에 해당하는 요소의 스타일을 적용, 단일만 가능
li:nth-child(n)
li 요소 중에서 🟢짝수번째에 해당하는 요소의 스타일을 적용
li:nth-child(even)
li 요소 중에서 🟢홀수번째에 해당하는 요소의 스타일을 적용
li:nth-child(odd)
li 요소 중에서 🟢마지막에 해당하는 요소의 스타일을 적용
li:last-child<예시코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상 선택자</title>
<style>
.list > li:first-child {color: deeppink;}
li:nth-child(2) {color: gold;}
.list > li:nth-child(odd) { background-color: mediumspringgreen;}
li:nth-child(even) {background-color: black;}
li:last-child {color:rgb(178, 167, 115);}
</style>
</head>
<body>
<h2>가상 선택자</h2>
<ul class="list">
<li>첫번째</li>
<li>두번쨰</li>
<li>세번째</li>
<li>네번째</li>
</ul>
</body>
</html><결과>
1.12. 스타일링 링크
사실 스타일링 링크는 크게 보면 가상선택자의 한 종류이지만 따로 작성하겠습니다. 실제로 작업할때 아주 유용하게 쓰이는 css 기법입니다.
<문법>
a:link -> 하이퍼링크가 연결되었을때 선택
a:visited -> 해당 하이퍼링크를 방문한 적 있을때 선택
a:hover -> 특정 요소에 마우스를 올렸을 때 선택
a:active -> 특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
a:focus -> 특정 요소에 마우스 클릭시 다른 곳 클릭 전까지 적용
a:active -> 특정 요소에 마우스 클릭하는 동안 적용<예시코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일링 링크</title>
<style>
a:link { text-decoration: none; color: green;}
a:visited {text-decoration: none; color: salmon;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline; color: red;}
</style>
</head>
<body>
<h2>스타일링 링크</h2>
<p><a href="http://python.org">파이썬공식페이지</a></p>
</body>
</html><결과>
'HTML과 CSS > CSS' 카테고리의 다른 글
| CSS - display 속성, 폼 태그 (1) | 2023.10.20 |
|---|---|
| CSS - 박스 모델(내용, 패딩, 마진, 테두리) , 박스 사이징 (0) | 2023.10.19 |
| CSS - 배경 색 설정, 배경 이미지 삽입, 위치, 사이즈 조절 (1) | 2023.10.18 |
| CSS - 텍스트 간격, 정렬, 효과, 설정, 글꼴 선택 (1) | 2023.10.17 |
| CSS - HTML에 적용하는 법, 글씨 컬러 변경 (1) | 2023.10.15 |
'HTML과 CSS/CSS' Related Articles
more
