상태선택자
상태선택자는 입력양식 태그의 상태를 지정할 때 사용하는 선택자.
[기본형]
- 선택자 : checked
: 체크박스에 체크가 된 상태의 input 태그를 선택함.
- 선택자 : focus ★
: 초점이 맞춰진 input 태그를 선택함.
- 선택자 : enabled
: 입력 또는 사용이 가능한 상태의 input 태그를 선택함.
- 선택자 : disabled
: 입력 또는 사용이 불가능한 상태의 input 태그를 선택함.
<!-- 입력이 가능한 상태 -->
<h2>enabled</h2>
<p><input type="text" /> </p>
<!-- input : inline속성 -->
<!-- 입력이 불가능한 상태 -->
<h2>disabled</h2>
<p><input type="text" disabled /> </p>
<!-- 체크박스 -->
<h2>check box</h2>
<p><input type="checkbox" />체크 </p>/* css */
/* 입력이 가능한 상태의 input태그 */
input:enabled{
background-color: bisque;
border: 1px dotted darkgreen;
border-radius: 10px;
color: blueviolet;
padding: 4px 10px;
outline: none;
}
/* 입력양식이 포커스 상태(입력하려고 활성화된 상태) */
input:focus{
background-color: azure;
color: darkgrey;
}
/* 입력이 불가능한 상태의 input태그 */
input:disabled{
border: 1px solid #000;
background-color: gray;
}
/* */
input:checked{
width: 100px;
height: 100px;;
}
입력 양식에 포커스가 됐을 때
체크박스에 체크했을 때
시작 문자 선택자
시작문자 선택자는 태그 내부의 첫 글자나 첫 줄을 선택할 때 사용하는 선택자.
[기본형]
- ::first-letter
: 태그 내부의 첫 글자를 선택함.
- ::first-line
: 태그 내부의 첫 줄을 선택함.
<!-- css -->
<style>
/* p태그의 첫 번째 글자 선택 */
p::first-letter{
font-size: 28px;
font-weight: bold;
color: salmon;
}
p::first-line{
background-color: azure;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium nisi suscipit neque quisquam soluta mollitia nam a iste impedit ipsa? Veniam, provident? Iusto, consequuntur cupiditate. Sint dolorem dolore optio animi.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat ipsam, veniam officia unde, eum ut magni ad temporibus earum animi sequi assumenda ipsa molestias accusamus necessitatibus nam sunt tempora id.</p>
</body>
★★★ 가상 요소 선택자
선택한 태그에 앞이나 뒤에 가상 요소를 만드는 선택자.
html 코드에는 존재하지 않지만 html구조에 가상 요소를 만들어서 스타일을 부여하는 역할.
마치 html코드가 있는 것처럼 스타일링할 때 사용함.
가상 요소 선택자로 만들어진 요소는 기본적으로 inline속성을 가짐.
가상 요소를 만들 때 content속성을 이용함.
[기본형]
- ::before
: 특정 요소의 앞에 가상 요소를 만들고 내용은 content속성으로 넣음.
- ::after
: 특정 요소의 뒤에 가상 요소를 만들고 내용은 content속성으로 넣음.
<!-- css -->
<style>
p::before{
content: 'round';
display: block;
width: 150px;
height: 150px;
background-color: salmon;
border-radius: 100%;
/* text-indent: 50px ; */
/* text-indent : 글자만 이동 */
font-size: 0; /* content 글자 숨김*/
}
p::after{
content: 'line';
display: block;
width: 100%;
height: 2px;
background-color: lightblue;
font-size: 0; /* content 글자 숨김*/
margin: 20px 0px;
}
span::before{
content: '스판태그 앞';
color: darkorange;
background-color: lightpink;
}
span::after{
content: '스판태그 뒤';
background-color: bisque;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, amet <span>consectetur adipisicing</span> elit. Provident nesciunt error id explicabo. Obcaecati necessitatibus earum est harum quidem. Praesentium repellendus sunt libero, autem labore alias cumque tenetur fuga reprehenderit?</p>
</body>
상태 선택자와 동위 선택자 활용 예시
<title>상태 선택자와 동위 선택자의 활용</title>
<!-- css -->
<style>
div{
background-color: blanchedalmond;
padding: 20px;
width: 650px;
height: 200px;
box-sizing: border-box;
/* overflow: hidden; */
}
input[type="checkbox"]:checked + div{
display: none;
/* visibility: hidden; */
/* height: 0px; overflow:hidden 이용할 때*/
}
</style>
</head>
<body>
<!--
input태그의 type속성값이 checkbox인 요소를 선택하여 체크박스가 체크되었을 때
바로 위에 위치하는 div태그를 나타내거나 숨김
- 속성선택자
- 상태선택자
- 동위선택자
-->
<input type="checkbox" />
<div>
<h3>제목입니다.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolor quasi iure, recusandae cum repellat nobis dolore voluptatibus impedit assumenda
molestias odit totam reprehenderit modi animi, deserunt ea. Itaque, odio ea.</p>
</div>
</body>
체크박스 체크했을 경우
웹디자인 스케치