[CSS] 폰트어썸을 사용한 입력필드 만들어보기

 

See the Pen 입력필드 만들기(feat,폰트어썸) by limhaneul2244 (@limhaneul2244) on CodePen.

 

#1. 폰트어썸을 이용해 입력필드 디자인하기

 

input태그에 css 속성을 적용할때는 아래와 같이 적용하는 습관을 들이는 것이 좋다.

.item input[type=text],
.item input[type=email],
.item input[type=tel] {
    border:2px solid lightgray; 
    border-radius: 8px; 
    width: inherit; 
    height: 40px; 
    padding: 10px; 
    box-sizing: border-box; 
    padding-left: 45px;
  }

1번과 2번의 선택자 사용은 동일하다.

 .item input 과 동일하다.

단, input에 효과를 주거나 인접선택자를 활용해야 할 경우등 코드가 길어질 경우에는 

.item input으로 모든 input들을 공통으로 묶어 사용할 수 있다.

 

---

 

#2. input에 마우스 포커스 되었을 때 색깔 적용시키기 (가상클래스 :focus 적용)

 

:focus는 input태그에만 적용됨.

:focus 됨과 동시에 인접선택자 + 를 사용해서 폰트어썸 아이콘을 어떻게 변경시킬 것인지도 적용 가능.

(인접선택자는 선택한 바로 뒤의 선택자만 가능하다!)