STUDY/web
[CSS3] 선택자 기초 개념 정리
이앤지
2021. 11. 18. 18:23
웹표준인 HTML5+CSS3+JS 에서 CSS3 기초 개념을 정리해본다.
CSS3 선택자.
css블록은 style 태그 내부에 입력한다.
* css 선택자로는 뭣이 선택됐는지(<h1>) 을 가장 먼저보고 그 다음 속성과 값을 따진다.
CSS3 선택자 종류
여기서 기본 선택자는 전체 선택자 / 태그 선택자 / 아이디 선택자 / 클래스 선택자!
* 알아두면 잘 쓰이는 선택자는 아이디 선택자 / 속성 선택자 / 속성값과 동일한 속성 선택자(특히 중요!)
* 구분 잘 해둬야할 선택자는 후손선택자 와 자손선택자
* 반응선택자에서는 .hover 가 그래도 많이 쓰이고,
* 동위 선택자도 잘쓰이니까 잘 알아두기
예시 코드
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 선택자</title>
<!-- 기본 선택자 스타일-->
<style>
/* 선택자 {속성이름:속성값;속성이름:속성값} */
* {
color: red;
/* background-color: honeydew; */
}
h1 {
background-color: yellowgreen;
}
/* #아이디지정*/
#title {
font-style: italic;
}
/* 클래스 선택자*/
.bold {
font-weight: bold;
}
.bold1 {
font-weight: lighter;
}
p {
color: blueviolet;
}
/* 중복된 태그면 순차적으로 맨 마지막 태그가 보임 */
/*선택자*/
body,
h1,
p {
margin: 0px;
/*0px은 여백없음. 기본은 8px. 기본단위를 알려줄때는 써야됨*/
}
/* p{
margin: 20px;
} */
#header {
width: 300px;
height: 100px;
background-color: yellow;
/* margin: 10px 20px 30px 40px; 상하좌우시계방향 top right bottom left*/
/* margin: 30px 10px; */
margin: 0 auto;
/*상하 좌우*/
}
/*div안에 아이디가 contents인거*/
div#contents {
width: 300px;
height: 500px;
background-color: orange;
/* margin: 10px 20px 30px 40px; 상하좌우시계방향 top right bottom left*/
/* margin: 30px 10px; */
margin: 0 auto;
/*상하 좌우*/
}
h1.title {
color: wheat;
font-weight: lighter;
background-color: tomato;
}
</style>
<!-- 속성 선택자 스타일 (스타일 몇개여도 상관x)-->
<style>
input[type] {
border: 5px solid #000000;
}
input[type=text] {
background-color: blue;
}
input[type=password] {
background-color: chartreuse;
}
</style>
<!-- 범위 한정 선택 : 자손, 후손-->
<style>
#header1 h1 {
background-color: wheat;
color: red;
}
#section h1 {
color: white;
}
#header>h1 {
color: blue;
font-weight: bold;
}
/* 동위 선택자 : +(앞 요소 바로 뒤 하나) , ~(뒤 요소 모든요소)*/
#head1+h1 {
color: cyan;
}
#head1~h2 {
color: midnightblue;
}
</style>
<!--반응 선택자-->
<style>
h3:hover{
/* 마우스 커서가 특정 요소 위로 올라갔을 때 반응*/
color: deepskyblue;
background-color: gold;
}
h3:active{
color: magenta;
background-color: maroon;
}
</style>
<!-- 상태 선택자-->
<style>
input:enabled{
border: 5px solid #ff0000;
}
input:disabled{
background-color: darkgray;
}
input:focus{
background-color: orange;
border: royalblue;
}
#article{
width: 500px;
height: 300px;
overflow: hidden;
}
input[type=checkbox]:checked+#article{
height: 0px;
}
input[type=checkbox]{
display: none;
}
li:nth-child(2n){ /*짝수번째*/
background-color: maroon;
color: peachpuff;
}
li:nth-child(2n+1){ /*홀수번째*/
background-color: aquamarine;
color: fuchsia;
}
li:first-child{
background-color: gold;
color: hotpink;
border-radius: 40px 0px 0px 40px;
}
li:last-child{
background-color: lawngreen;
color: lightpink;
border-radius: 0px 40px 40px 0px;
}
/* 리스트 태그를 수평방향으로 나열*/
ul{
overflow: hidden;
/* 리스트 스타일 */
list-style: none;
}
li{
float: left;
padding: 10px 30px; /*상하 좌우*/
}
#photo{
border-radius: 50%; /* %는 호를 그려줌*/
border: 3px solid gray;
width: 50px; /* 이미지 사이즈는 스타일*/
}
</style>
<!-- 링크 선택자 -->
<style>
a:link{
color: green;
}
a:visited{
color: green;
}
a:hover{
color: rgb(0,0,0,);
text-decoration: underline;
}
</style>
</head>
<body>
test
<a> 네이버 </a>
<a href="test">네이버</a>
<a href="https://www.naver.com">NAVER</a>
<!--이미지 인스타그램 프로필-->
<hr>
<img id="photo" src="mini3.jpg" alt="">
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<hr>
<!--상태 선택자 버튼check-->
<label for="btn">기사 가리기</label> <input id="btn" type="checkbox">
<div id="article">
<h1>[핵잼 사이언스] “적이다! 공습경보 발령”…꿀벌이 말벌떼 공격 막는 방법 </h1>
<p> 토종꿀벌은 말벌떼의 공습을 받으면 불규칙한 비명 같은 경보음으로 동료들을 불러 모은다는 연구 결과가 나왔다.
미국 웰슬리 칼리지 등 연구진은 베트남에서 한국의 토종벌과 같은 재래꿀벌(Apis cerana)이 날개로 내는 경보음을 기록해 지금까지 알려지지 않았던 특별한 소리를 발견했다.
이른바 ‘안티프레데터 파이프’(antipredator pipe)로 명명된 이 소리는 기존 연구에서 ‘쉿쉿’하는 경고 소리나 정지 신호로 짧지만 높은 진동수의 ‘붕붕’대는 소리와 다르게 진동수가 급격하게 변하는 거칠고 불규칙한 소리다.</p>
</div>
<hr>
<input> <input disabled>
<hr>
<h3>반응 선택자</h3>
<hr>
<div>
<h1 id="head1">Header1 - 1</h1>
<h1>Header1 - 2</h1>
<h2>Header2 - 1</h2>
<h2>Header2 - 2</h2>
<h2>Header2 - 3</h2>
<h2>Header2 - 4</h2>
<h2>Header2 - 5</h2>
</div>
<hr>
<!-- 후손,자손 선택자-->
<div id="header1">
<h1 class="title">제목입니다.</h1>
<div id="nav">
<h1>네비게이션</h1>
</div>
</div>
<div id="section">
<h1 class="title"> 제목2입니다.</h1>
<p>내용이 표현됩니다.</p>
</div>
<hr>
<!-- 속성 선택자 바디 -->
<input type="text"> <input type="password">
<hr>
<!--공간분할-->
<div id="header">
<h1 class="title">HEADER</h1>
</div>
<div id="contents">
<img src="mini1.jpg">
</div>
<div id="footer"></div>
<hr>
<h1 id="title" class="bold1">[핵잼 사이언스] 길이 6m…바닷속 초희귀 ‘빅핀 오징어’ 포착</h1>
<p class="bold">바닷속 심해에 살아 좀처럼 인간에게 모습을 드러내지 않는 희귀 오징어가 카메라에 포착됐다.</p>
<p>최근 미 해양대기청(NOAA) 해양탐사팀은 지난 9일(현지시간) 멕시코만 바다 식물을 조사하던 도중 수심 2400m에서 우연히 희귀 오징어인 ‘빅핀 오징어'(bigfin squid)를 목격했다고 밝혔다.
</p>
<p class="bold1">최근 미 해양대기청(NOAA) 해양탐사팀은 지난 9일(현지시간) 멕시코만 바다 식물을 조사하던 도중 수심 2400m에서 우연히 희귀 오징어인 ‘빅핀 오징어'(bigfin
squid)를 목격했다고 밝혔다.
</p>
<h1>footer</h1>
</body>
</html>
구체적으로 보자면,
아이디 선택자 : 공간 분할 태그에 아이디 선택자를 사용하여 id속성을 적용(중복 안돼!)
클래스 선택자 : 특정한 클래스를 가지고 있는 태그를 선택
(클래스의 속성은 공백으로 구분하여 클래스를 여러개 사용 가능!, class속성은 중복 가능!
선택자와 클래스 선택자를 함께 사용해서 더 정확하게 태그 선택이 가능해진다!)
속성 선택자 : 특정 속성과 값을 가지는 태그를 선택할 때 사용
후손선택자와 자손선택자
- 후손선택자를 사용해 특정한 대상의 후손이라는 것을 알림. 아래는 주의하기!
header 태그의 후손인 h1 태그를 선택하고 일반적인 h2 태그를 선택
<style>
#header h1, h2{color: red;}
<style>header 태그의 후손인 h1태그와 header 태그의 후손인 h2태그를 선택
<style>
#header h1, #header h2{color: red;}
<style>- 자손선택자를 사용해 특정한 대상의 자손이라는 것을 알림.
(#nav 태그아래에 있는 h1태그는 후손이지 자손은 아니기 때문에 스타일 적용이 안될 수 있다는 것 주의!)
동위 선택자 :
예제
<style>
/* h1 태그의 바로 뒤에 위치하는 h2 태그
의 color 속성에 red 키워드를 적용합니다. */
h1+h2 {
color: red;
}
/* h1 태그의 뒤에 위치하는 h2 태그
의 background-color 속성에 orange 키워드를 적용합니
다. */
h1~h2 {
background-color: orange;
}
</style>
<body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
</body>
반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택(마우스 커서의 움직임에 따라 다른 스타일 적용)
예제
<style>
/*
h1 태그에 마우스를 올릴 경우에 color 속성에 red 키워드
를 적용합니다. */
h1:hover {
color: red;
}
/*
h1 태그를 마우스로 클릭할 때 color 속성에 blue 키워드
를 적용합니다. */
h1:active {
color: blue;
}
</style>
<body>
<h1>User Action Selector</h1>
</body>
상태 선택자 : 입력 양식의 상태를 선택할 때 사용
예
구조 선택자 : 특정한 위치에 있는 태그를 선택할 때 사용
문자 선택자 : 태그 내부의 특정한 조거느이 문자를 선택하는 선택자
(시작 문자 선택자 : 태그 내부의 첫번째 글자나 첫 번째 줄을 선택할 때 사용하는 선택자)
반응 문자 선택자 : 반응 문자 선택자는 사용자가 문자와 반응해서 생기는 영역을 선택하는 선택자
링크 선택자 : href속성을 가지고 있는 a 태그와 한 번 이상 다녀온 링크를 선택할 수 있는 선택자
예제
<style>
a {
text-decoration: none;
}
a:visited {
color: red;
}
/* href 속성을 가지고 있는 a 태그 뒤의 공간
에 "- (href 속성)"을 추가합니다. */
a:link::after {
content: ' - 'attr(href);
}
</style>
<body>
<h1><a>Nothing</a></h1>
<h1><a href="http://www.naver.com">Naver</a></h1>
<h1><a href="http://www.w3.org/">W3C</a></h1>
<h1><a href="https://github.com/">Github</a></h1>
</body>
부정 선택자 : 지금까지 배운 선택자를 모두 반대로 적용할 수 있게 만드는 선택자
예제
<style>
/* input 태그 중에서 type 속성값이 password
가 아닌 태그의 background 속성에 red 키워드를 적용합니
다.*/
input:not([type=password]) {
background: red;
}
</style>
<body>
<input type="password" />
<input type="text" />
<input type="password" />
<input type="text" />
</body>