반응형
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 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190609 Basic Study 27(위치 속성) (0) | 2019.06.09 |
|---|---|
| HTML5 - 190609 Basic Study 26(:taget 활용하기) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 24(CSS 속성 선택자) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 23(CSS 상속) (0) | 2019.06.09 |
| HTML5 - 190608 Basic Study 22(Note) (0) | 2019.06.08 |
