본문 바로가기

Python_WEB/HTML

HTML5 - 190609 Basic Study 25(상태,링크,반응 선택)

반응형

1. 상태 선택자

:checked input:checked
:focus input:focus
:enabled input:enabled
:disabled input:disabled
:target input:target

 

2. 링크 선택자

:link a:lilnk
:visited a:visited

 

3. 반응 선택자

선택자:active div:active
선택자:hover div:hover

 

4. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 2일차</title>
<link href="css/ex03.css" rel="stylesheet">
</head>

<body>
<h2>상태 선택자, 링크 선택자, 반응 선택자</h2>
<p>:active :hover</p>
<p>:checked :focus :enabled :disabled :target</p>
<p>:link :visited</p>
<a href="#">링크 선택자</a><br>
<input type="text" enabled><br>
<input type="text" disabled><br>
<h3>문자 선택자</h3>
:first-letter :first-line
:after :before ::selection
<p>welcome tom y wor.dl happye new uyewe welcome tom y wor.dl happye new uyewewelcome tom y wor.dl happye new uyewewelcome tom y wor.dl happye new uyewewelco new uyewewelco new uyewewelco new uyewewelco new uyewewelco new uyewewelco new uyewewelcome tom y wor.dl happye new uyewe</p>
<p>무궁화 꽃이 피었습니다. 왜 피었을까요? 그런데말입니다 그런데말입니다그런데말입니다그런데말입니다그런데말입니다그런데말입니다그런데말입니다말입니다그런데말입니다말입니다그런데말입니다말입니다그런데말입니다말입니다그런데말입니다말입니다그런데말입니다그런데말입니다</p>
<input type="password">
<input type="text">
</body>
</html>

 

5. CSS Code

@charset "utf-8";
/* CSS Document */

/* 기본 링크상태 */
a:link{
	/* 글씨 색상 */
	color:black;
	/* 밑줄 제거 */
	text-decoration:none;
	}
/* 마우스 롤 오버 상태 */
a:hover{
	/* 밑줄 표현 */
	text-decoration:underline;
	}
/* 마우스 누르고 있는 상태 */
a:active{
	background:pink;
	}
/* 한번이상 클릭한 링크 상태 */
a:visited{
	color:red;
	}
/* 마우스로 텍스트를 드래그한 상태 */	
p::selection{
	background:red;
	color:white;
}
/* 첫번째 글자만 처리 */
p:first-letter{
	font-size:2em;
	color:blue;
	border:1px solid red;
}
/* 첫번째 라인만 처리(유동적) */
p:first-line{
	background:gold;
}
/* 태그 맨앞단에 집어넣기 */
p:before{
	content:'문단시작';
	color:red;
}
/* 태그 맨끝단에 집어넣기 */
p:after{
	content:'문단끝';
	color:red;
}
/* 텍스트 타입이 아닌 것에 속성 적용 */
input:not([type=text]){
	border:5px solid red;
}

 

6. HTML / CSS 파일

ex03.html
0.00MB
ex03.css
0.00MB

 

7. HTML 미리보기

< css 2일차 >

반응형

태그