지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
Combinators 중
자식 선택자
인접 형제 선택자
일반 형제 선택자
에 대해 알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (Combinators 에 대해) - 2편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Combinators 중 자손 선택자 descendant Selector 에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은
tm-csc.tistory.com
이번 글에서는
저번에 살짝 알려드린
pseudo Selectors의 심화과정
Attribute Selectors에 대해
알려드리겠습니다.
일단
pseudo Selectors 종류만 봐도
어떤 것을 써야 하는지
모를 정도로 상당히 많습니다.
일단 전에 사용해봤던
first-child도 있고
nth-last-child라는 것도
보입니다.
그럼 일단 VSC를
실행해주세요.
그리고 이렇게
아이디와 패스워드를
입력해줄 수 있는 FORM을
만들어 줄게요.
<div>
<form>
<input type="text" placeholder="ID">
<input type="text" required placeholder="password">
</form>
</div>
text를 적을 수 있는 타입의
ID와 password라는 말이
미리 적혀있는 창을 만들어
이렇게 적고 크롬으로 확인하면
이렇게 창을 만들 수 있죠.
그리고 required를 적은 것을
확인할 수 있는데요.
이를 활용하여
input:required {
border: 1px solid red;
}
required태그가
들어간 상자의 보더를
1px 빨간색 실선으로
변경해줘
이렇게 적음으로써
이렇게 원하는 Input만의
색상을 변경할 수 있습니다.
또 Attribute Selectors를
활용하여 어떤 것이든
선택할 수도 있습니다.
input [type="password"]{
background-color: cadetblue;
}
타입이 패스워드인 input의
배경색을 cadetblue로 변경해줘
크롬으로 확인하면
이렇게 변경되는 것이죠.
하지만 이렇게 한 가지가 아닌
여러 가지를 선택할 수도 있죠.
이렇게 input상자가
더 많이 생기고
placeholder의 명칭도
다 다르지만
name이라는 공통단어가
들어갔기에
input [placeholder~="name"]{
background-color: yellowgreen;
}
~="name"을 활용하여
name이 들어간 전부의
스타일은 변경할 수 있습니다.
바로 이렇게 말이죠
하지만 주의하실 점은
*= "hello" 적게 되면
ㄱㄴㄷㄹㅁㅂㅅhelloㅇㅈㅊㅋㅌㅍㅎ
라고 줘도 선택되지만
~= "hello"라고 적게 되면
앞뒤에 공백이 있는 상태에서
hello 인 경우만 선택됩니다.
꼭 기억해주시고요.
이렇게 CSS를 활용하여
굳이 HTML에 CLASS 또는
ID를 주지 않고 오히려
더 많은 태그를 선택하는
Attribute Selectors에 대해
알려드렸습니다.
여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
