[CSS] input 태그 테두리, 색상으로만 디자인 해보기

이번 글은 input 만을 이용하여 여러 css를 입혀

input 태그만 디자인 해보겠습니다.

 

실제 디자인의 경우에는 input 태그만을 사용하지 않을 때도 많습니다.

특히 홈페이지 로그인 부분들에서 태그 앞에 id 이미지나pw 이미지를 많이 볼 수 있는데

이미지나 이런것은 넣지 않고 input 태그만에 css를 입혔습니다.

 

디자인은 여러 사이트들을 참조하였습니다.

 

 

---

전체 목록

 

• 로그인 예제에서 사용할 예정인 input 태그
• 다른 input 태그보단 매우 둥근 형태의 테두리
• 기본 테두리들을 모두 없애고 아래 테두리만 주어 심플함

---

1. 로그인 예제에서 사용할 예정인 input 태그

 

아이디 입력창과 비밀번호 입력창이 붙어 있고

테두리 크기만큼 위쪽으로 'margin' 을 주어 딱 붙어 있게

보이고 있다.

 

See the Pen [CSS] input 태그 입력창 꾸미기1 by wpfhorez4 (@wpfhorez4) on CodePen.

 

 

 

2. 다른 input 태그보단 매우 둥근 형태의 테두리가 눈에 띈다.

 

See the Pen [CSS] input 태그 입력창 꾸미기2 by wpfhorez4 (@wpfhorez4) on CodePen.

 

 

 

3. 기본 테두리들을 모두 없애고 아래 테두리만 주어 심플함을 나타낸다.

 

See the Pen [CSS] input 태그 입력창 꾸미기3 by wpfhorez4 (@wpfhorez4) on CodePen.