[css] 속성 선택자 : attribute 정리

신입으로 들어와서 설문조사 페이지를 만들었다.

attribute 속성을 이용해서 css 꾸미기가 가능하다는 것을 또 새롭게 배웠다..

CSS 작업에 사용하면 유용한 attribute 속성
type="text" 가 무엇인지 알아보자!

html
  <input type="text">

input[type="text"], input[type="tel"], input[type="email"] {
  width: 100%;
  height: 4rem!important;
  padding: 0 1.2rem!important;
  border: 1px solid $color1;
  font-size: 1.5rem!important;
  color: #222!important;
  cursor: pointer;
 }

**input 선택자 중 type="text" '모든' 선택자들에게 css 부여

.input[type="text"] { 
    border: 2px solid #fff;
    color: #fff!important;
}

**input [type="text"] 사이 띄어쓰기는 '자손 선택자(>)'를 의미함

.input [type="text"] {
    margin: auto;
    background-color: #000;
    color: #fff!important;
}

그 밖에 input[type="checkbox"] + span,
input[type="checkbox"]:checked + span::after 등의 속성에도 지정 가능하다!

체크박스를 css로 만든 방법은 추후에 포스팅하도록^^

참고 사이트
https://www.w3schools.com/css/css_attribute_selectors.asp
https://wallel.com/css-속성-선택자-정리-css-attribute-selector/