Input 태그 테두리 없애보리깅~ (focus, outline)

오늘 개인 프로젝트를 진행하다가 input 태그의 테두리 부분을 없애는 부분에 대해서 한번 정리해두면 나중에 또 쓸일이 있을것 같아 정리해본당

 

우선 html css 를 조금 만져봤다면 border 속성을 이용해 웬만한 블록의 테두리들은 다 관리해 줄 수 있다.

 

 

 

 

이 상태에서 테두리를 없애보릴라믄 border:none 을 해주면 된다링

 

 

.writeInput{
    font-size:30px;
    padding: 20px;
    width: 70vw;
    border:none;
}

 

테두리를 없애는데 벌써 성공해 버렸지만 input 태그에 focus 가 되는 순간 바로 테두리가 생겨버린당 ㄷㄷ..

 

요때는 hover 와 마찬가지루

 

.writeInput{
    font-size:30px;
    padding: 20px;
    width: 70vw;
    border: none;
}
.writeInput:focus{
    outline:none;
}

 

클래스명 뒤에 :focus 를 해준상태의 스타일링을 해주면 되는데 border가 아니라 outline 속성을 이용해주면 되겠다. 

 

 

 

그럼 이렇게 테두리를 이쁘게 없애줄수 있겠다. 

 

아주 간단하지만 헷갈릴 수 있어 한번 정리해봤당.