1.과제 : 이렇게 로그인 페이지를 만들고 이메일 인풋박스를 클릭하면 위에 연결되어있는 이메일의 색상을 변경하는 것
시도해본 방법
<style>
input:focus:has(span) {
color: #38d5be;
}
</style>
<body>
<label>
<span><strong>이메일</strong></span>
<br>
<input type = "email" name = "email" required placeholder ="이메일을 입력해 주세요">
</label>
has가 기억이 나서 input에 span을 가지고 있는 input을 찾아서 색상변경을 생각했지만 저러면 span이 아닌 결국 input박스가 색상이 변경되어서실패. 그리고 has는 포함하는 구조에서 사용가능하지만 위에 코드는 input이 글자요소를 포함하고 있지 않기때문에 사용 불가능 수식 엉망임.
지피티의 살짝의 도움을 받아서 한 번 고쳐보았음. has는 부모자식처럼 포함관계에 사용가능 이라는 말을 듣고
<style>
.box:has(input:focus) {
color: #38d5be;
}
</style>
<label class = "box">
<span ><strong>이메일</strong></span>
<br>
<input type = "email" name = "email" required placeholder ="이메일을 입력해 주세요">
</label>
.box가 input을 포함하고 있고, 그 input이 포커스 된 상태일 때 .box의 텍스트 색상이 바뀌는 것!
하지만 원래 css는 위로 꾸미는 건 안됨. 하지만 has가 앞에 요소를 꾸밀 수 있게 해줌.
2. 이메일을 기억할까요? 체크박스가 클릭되면 "개인정보 ~ 주세요"의 글자가 나타나게 작성해라.
해결 단계
1. 우선 글자를 작성 <strong class ="show">개인정보 호보를 위해 개인용PC에서만 사용해 주세요.</strong>
2. css로 평소일땐 보이지 않게 만들어 놓음.
.show{ display:none;}
3. input의 checkbox가 선택이 되어있을때 나타나게 함.
.input:checked ~.show{
display : revert}
<style>
.show{
display:none;
}
input:checked ~.show{
display: revert;
}
</style>
<label>
<input type="checkbox" name="checkbox">이메일을 기억할까요 ?
<br>
<strong class ="show">개인정보 호보를 위해 개인용PC에서만 사용해 주세요.</strong>
</label>
css는 관계가 중요하니 관계를 잘 생각해서 코드를 작성하자 !
'FRONT-END > CSS' 카테고리의 다른 글
| [CSS] CSS 0918 6일 (filter, transform, border,flex) (0) | 2025.09.18 |
|---|---|
| 깨알 : box-sizing에 대해서 (0) | 2025.09.17 |
| [CSS] 0916 4일차(의사요소 ::,background,font,width,height,position,padding,margin) (2) | 2025.09.16 |
| [CSS] 0915 3일차 (선택자, hover 등등) (0) | 2025.09.15 |
