🍁가상 클래스
가상 클래스의 특정 속성을 이용하여 컨트롤의 상황만을 콕 집어서 선택할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type=text]{
display:block;
margin-bottom: 3px;
border: 1px solid #555;
background-color: #FFF;
padding: 3px;
outline: none;
}
</style>
</head>
<body>
<div id="list">
<input type="text" value="required" required>
<input type="text" value="readonly" readonly>
<input type="text" value="disabled" disabled>
<input type="text" value="text">
</div>
<hr>
<input type="button" value="버튼">
</body>
</html>
디자인을 재정의해서 required, readonly, disabled의 생김새에 차이가 나지 않게 했다.
required, optional
input[type=text]:required {
background-color: gold
}
input[type=text]:optional {
background-color: gray;
}
required와 optional은 짝꿍이다.
입력이 필수값(required)인 경우와 optional인 경우를 골라내어 서식을 적용할 수 있다.
disabled, enabled
input[type=text]:disabled {
background-color: cornflowerblue;
}
input[type=text]:enabled {
background-color: #999;
}
disabled와 enabled는 짝꿍이다.
입력의 작동 상태에 따라서 구분하여 서식을 적용할 수 있다.
read-only(+disabled), read-write
input[type=text]:read-only {
background-color: orange;
}
input[type=text]:read-write {
background-color: #CCC;
}
read-only와 read-wrtite는 짝꿍이다.
read-only 속성을 지정하면 read-only 외에도 쓸 수 없는 disabled 속성까지 잡혀서 서식이 적용된다.
cursor
input[type=text]:read-only {
cursor: not-allowed;
}
input[type=text]:read-only:hover {
background-color: rgba(255, 0, 0, .3);
}
내용을 작성할 수 없는 read-only인 경우 cursor의 속성을 바꿀 수 있다.
이때 hover로 마우스를 올려두었을 때 색을 바꾸게 하면 더욱 명확하게 입력할 수 없다는 것을 알게 할 수 있다.
🍁체크박스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cb {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<div>
<input type="checkbox" class="cb">
<input type="checkbox" class="cb">
<input type="checkbox" class="cb">
</div>
</body>
</html>
체크박스, 라디오, 셀렉트는 CSS가 적용이 되지 않기로 유명한 컨트롤이다.
위 3개는 스타일을 건드리지 않고 있는 그대로 사용하는 경우가 많다.
실제로 코드에서 background-color 서식을 부여했지만 적용되지 않았다.
opacity
.cb {
opacity: 0.2;
}
.cb:checked {
opacity: 1;
width: 150px;
height: 150px;
}
opacity 값을 주어서 불투명도 값을 조절할 수 있다.
0으로 갈수록 투명하고 1로 갈수록 불투명하다.
checked 속성으로 체크된 체크박스만 골라서 동작되게 할 수 있다.
체크박스와 이미지의 연동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cat {
visibility: hidden;
}
#cb-cat:checked + #cat {
visibility: visible;
}
</style>
</head>
<body>
<div>
<input type="checkbox" id="cb-cat">
<img src="../asset/images/catty02.png" id="cat">
</div>
</body>
</html>
체크박스의 상태에 따라서 이미지를 컨트롤해 보도록 하자.
체크박스를 해제한 상태에서는 고양이가 보이지 않지만, 체크한 상태에서는 고양이가 보인다.
또는 평상시에는 고양이가 보이다가 체크를 했을 때 이미지의 크기를 키우는 등의 서식을 적용할 수도 있다.
만약 이미지의 position을 변경하고 싶다면 absolute보다는 relative를 사용하는 게 좋다.
제목만 눌러도 체크박스 선택
<label for="cb2">제목</label>
<input type="checkbox" id="cb2">
제목만 눌러도 체크박스를 체크하고 해제할 수 있다.
이 코드처럼 <details> 태그를 제목만 클릭해도 나타나거나 나타나지 않게 해 보자.
제목만 눌러도 <details> 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cb2 + div {
display: none;
}
#cb2:checked + div {
display: block;
}
</style>
</head>
<body>
<label for="cb2">제목</label>
<input type="checkbox" id="cb2">
<hr>
<details>
<summary>제목</summary>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero amet asperiores totam illum quia dolores, eos officiis commodi similique error corrupti provident consectetur sed nostrum vel accusantium eius sequi! Nihil?
Quia deserunt suscipit ipsa laborum ipsam optio fugiat. Beatae at nulla dolorum sunt ratione perferendis laboriosam animi illum id. Nesciunt sequi error iure facilis adipisci soluta obcaecati veniam iusto nam?
Vel illum delectus eveniet, accusamus nulla minus voluptatibus quia sapiente est repellat esse laboriosam dolores? Odit ex labore temporibus dolorum tempora atque placeat voluptas incidunt rem, reiciendis, ipsa eaque ut.</p>
</details>
</body>
</html>
visibilty를 hidden으로 하면 모습만 안 보이게 되지만, display를 none으로 하면 공간마저 사라지므로 display를 이용한다.
이제 '제목'을 클릭하기만 해도 내용물을 보이거나 안 보이게 할 수 있다.
최종적으로 디자인을 해서 만들어보도록 하자.
제목을 누르면 내용물 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#item {
border: 1px solid black;
}
#item #cb3 {
display: none;
}
#item label {
font-size: 1.5rem;
font-family: Arial;
font-variant: small-caps;
display: block;
padding: 10px;
background-color: cornflowerblue;
color: white;
cursor: pointer;
}
#item div {
padding: 15px;
border-top: 1px solid black;
display: none;
}
#item #cb3:checked ~ div {
display: block;
}
#item #cb3:checked ~ label {
background-color: tomato;
}
</style>
</head>
<body>
<div id="item">
<input type="checkbox" id="cb3">
<label for="cb3">Java</label>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sit velit labore eius, consectetur illo dolorem veritatis totam nihil doloremque magni est! Reiciendis deleniti consequatur perferendis, dolorem deserunt explicabo corrupti.
Explicabo neque blanditiis sunt aliquam dignissimos eum omnis accusamus quae ad nisi accusantium labore culpa quisquam, assumenda error consectetur, eligendi saepe nam at ut nulla. Obcaecati, ullam! Voluptatibus, soluta ipsum.
Tenetur libero vel autem sit sapiente hic vitae ea obcaecati animi, at nostrum tempora debitis cupiditate in fugit quisquam corrupti inventore? At, vitae consequatur temporibus commodi est excepturi minima error.
</div>
</div>
</body>
</html>
평소에는 제목만 보이지만, 제목을 클릭하면 내용물을 출력하는 코드이다.
