AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

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 이벤트 대상 변경)