2023.07.25 - [[새싹X코딩온]웹 풀스택] - [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(2)-선택자(Selector)1
[새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(2)-선택자(Selector)1
이번에는 선택자에 대해서 알아보도록 할 거에요. 선택자가 어떻게 구성되어있는지부터 먼저 알아보도록 할게요~! 여기에서 p가 선택자이고 중괄{}를 열고 닫는 것을 블록이라고 해요. color:red;
seeun0210.tistory.com
이번 포스팅에서는 지난 포스팅 마지막에서 언급했던 가상클래스선택자, 가상요소선택자, 속성선택자에 대해서 알아보도록 할게요!
1. 가상클래스 선택자
:사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소를 선택하여 각 요소의 상황에 따라 사용자가 원하는 요소를 선택할 때 사용합니다. 특정 요소를 부정할 때에도 사용할 수 있어요!
간단히 말하자면 사용자의 행동에 따라서 어떤 행동일 때 이러한 꾸밈을 하겠다! 이렇게 생각해주시면 됩니다 ㅎㅎ
그럼 종류를 개략적으로 살펴보도록 할게용!
-사용자의 행동에 따라 변화: hover, active, focus, visited,...
-요소의 상황:first-child, last-child, nth-child,...
-부정선택:not
그럼 하나씩 자세히 살펴보도록 해 봅시다.
1) hover: 마우스를 올렸을 때 어떻게 하겠다.
2) active: 마우스를 클릭하고 있는동안 어떻게 하겠다!
3)focus:커서가 깜빡이게 됐을 때 어떻게 하겠다.
실습을 통해서 위의 세가지 가상클래스선택자를 직접 살펴보도록 할게요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상클래스연습1</title>
</head>
<link rel="stylesheet" href="./가상클래스선택연습1.css">
<body>
<h1>제목</h1>
<input type="text">
</body>
</html>
h1:hover{
color:red;
}
a:active{
background-color:blue;
}
input:focus{
background-color:orange;
}
가상클래스연습1
이렇게 확인해 볼 수 있었어요!
4) E::first-child{}
5)E::last-child{}
6)E::nth-child(n){}
여기에서 n에는 2n(짝수),2n+1(홀수)등 숫자 뿐만아니라 이렇게 홀,짝, 나머지,배수 들도 표시할 수 있어요!!
7)E::not(XYZ){}
여기에서는 fruits클래스를 속성으로 갖는 모든 자식들 중 span이 아닌 요소들의 컬러가 빨간색으로 스타일이 지정되겠죠?
그럼 가상클래스를 사용하여 간단한 실습을 한번 해볼게요~!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./가상클래스선택자연습2.css">
<body>
<div class="stripes">
<div>navy</div>
<div>yellow</div>
<div>navy</div>
<div>navy</div>
<div>navy</div>
<div>yellow</div>
<div>navy</div>
<div>navy</div>
<div>navy</div>
<div>yellow</div>
<div>navy</div>
</div>
</body>
</html>
.stripes>div:nth-child(2n){
background-color:yellow;
}
.stripes>div:nth-child(2n+1){
background-color:navy;
color:white;
}
이렇게 stripes클래스를 속성으로 갖는 태그의 자식 클래스들 중 짝수는 노란색으로, 홀수는 배경색은 남색 글자색은 흰색으로 스타일을 지정해서 구현해 보았습니다!
2. 가상 요소 선택자
-선택된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자
-반드시 content라는 속성을 사용해야해요!!!(빈 값("")이라도 넣어주어야 적용이 됩니다!
종류는 after(요소의 뒤에 내용삽입), before(요소의 앞에 내용삽입) 이렇게 두가지로 나누어 볼 수 있어요!
1)before: 요소의 앞에 내용 삽입
2)after: 요소의 뒤에 내용 삽입
이렇게 살펴본 가상요소선택자는 실제로 의미 없는 HTML태그를 만들지 않고 요소 삽입이 가능하여 자주 사용해요!
예를 들어 쇼핑몰 페이지의 메뉴에 HOT, 추천 등을 넣기 위해 별도의 태그를 삽입하는 것이아니라 가상 요소 선택자를 활용하여 처리하면 편리하겠죠??
CSS의 여러 선택자들을 배워보았는데요! 여기에서 선택자들끼리 충돌할 경우 우선순위는 어떻게 될까요?
우선순위는 이렇게 된다고 해요!
만약 우선순위가 같은데 충돌하게 되면(클래스, 속성, 가상) ? 가장 마지막에 쓰여진 CSS가 반영된다고 해요!
!important는 우선순위를 무시하고 이걸 가장 먼저 쓰겠다는 말인데 웬만하면 쓰지 않는 것을 추천합니다!
3. 속성선택자
-지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자
종류
-특정 속성만 지정
-속성과 속성의 값을 지
1)[abc]:HTML태그 안에서 abc속성을 갖는 요소를 선택하여 스타일 지정
여기에서는 disabled라는 속성을 가진 요소를 선택해서 글자색을 빨간색으로 지정하는 스타일을 주었다고 볼 수 있어요!
2)[abc="xyz"]: 속성 abc를 갖고 그 속성(프로퍼티)의 value값이 xyz인 요소를 선택
여기에서는 type이라는 프로퍼티를 갖고 그 프로퍼티의 값이 password인 요소를 선택하여서 글자 색을 빨간색으로 지정했다고 볼 수 있어요!
그럼 지금 까지 배운 CSS 선택자들을 한번 코드로 확인해보겠습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index4.css">
<title>가상 선택자</title>
</head>
<body>
<div class="div1">
<span>div1</span>
</div>
<input type="text" />
<div class="links">
</div>
<ul class="zoo">
<h1>동물원 입니다.</h1>
<div>원숭이</div>
<li>사자</li>
<li>토끼</li>
<li>호랑이</li>
<div>코알라</div>
<li>코끼리</li>
<li>강아지</li>
</ul>
<!-- 가상요소 선택자 -->
<hr>
<div class="box">여기요!</div>
<hr>
<!-- 실습 4. 속성선택자 -->
<input type="text" placeholder="이름" />
<input type="password" value="pw" />
<input type="text" value="000-0000-0000" />
<input type="text" placeholder="핸드폰" />
<input type="text" placeholder="주민번호" disabled />
</body>
</html>
.div1{
width:100px;
height:100px;
background-color:aquamarine;
}
/* :hover :요소에 마우스를 올렸을 떄 */
.div1:hover{
background-color:hotpink;
height:150px;
}
/* :active :요소에 마우스로 클릭하고 있을 떄
hover와 active가 겹치면 active가 우선순위가 더 높다 */
.div1:active{
background-color:brown;
width:150px;
}
/* :focus :요소에 포커즈(커서가 깜빡)가 됐을 떄 */
input:focus{
background-color:blueviolet;
color:white;
outline-color:yellowgreen;
/* outline-color:테두리 색 바꿔줌 */
}
.links>a:hover{
background-color:coral;
}
.links>a:visited{
color:gray;
/* color: gray=#cccccc=#ccc */
}
/* 요소 상황에 따른 가상 선택자 */
.zoo >*{
background-color:green;
color:white;
}
/* E:last-child :E가 마자막 요소라면 */
.zoo>li:last-child{
background-color:black;
}
/* E:first-child :E가 첫 요소라면 */
.zoo>*:first-child{
background-color:red;
}
/* 후보가 1개 */
/* E:not(XYZ) :XYZ가 아닌 요소 선택 */
.zoo>*:not(div){
background-color:pink;
}
/* 후보가 6개=> 따라서 h1에 대해서 not(div)의 우선순위가 first-child에 밀렸기 때문에 pink가 아니라 red로 반영됨 */
/* E:nth-child(n):E가 n번째 요소라면 선택
여기서 n은 꼭 숫자일 필요는 없음
만약 2n이라면 2의 배수
3n+1이라면 3으로 나눈 나머지가 1인 수 */
.zoo>*:nth-child(2){
background-color:aqua;
}
/* 가상요소 선택자 */
.box::before{
content:"택시~";
font-weight:bold;
color:red;
}
.box::after{
content:"빨리!!";
font-weight:bold;
color:blue;
}
/* 실습4.속성 선택자 */
[disabled]{
background-color:red;
}
[placeholder="이름"]{
background-color:orange;
}
input:not([placeholder]){
background-color:blue;
}
웹브라우저에서 확인!
