기초코딩 - CSS의 기초 (Attribute Selectors에 대해서)

지난 글에 이어 CSS에 대해

알려드리도록 하겠습니다.

 

저번 글에서는

Combinators 중

자식 선택자

인접 형제 선택자

일반 형제 선택자

에 대해 알려드렸는데요.

 

만약 기억이 잘 나지 않으시거나

혹시 모르시는 분들은 

밑에 글을 참고해주세요.

tm-csc.tistory.com/1188

기초코딩 - CSS의 기초 (Combinators 에 대해) - 2편

 

이번 글에서는 

저번에 살짝 알려드린

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에 대해

알려드렸습니다.

 

여기까지 궁금하신 점은

댓글에 남겨주시고

공감과 구독도 부탁드립니다.