2023. 11. 29. 09:40ㆍ1단계) 쌩초보 코딩 HTML,CSS
192p 가상선택자 (예제파일 챕터11)
1) 동적가상클래스
2)구조적 가상클래스
1) 동적 가상 클래스
ㄱ. active : 클릭시 어떤 기능들이 활성화되는 가상 클래스 -----------------예제파일 1
<!DOCTYPE html>
<html lang="en">
<head>
<title>가상선택자</title>
</head>
<style>
button:active{
color: lime;
}
</style>
<body>
<button>클릭</button>
</body>
</html>button:active 사용시
<!DOCTYPE html>
<html lang="en">
<head>
<title>가상선택자</title>
</head>
<style>
button:active{
color: lime;
}
button {
color: blue;
}
</style>
<body>
<button>클릭</button>
</body>
</html>
body 에 추가로
그리고 위에 style에 (항상 a:style 등 붙여서 적어야한다)
입력시
링크는 #(없음)으로 했기 때문에, 클릭해도 이동은 안된다.
클릭시 black 으로 변환됨
body 에 추가
style 추가 시
<!DOCTYPE html>
<html lang="en">
<head>
<title>가상선택자</title>
</head>
<style>
button:active{
color: lime;
}
button {
color: blue;
}
a:active {
color: black;
}
p:active {
color: red;
}
</style>
<body>
<button>클릭</button>
<A href="#">클릭</A>
<p>클릭</p>
</body>
</html>
ㄴ. visited ★
이미 방문한 링크표시 (ex 링크 누르면 보라색으로 표시되는거) ---- A 태그한테만 사용가능하다.
특정 선택자에 설정한 active 위에 적는다. 맨 아래 적으니 활성화 되지 않는다.
일반적으로 보통 보라색을 설정한다. 색은 거의 변경하지 않는다.
검색 후 특정페이지를 들어갔다 나오면 클릭한 페이지의 텍스트 색깔이 변한다. 왜냐하면 링크를 클릭하거나 방문시 visited로 표시되기 때문이다.
ㄷ. disabled
비활성화된 요소를 나타냄 = 클릭할 수 있는걸 못하게 막음
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
input:disabled {
background-color: coral;
}
</style>
<body>
<input type="text" disabled>
<input type="text">
</body>
</html>
잘 안쓰는 기능이라고 하는데, 알아두자!
input, button 에만 쓸 수 있다.
ㄹ. hover -----------★★★★★
마우스 올릴 때 디자인이나, 상호작용하게 함
<!DOCTYPE html>
<html lang="en">
<head>
<title>hover 연습</title>
</head>
<style>
span:hover {
background-color: greenyellow;
}
</style>
<body>
<span> hover 많이 사용. 마우스 올릴 때 디자인 바뀌거나 상호작용하게 함</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>다른 디자인도 넣어보는 hover 연습2 </title>
<link rel="stylesheet" href="hover 연습2.html">
</head>
<body>
<!-- 여태까지 태그로 style 지정했는데, 태그로만 설정하면
같은 종류의 모든 태그가 같은 style 로 되기 때문에,
특정한 태그에 단 한개만 적용하기 위해 class를 사용함-->
<h1 class="title">제목</h1>
</body>
</html>
.title:hover {
color: lightblue;
}
색상범위는
margin 부분은 색깔 설정 안되고, 저기 파란색 범위이다.
body 안에
작성순서
1마우스 올리지 않았을때의 디자인
2마우스 올릴때의 디자인
<!DOCTYPE html>
<html lang="en">
<head>
<title>다른 디자인도 넣어보는 hover 연습2 </title>
<link rel="stylesheet" href="연습2.css">
</head>
<body>
<!-- 여태까지 태그로 style 지정했는데, 태그로만 설정하면
같은 종류의 모든 태그가 같은 style 로 되기 때문에,
특정한 태그에 단 한개만 적용하기 위해 class를 사용함-->
<h1 class="title">제목</h1>
<div class="box">
<p class="word">박스 안에 있습니다</p>
</div>
</body>
</html>
.title:hover {
color: lightblue;
font-size: 2.5em;
border-bottom: 3px solid darkslateblue;
}
/*부모자식 관계일때는 부모부터 적는다.*/
/*디자인 되는 태그는 가장 마지막에 적은 태그이다.
ex) word에 디자인이 들어간다.*/
.box .word {
color: blueviolet;
}
.box .word:hover {
font-weight: bold;
background-color: thistle;
}
197p
focus ----------- 챕터11 파일 5
클릭시 글자와 배경색을 매우 강조함. 낮은 시력을 가진 사람이 쓰기에 유용하지만, 일반적으로 잘 사용하지 않음.
<style>
.red-input:focus {
background: springgreen;
color: red;
}
.blue-input:focus {
background: springgreen;
color: blue;
}
</style>
<body>
<input class="red-input" value="클릭하면 빨갛게 됩니다." />
<input class="blue-input" value="클릭하면 파랗게 됩니다." />
</body>
2) 구조적 가상 클래스
챕터11 폴더6
선택자를 사용하지 않고, 요소를 선택가능. (why? 코드를 효율적으로 활용하기 위해)
first-child : div의 첫번째 자식 만 선택해서 활성화.
p태그가 자식일때, 그중 첫번째 자식에게만 활성화.
last-child
설정할 p태그중 마지막 자식에게 효과를 활성화.
즉, 마지막 자식에게 활성화한다고 생각하면됨.
nth-of-type
th(fourth 등 몇번째 의미할때 끝부분 th) +n ( number 숫자.) + of (~의)
-> 선택한 태그가 몇번째에 있는지 찾아서 디자인 넣어줌.
ex) p:nth-of-type(2)
선택된 p태그중에서 2번째있는 태그에 효과 및 활성화 디자인 넣어줌
<style>
/* 홀수 문단 */
p:nth-of-type(2n + 1) { /*모든홀수문단(2n+1)에 들어갈 스타일
if)특정구간은 단일 숫자로 표현*/
color: red;
}
/* 짝수 문단 */
p:nth-of-type(2n) { /* 모든짝수문단(2n)에 들어갈 스타일,*/
color: blue;
}
/* 첫 번째 문단 */
p:nth-of-type(1) { /* 첫번째 태그에 적용될 스타일*/
font-style: italic;
}
</style>
<body>
<div>
<div>여기는 카운트 세는 곳 아님!</div>
<p>첫 번째 p 태그</p>
<p>두 번째 p 태그</p>
<div>여기는 카운트 세는 곳 아님!</div>
<p>세 번째 p 태그</p>
</div>
</body>
span
span 안에 div 태그는 3개, p태그는 1개 ,i 태그는 1개 있다.
span은 태그가 only 1개 만 있는 곳만 디자인을 입혀준다.
<style>
span :only-of-type {
color: red;
}
</style>
<body>
<span>
<div>난 div 태그의 첫 번째야</div>
<p>난 유일한 p 태그야</p>
<div>난 div 태그의 두 번째야</div>
<div>
난 div 태그의 세 번째야
<i>난 유일한 i 태그야</i>
<em>난 em 태그의 첫 번째야</em>
<em>난 em 태그의 두 번째야</em>
</div>
</span>
</body>
205p skip
hover 연습
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="연습3.css">
</head>
<body>
<div class="next-box">
<a href="" class="next"> 다음페이지</a>
</div>
</body>
</html>
/* .next-box .next 에 :hover 추가해서
마우스를 올렸을 때 background-color를 파란색으로 바뀌게 해줍시다. */
.next-box .next:hover {
background-color: blue;
}
'1단계) 쌩초보 코딩 HTML,CSS' 카테고리의 다른 글
| 11.29 가상 선택자 정리 (0) | 2023.11.29 |
|---|---|
| 2023.11.27~28 총정리 (0) | 2023.11.28 |
| 2023.11.28 (2) | 2023.11.28 |
| 2023.11.27 복습 및 제작 (0) | 2023.11.27 |
| 보충학습 input 속성들 설명 (3) | 2023.11.26 |