[HTML] input 클릭 시 테두리 색상 바꾸는 법 (focus 속성 활용)

---

💡 input 박스를 클릭했을 때 테두리 색을 바꾸고 싶다면?

웹페이지에서 input 박스를 클릭하거나 포커스될 때 테두리(border) 색상이 자동으로 바뀌지 않아서
직접 스타일을 지정해야 하는 경우가 많아요.
이 글에서는 CSS의 :focus 선택자를 활용해 클릭 시 테두리 색상 변경 방법을 알려드립니다.

---

🛠️ input 클릭 시 테두리 색상 변경: 코드 예제와 설명

✅ 기본 예제

<style>
  input {
    border: 2px solid #ccc; /* 기본 테두리 색 */
    padding: 8px;
    border-radius: 4px;
  }

  input:focus {
    border-color: blue; /* 클릭(포커스) 시 테두리 색 변경 */
    outline: none;      /* 기본 파란 아웃라인 제거 */
  }
</style>

<input type="text" placeholder="이름을 입력하세요">

---

🧩 포인트 설명

• input:focus 👉 클릭하거나 키보드로 선택됐을 때 적용
• outline: none; 👉 기본 포커스 효과(파란 테두리)를 제거
• border-color: 원하는 색; 👉 원하는 색상으로 변경 가능
• 색상 추천:
  • 파란색: blue
  • 연두색: limegreen
  • 빨간색(경고): red

---

⚡ 함께 알아두면 좋은 속성

속성	역할
border-color	테두리 색상 지정
outline	포커스 시 외곽선 표시 제거
border-radius	테두리 둥글게
transition	부드러운 색상 변화 적용

예: 부드러운 애니메이션 추가

input {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  transition: border-color 0.3s ease;
}

input:focus {
  border-color: blue;
  outline: none;
}

---

🏁 마무리 요약

문제 상황	해결 방법
클릭 시 테두리 색이 바뀌지 않는다	input:focus { border-color: 색; } 사용
기본 파란 테두리 제거하고 싶다	outline: none; 추가
색상 변경을 부드럽게 하고 싶다	transition 속성 활용

---

👉 다음 글 예고

[HTML] div 영역 안의 글자를 수직 가운데 정렬하는 법 (flex 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊