[CSS] input text type 생성, 테두리 제거, 클릭 시 테두리 제거

이번 글은 JSP Input 태그의 Text Type에 대해 3가지를 알아볼려 합니다.

 

프로젝트마다 틀리겠지만 진행하게 될 때

많이 쓰는 태그 중 하나인 input 태그는 다양한 type을 가지고 있습니다.

 

그 중 text type을 생성하는 방법과, 기본 테두리 제거 하는 방법

마지막으로 input 태그의 입력창을 클릭하게 되면 텍스트 커서가 이동하게 되는데

 

이때 테두리가 검게 되는 스타일이 나오게 됩니다.

이를 제거하는 방법을 알아보도록 하겠습니다.

 

 

---

전체 목록

 

• input text type 태그 생성
• input 태그 테두리 제거
• inupt 태그 클릭 시 테두리 제거

---

 

1. Input 태그 text type 생성하는 방법

 

css로 크기 좀 주기 위해서 클래스를 지정해주었고,

실제로 사용하실때는 type 만 text로 사용하시면 됩니다.

 

See the Pen [CSS] input text type 생성 by wpfhorez4 (@wpfhorez4) on CodePen.

 

 

 

2. input 태그 테두리 제거

 

기본 바탕색도 흰색이여서 input 테두리를 제거하니 안보여

기본 body에 색상을 주었습니다.

 

See the Pen [CSS] input text type 생성 by wpfhorez4 (@wpfhorez4) on CodePen.

 

 

 

3. input 태그 클릭 시 테두리 제거

 

See the Pen [CSS] input text type 클릭 시 테두리 제거 by wpfhorez4 (@wpfhorez4) on CodePen.