지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
States 중에서
Active, Hover, Focus
에 대해 알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (States에 대해서) - 1편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Attribute Selectors 에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. t
tm-csc.tistory.com
이번 글에서는
나머지 States에 대해
알려드리겠습니다.
그럼 VSC를 실행해주세요.
그리고 이렇게
Visited를 설명드리기 위해
div가 아닌 링크를
설정해주겠습니다.
<a href="https://naver.com"> 네이버 </a>
네이버라는 곳을 클릭하면
이동하게 말이죠.
크롬으로 확인해보면
이렇게 파란색으로
나오는 것을 확인할 수 있습니다.
그리고 클릭하게 되면
네이버로 이동하게 되죠.
그리고 CSS 스타일시트에
a:visited {
color: green;
}
해당 링크에
방문한다면
색상을 초록색으로
변경해줘
이렇게 적고 크롬으로
확인하게 되면
이렇게 방문 후에
파란색에서 초록색으로
변경된 것을 확인할 수 있습니다.
왜냐하면 방문했던 기록이
남아있고 그럴 경우
초록색으로 변경하라고
설정했기 때문이죠.
이것이 바로 Visted입니다.
그리고 마지막
Focus_within을
설명드리기 위해
코드를 변경하였습니다.
우선 form안에
input 상자를 4개
만들었고
form {
border: 2px solid blue;
display: flex;
flex-direction: column;
padding: 30px;
}
폼의 보더는
2px의 파란색 실선으로
설정하며 각각 상자가
세로로 나열되며
패딩 값은 30px이 되도록
설정할게
이렇게 적고 크롬으로
확인하면
이런 형태로
input상자가
나열된 것을 확인할 수 있죠.
form:focus-within {
border-color: green;
}
form 안쪽이 선택되면
보더의 색상이 초록색으로
변경해
라고 focus-within
활용하게 되면
이렇게 안쪽이 선택되었을 때
부모인 바깥쪽의 색상이
변하는 것을 확인할 수 있습니다.
이것이 바로
focus-within입니다.
여기까지 States에 대해
모두 알려드렸고
Hover, Active, Focus,
Visited, Focus-within
모두 섞어서 사용도 가능하니
잘 활용하여 다양한 스타일로
표현할 수 있습니다.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다
