[CSS] input

input

- type에 따라서 다양한 스타일을 가진다. ex) type=”password”

- input 요소를 css 적용하면 모든 input에 스타일을 적용되니까 class로 지정해줘야한다.

<input type="text" class="input--text" placeholder="Search GitHub">

 

/* 입력양식 */
.input--text{
  height: 34px;
  padding: 0 10px;
  border : 1px solid #ddd;
  border-radius:5px;
box-sizing:border-box;
outline:none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
  font-size:16px;
}

- box-sizing:border-box; height와 padding으로 요소가 점점 늘어나는 것을 막는다.
- outline:none; 테두리 사용하지 않겠다. 
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);  내부로 들어간 검정색 그림자 7.5%의 투명도 

#outline 

outline:none; 적용 전 후 

- input 요소 클릭하면 focus되었다는 의미로 테두리(outline)가 생긴다. (default)

- border보다 outline을 잘 안 쓰는 이유는 제어하기 어렵기 때문이다.

 

# inset 키워드

inset 키워드 적용 전 후 

- 상황. 그림자가 박스의 외부가 아닌 박스의 내부에 생기게 만들고 싶다.

- box-shadow 속성 맨 앞에 inset 키워드를 붙이면 그림자가 box의 안으로 들어간다.

 

 

---

 

 

.input--text:focus{ 
  border-color: #51a7e8;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075) ,
                    0 0 5px rgba(81,167,232,0.5);
}

 

- ⭐ : focus 가상 클래스 선택자
input 부분에 포커스 된 상태를 파란색으로 정의

- border-color: #51a7e8;
--> focus 상태에서는 #51a7e8 (파란색) 으로 변경
--> focus 빠져나가면 다시 원래 색을 돌아간다.

- inset 0 1px 2px rgba(0,0,0,0.075) ,
                    0 0 5px rgba(81,167,232,0.5);
-->  ,(쉼표)를 통해서 그림자를 다중으로 넣어 줄 수 있다.
--> 기존의 안쪽 그림자를 그대로 두고 바깥쪽 그림자까지 추가되는 형태

 

focus 가상 클래스 적용 전 후