CSS와 JavaScript를 사용한 클릭 시 테두리 추가 및 제거 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자, JavaScript와 CSS 초보자, 대화형 요소 구현을 원하는 디자이너
핵심 요약
- HTML, CSS, JavaScript를 활용하여 클릭 이벤트에 반응하는 테두리 효과 구현
.highlight
클래스를 통해 테두리 추가/제거 처리 (``classList.add
`/
`classList.remove
``)- CSS transition 효과로 부드러운 테두리 변화 적용 (``
transition: border 0.3s
``)
섹션별 세부 요약
1. HTML 구조 설계
- ``
`` 요소를 클릭 이벤트 대상으로 지정
- ``
`` 요소를 테두리 적용 대상으로 설정
2. CSS 스타일링
.myDiv
클래스:
- 너비/높이: 100px
- 배경색: 노란색
- 테두리 반경: 50% (원형)
- ``transition: border 0.3s
`` 적용
.highlight
클래스:
- 테두리 추가: ``border: 5px solid blue
``
3. JavaScript 이벤트 처리
- ``
addEventListener("click")
``으로 클릭 이벤트 감지 - ``
classList.add("highlight")
``로 테두리 추가 - ``
setTimeout
`함수로 1초 후
`classList.remove("highlight")
`` 호출
결론
- 테두리 색상은
.highlight
클래스에서 자유롭게 수정 가능 - 테두리 지속 시간은 ``
setTimeout
``의 매개변수로 조절 가능 - 동일한 방식으로 다른 요소에도 적용 가능 (CSS 선택자 및 JavaScript 이벤트 대상 변경)