- psuedo.html
<!DOCTYPE html>
<!-- html/basic_code_07_psuedo.html -->
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/src/basic_code_07_psuedo.css">
</head>
<body>
<h1><a href="./all_contents.html">웹 기초</a></h1>
<ul>
<li class="m_1">기본형</li>
<li class="m_2">마우스 올릴 경우(:hover)</li>
<li class="m_3">마우스 버튼 누를 경우(:active)</li>
<li class="m_4">내부요소의 앞에 기능 추가(:before)</li>
<li class="m_5">내부요소의 뒤에 기능 추가(:after)</li>
<li class="m_6"><a href="#">anker첨부되어 방문한 적이 있는 경우(a:visited)</a></li>
<li class="m_7"><input type="checkbox"> <span>체크시 처리(input:checked + span)</span></li>
<li class="m_8">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum natus autem reprehenderit deserunt quas! Illo fugit itaque perferendis laudantium
repudiandae modi molestias libero rem, maiores qui illum eaque quidem molestiae!<br />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias expedita omnis nisi fugiat dolore?
Minima magni sunt, ducimus voluptate dignissimos eaque, qui consequuntur temporibus,
pariatur debitis facilis velit optio aliquam.</li>
</ul>
</body>
</html>
-----------------------------------------------------------------------------------
- psuedo.css
@charset "UTF-8";
/* css/src/basic_code_07_psuedo.css */
ul, li { margin:0; padding:0; list-style:none; }
ul {
width:800px; height:auto;
margin:auto; padding:10px;
background-color: #ccf;
}
li {
width:100%; height:100%;
background-color: #fff;
margin-bottom:10px;
}
.m_1,
.m_2,
.m_3 { font-weight:900; color: #777; }
.m_2:hover,
.m_3:hover { color: #f07 }
.m_3:active { font-size:20px; color: #0cf; }
.m_4 { color: #5d9; }
.m_4:before,
.m_4::before { content:"내용에 앞에 추가 되었습니다. "; color: #f07; }
.m_4:hover:before,
.m_4:hover::before { color:#00a; }
.m_5 { color: #5d9; }
.m_5:after,
.m_5::after { content:"내용에 뒤에 추가 되었습니다. "; color: #f07; }
.m_5:hover:after,
.m_5:hover::after { color:#00a; }
.m_6 > a { color: #777; }
.m_6 > a:visited { color: #4fc; }
input:checked + span { font-size:20px; }
.m_8 { height:auto; }
.m_8::first-letter {
color: #05a; font-weight:900; font-size:2rem;
}
.m_8::first-line {
color: #fa9;
}
-----------------------------------------------------------------------------------
- 결과
- 개념 설명
:hover = 마우스 커서가 내용 위에 있으면 반응.
:active = 마우스 클릭했을 때 반응.
:before & :after = 내용 앞과 뒤에 추가하였을 때.
:visited = 방문한 적이 있는 링크를 의미.
input:checked + span = 내용 요소를 체크할 때.
'coding > html' 카테고리의 다른 글
| 0518 / margin,border,padding,outline.html & css 요소 작성 (0) | 2021.05.18 |
|---|---|
| 0517 / reset_and_common.css (0) | 2021.05.17 |
| 0517 / layout.html & css (header 영역 추가) (0) | 2021.05.17 |
| 0513 / layout.html (float속성 & clear속성) (0) | 2021.05.13 |
| 0512 / float.html (clearfix, clear:both 개념) (0) | 2021.05.13 |
