[CSS] 선택자
CSS
HTML 페이지에 CSS를 사용하여 꾸밀 수 있다.
스타일시트 : CSS로 작성된 코드
CSS를 사용하면 위치를 지정하고 색상을 추가하거나 텍스트를 이동할 수 있다.
블록 수준 요소에 대한 여백 및 테두리를 설정할 수 있다.
선택자
CSS에서 특정 HTML 태그를 선택할 때, 선택자를 사용한다.
선택자를 사용하여 특정 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>
h1 {
color: red;
background-color: orange;
}
</style>
</head>
<body>
<h1>안녕하세요</h1>
</body>
</html>💻 출력
h1 태그의 color 스타일 속성에 스타일 값으로 빨간색을, background-color 스타일 속성에 오렌지색을 적용한 모습이다.
CSS 주요 선택자 종류
| 종류 | 형태 | 사용 예시 |
| 전체 선택자 | * | * |
| 태그 선택자 | 태그 | h1 ~ h6 |
| 아이디 선택자 | #아이디 | #id |
| 클래스 선택자 | .클래스 | .header |
| 후손 선택자 | 선택자 선택자 | header h1 |
| 자손 선택자 | 선택자 > 선택자 | header > h1 |
전체 선택자
- HTML 페이지 내부의 태그를 모두 선택한다. (형태 : *)
- 아래 예시 코드에서 모든 태그의 color 스타일 속성을 변경한다.
💻 출력
✍ 입력
<!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>
* { color : blue; }
</style>
</head>
<body>
<h1>제목 글자 태그</h1>
<p>소형 모빌리티 플랫폼 '모베드'와 사족보행 로봇 스팟도 관객들을 만났다.</p>
</body>
</html>태그 선택자
- HTML 페이지 내부의 특정 태그를 모두 선택한다.
- 아래 예시 코드에서 해당 태그의 color 스타일 속성의 값을 변경한다.
💻 출력
✍ 입력
<!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>
h1 { color : red; }
p { color : blue;}
</style>
</head>
<body>
<h1>제목 글자 태그</h1>
<p>소형 모빌리티 플랫폼 '모베드'와 사족보행 로봇 스팟도 관객들을 만났다.</p>
</body>
</html>
위 소스코드에서는 h1 태그의 color 속성에 빨간색 red를 적용하였고, p 태그의 color 속성에 파란색 blue를 적용하였다.
한꺼번에 선택자를 여러 개 입력하여 스타일 속성을 적용하고 싶을 때는 아래와 같이 쉼표를 사용한다.
아이디 선택자
- 특정 id 속성이 있는 태그 선택 (형태: #아이디)
- 공간 분할 태그 div에 아이디 선택자를 사용하여 id속성을 적용한다.
✍ 입력
<!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>
#header {
width: 800px; margin: 0 auto;
background: red;
}
#wrap {
width: 800px; margin: 0 auto;
background: hidden;
}
#aside {
width: 200px; float: left;
background: blue;
}
#content {
width: 600px; float: left;
background: green;
}
</style>
</head>
<body>
<div id="header">
<h1>#header 태그</h1>
</div>
<div id="wrap">
<div id="aside">
<h1> #aside 태그</h1>
</div>
<div id="content">
<h1>#content 태그</h1>
</div>
</div>
</body>
</html>💻 출력
!! 웹 페이지 내부에서 id 속성을 중복해서 사용하면 안된다. !!
스타일시트에서는 id 속성이 중복되어도 문제가 발생하지 않으나 자바스크립트에서 id 속성이 중복되면 문제가 발생한다. 그러므로 웹 페이지 내부에서 id 속성이 중복되지 않게 적용해야 한다.
* 클래스 선택자 *
- 특정 클래스가 있는 태그를 선택할 때 사용한다. (형태 : .클래스)
• 클래스 선택자를 1개 사용할 경우
💻 출력
✍ 입력
• 클래스 선택자를 여러 개 사용할 경우
공백으로 구분하여 클래스를 여러 개 사용 가능
✍ 입력
💻 출력
h1 태그에 두 가지 속성이 적용되어 파란색 배경에 빨간색 글자로 화면이 출력된다.
style 태그에서 선언한 item과 header 클래스가 함께 적용되었다.
웹 페이지 내부에서 id 속성은 중복되지 않아야 한다. 하지만 class 속성은 중복될 수 있다.
class 속성을 서로 다른 태그에 적용할 경우, 태그 선택자와 클래스 선택자를 함께 사용할 수 있다.
✍ 입력
💻 출력
정확하게 태그를 선택하여 사과 글자만 빨간색으로 표시하였다.
속성 선택자
특정 속성과 값이 있는 태그를 선택할 때 사용한다.
| 선택자[속성] | 특정한 속성이 있는 태그 선택 |
| 선택자[속성=값] | 특정한 속성 내부 값이 특정 값과 같은 태그 선택 |
input 태그는 이름이 모두 같으나 type 속성에 따라 형태가 다르기 때문에
input 태그를 선택할 때는 속성 선택자를 많이 사용한다.
✍ 입력
💻 출력
자손과 후손
body 태그 내부는 위 사진과 같이 계층구조로 나타낼 수 있다.
div 태그를 기준으로 바로 한 단계 아래에 위치한 h1, h2, ul 태그를 자손이라 하고, div 태그 아래에 위치한
모든 태그를 후손이라 한다.
후손 선택자
• 사용 형태: 선택자A 선택자B (선택자A의 후손인 선택자B 선택)
- 특정한 태그의 후손을 선택할 때 사용
✍ 입력
💻 출력
#header 태그 아래에 위치한 h1 태그에는 빨간색으로 적용하고,
#section 태그 아래에 위치한 h1 태그에는 주황색을 적용한다.
후손 선택자 주의사항
• 선택자 여러 개를 함께 사용할 때
- header 태그의 후손인 h1 태그와 header 태그의 후손인 h2 태그를 선택하고 싶을 경우 아래와 같이 사용해야 한다.
아래와 같이 작성할 경우 header 태그의 후손인 h1 태그와 일반적인 h2 태그를 선택하게 되므로 주의하자.
자손 선택자
- 특정한 태그의 자손을 선택할 때 사용
• 사용 형태: 선택자A > 선택자B (선택자A의 자손인 선택자B 선택)
✍ 입력
💻 출력
# nav 태그 아래에 위치한 h1 태그는 자손이 아닌, 후손이기 때문에 스타일이 적용되지 않음에 주의한다.
! table 태그의 요소를 선택할 때는 자손 선택자 사용을 추천하지 않는다. !
✍ 입력
💻 출력
위 소스코드를 실행하면 th 태그 (이름, 지역)에 빨간색이 적용될 것이라 예상할 수 있다.
하지만 실행해보면 빨간색이 적용되지 않은 것을 확인할 수 있는데 웹 브라우저는 table 태그에 자동으로 tbody 태그를 추가하기 때문에 스타일 속성이 제대로 적용되지 않은 것이다.
색상을 적용하기 위해선 style 태그 안에 table > tbody > tr > th로 작성해야 한다.
반응 선택자
- 사용자 반응으로 생성되는 특정한 상태를 선택한다.
| :active | 사용자가 마우스로 클릭한 태그를 선택한다 |
| :hover | 사용자가 마우스 커서를 올린 태그를 선택한다 |
✍ 입력
<!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>
h1:hover { color : red;}
h1:active { color : blue;}
</style>
</head>
<body>
<h1>반응 선택자입니다</h1>
</body>
</html>💻 출력
상태 선택자
- 입력 양식의 상태를 선택할 때 사용
| :checked | 체크 상태의 input 태그 선택 |
| :focus | 포커스를 맞춘 input 태그 선택 |
| :enabled | 사용 가능한 input 태그 선택 |
| :disabled | 사용 불가능한 input 태그 선택 |
✍ 입력
💻 출력
- 사용가능 입력 칸을 클릭하였을 때
구조 선택자
- 특정한 위치에 있는 태그를 선택할 때 사용
| :first-child | 형제 관계에서 첫번째로 등장하는 태그 선택 |
| :last-child | 형제 관계에서 마지막으로 등장하는 태그 선택 |
| :nth-child(수열) | 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택 |
| :nth-last-child(수열) | 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택 |
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
ul {overflow: hidden;}
li {
list-style:none;
float:left; padding:15px;
}
li:first-child {border-radius: 10px 0 0 10px;}
li:last-child {border-radius: 0 10px 10px 0;}
li:nth-child(2n) {background-color: #FF0003;}
li:nth-child(2n+1) {background-color: #800000;}
</style>
</head>
<body>
<ul>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
<li>네 번째</li>
<li>다섯 번째</li>
<li>여섯 번째</li>
<li>일곱 번째</li>
</ul>
</body>
</html>
💻 출력
float: 원소 추가하는 방법
padding : 경계선 부분 사이의 여백을 두는 것 (픽셀은 거리)
✍ 입력
💻 출력
li 태그의 첫 번째 자손에 해당하는 a 태그를 선택한 것이기 때문에 a 태그 5개가 모두 조건에 해당되어 빨간색으로 표시된 것이다.
첫 번째 a 태그에만 빨간색을 적용하고 싶으면 아래와 같이 입력해야 한다.
✍ 입력
💻 출력
