<!DOCTYPE html>
<html>
<head>
<title>가상엘리먼트(::)선택자-의사요소(pseudo-element)선택자</title>
<style>
/*
::선택자는 앞의 요소 및 뒤의 요소에 공백이 있으면 안 됨.
모두 붙여서 기술해야 한다.
p ::before (X), p:: before (X), p::before (O)
가상엘리먼트 요소는 드래그 불가
*/
/* span엘리먼트 안의 content(내용) 뒤에 추가 */
span::after {
content: " -Rem ember this";
color:red;
}
/* p엘리먼트 안의 content(내용) 앞에 추가 */
p::before {
content:"Read this -";
color: blue;
}
/* p엘리먼트 안의 첫번째 글자 선택 */
/* ::first-letter 선택자는 블록 요소에만 사용가능 */
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
</style>
</head>
<body>
<h1>의사 요소(pseudo-element)선택자</h1>
해당 HTML요소의 특정 부분만을 선택할 때 사용가능
<p>My name is Donald</p>
<span>My name is Donald</span>
<p>I live in Ducksburg</p>
<span>I live in Ducksburg</span>
</body>
</html>
가상클래스 선택자 가상엘리먼트 선택자
<!DOCTYPE html>
<html>
<head>
<title>가상클래스(:)선택자, 가상엘리먼트(::) 선택자</title>
<style>
/* 브라우저에 보여지는 첫 번째 줄 선택, 블록 요소에만 사용가능 */
p::first-line{background-color: yellow;}
/* p{background-color: yellow;} */
/* optional selector는 form컨트롤 요소(엘리먼트) 중
required(필수입력)속성이 없는 요소를 의미한다.
:optional 선택자는 익스플러로9버전 이하는 지원되지 않는다. */
input:optional {background-color: red;}
</style>
</head>
<body>
<h1>WWF의 임무 성명</h1>
<p>그렇다아아아아아아아아아ㅏ아아아아아ㅏ아아아아아아아아아아ㅏ아아아아아아ㅏㅇ
긴줄
첫번째
</p>
<h1>optional selector</h1>
<form>
이름: <input type="text" name="username" value="홍길동"><br>
비밀번호: <input type="password" name="usepwd" value="12345" required>
<button>전송</button>
</form>
</body>
</html>
