<!DOCTYPE html>
<html>
<head>
<title>가상클래스(:)선택자=동적 의사 클래스(dynamic pseudo-class)</title>
<style>
/* 아무것도 실행되지 않은 상태(초기 상태)
가상클래스 선택자는 태그를 타겟으로 하는 선택자 뒤에 기생하여 사용할 수 있다.
(단독사용불가)
반드시 해당 타겟 요소에 붙여서 기술해준다.*/
a:link {color: red; }
/* 해당 링크를 방문하고 난 후의 상태(방문기록에 남은 상태) */
a:visited {color: green;}
/* 마우스포인터가 위에 올려져만 있는 상태 */
a.highlight:hover {color: green;}
a:hover {color: yellow;}
a:hover {color: hotpink;}
/* 마우스를 누르고 있는 상태 */
a.highlight:active {color: gray;}
a:active {color: blue;}
input {
border: 3px solid #ffefd5;
width: 300px;
padding: 10px;
outline: none;
border-radius: 5px;
}
input:focus {
border: 3px solid #cd853f;
}
</style>
</head>
<body>
<h2>CSS Links</h2>
<p>
<b><a href="https://www.daum.net" target="_blank">DAUM으로 이동</a> </b>
</p>
<p>
<a class="highlight" href="https://www.naver.com" target="_blank">네이버로 이동</a>
</p>
<!-- (권장): hover속성은 :link와 :visited 속성 뒤에 와야 한다.
(권장): active속성은 :hover 속성 뒤에 와야 한다.
위의 규칙이 지켜지지 않을 경우 :active나 :hover속성이 적용 안될 수 있다.
(권장순서) :link -> :visited -> :hover -> :active -->
<br><br>
<h1>input요소의 스타일 설정</h1>
<form>
아래의 입력 양식을 마우스로 클릭해보세요!<br><br>
<div>
<input type="text" id="email" placeholder="마우스로 클릭해보세요!" />
</div>
<div>
<input type="text" id="name" placeholder="이름입니다." />
</div>
<input type="submit" value="전송">
<button type="submit">전송</button>
</form>
</body>
</html>
fghj
<!DOCTYPE html>
<html>
<head>
<title>
가상클래스 (:) 선택자-구조 의사 클래스(structural pseudo-class)
</title>
<style>
/* 가장 첫번째 p요소안의 모든 서체 색상 */
p:first-of-type {
color: blue;
}
/* 가장 마지막 p요소안의 후손 em요소들의 서체 색상 */
p:last-of-type em {
color: red;
}
/* 가장 첫번째 p요소 안의 모든 서체 색상 */
/* p:first-child{color:green;} 사용자제요망 */
/* p요소 중 끝에서 세 번째 em엘리먼트의 배경색 */
p:nth-last-of-type(3) em {
background: hotpink;
}
/* 2번째 p요소의 배경색 => nth-of-type(값) : 값은 1부터 시작한다. */
p:nth-of-type(2) {
background: red;
}
/* 홀수번째의 해당 요소의 배경색 */
span:nth-of-type(odd) {
background: green;
}
/* 짝수번째의 해당 요소의 배경색 */
span:nth-of-type(even) {
background: yellow;
}
/* 3의 배수에 해당되는 요소 선택 */
h1:nth-of-type(3n + 0) {
background: skyblue;
}
/* 3의 배수에 더하기 1을 한 것에 해당되는 요소의 배경색. n은 0부터 시작 */
h1:nth-of-type(3n + 1) {
background: gray;
}
</style>
</head>
<body>
<div>
<p>p1번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p2번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p3번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p4번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p><hr>
</div>
<div>
<p>p1번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p2번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p3번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p4번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p><hr>
</div>
<!-- p태그 4번, span태그 5번, h1태그 9번 반복 -->
<p>p1번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p2번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p3번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p4번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p><hr>
<p>p1번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p2번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p3번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p4번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p><hr>
<p>p1번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p2번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p3번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p4번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p><hr>
<p>p1번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p2번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p3번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p>
<p>p4번. I am a <em>strong</em> person. I am a <em>strong</em>person.</p><hr>
<span>span1번. I am a strong person.</span><br>
<span>span2번. I am a strong person.</span><br>
<span>span3번. I am a strong person.</span><br>
<span>span4번. I am a strong person.</span><br>
<span>span5번. I am a strong person.</span><hr>
<h1>h1 1번. I am a strong person. </h1>
<h1>h1 2번. I am a strong person. </h1>
<h1>h1 3번. I am a strong person. </h1>
<h1>h1 4번. I am a strong person. </h1>
<h1>h1 5번. I am a strong person. </h1>
<h1>h1 6번. I am a strong person. </h1>
<h1>h1 7번. I am a strong person. </h1>
<h1>h1 8번. I am a strong person. </h1>
<h1>h1 9번. I am a strong person. </h1><hr>
</body>
</html>
disabled readonly
<!DOCTYPE html>
<html>
<head>
<title>가상클래스(:)선택자-상태 의사 클래스(UI element states pseudo-class)</title>
<style>
/* 체크된 input요소를 선택 */
input:checked {height:50px; width: 50px;}
/* input요소에서 disabled(비활성화)속성을 가진 요소 */
input:disabled{background: red;}
/* input요소에서 disabled(비활성화)속성이 없는 요소 */
input:enabled{background: #ffff00;}
</style>
</head>
<body>
<form>
Fist name: <input type="text" name="first" value="Mickey"><br>
Last name: <input type="text" name="last" value="Mouse"><br>
Country: <input type="text" name="county" value="Disneyland" disabled><br>
<p>disabled: focus, submit, 편집 불가</p>
<input type="radio" value="male" name="gender"> Male <br>
<input type="radio" value="female" name="gender"> Female <br>
<input type="checkbox" value="vehicle" name="Bike"> I have a bike <br>
<input type="checkbox" value="vehicle" name="Car"> I have a car <br>
<!-- radio는 같은 name으로 묶어야 단일선택 가능해짐
checkbox는 다중이라 같은 name으로 묶어도 의미없음 -->
<input type="hidden" name="hid" value="감춘 값">
<input type="text" name="gen" value="감추지 않은 값" readonly>
<p>readonly: focus, submit은 되나 편집불가</p>
<input type="submit"><input type="reset">
</form>
</body>
</html>
;;
<!DOCTYPE html>
<html>
<head>
<title>가상클래스(:) 선택자- 기타 선택자</title>
<style>
/* * {color: #000;} ->link설정된 파란색도 검정으로 변경 */
/* p {color : #000000;} ->기본값
선택한 엘리먼트가 아닌 모든 요소들의 글자 색상 */
body > :not(p) {
color: #ff0000;
border: 1px solid #000;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<h1>This is a heading</h1>
<div>This is some text in a div element.</div>
<a href="https://www.naver.com" target="_blank">Link to Naver</a>
</body>
</html>
