HTML- 12강 :hover (마우스오버시 효과)

2023. 8. 3. 01:37·HTML
728x90
반응형
SMALL
🟰hover(마우스가 해당 요소 위를 지나갈때)


☀️hover효과를 통해 마우스가 해당 요소를 지나갈 때 강조 효과를 줄 수 있다.
☀️background-color, color-font, visibility 등 다양한 요소를 활용하여 강조효과를 줄 수 있다.
☀️transition-duration으로 해당 효과가 보여지는 시간을 지정할 수 있다.

다양한 효과를 주석과 함께 적어놨으니 직접 보면서 알아보자!





hover를 통해 드랍메뉴 또한 구현할 수 있다.
드랍메뉴는 다음 강의에 올리도록 하겠다!




728x90
반응형
SMALL

'HTML' 카테고리의 다른 글

HTML14강 드랍메뉴 만들기(HTML코드 첨부)  (0) 2023.08.06
HTML13강 - position 속성  (0) 2023.08.04
HTML11강 - flex요소 (세로가 아닌 가로로배치하기)  (0) 2023.08.02
HTML 10강 - border(테두리 설정)  (0) 2023.08.01
HTML 9강 - 선택자(tag,id,class,자손선택자 등) (예시 포함)  (0) 2023.07.31
'HTML' 카테고리의 다른 글
  • HTML14강 드랍메뉴 만들기(HTML코드 첨부)
  • HTML13강 - position 속성
  • HTML11강 - flex요소 (세로가 아닌 가로로배치하기)
  • HTML 10강 - border(테두리 설정)
공부하고 기억하는 공간
공부하고 기억하는 공간
IT 비전공자로 시작하여 훌륭한 개발자가 되기 위해 공부하고 있는 공간입니다. 틀린 내용이나 부족한 부분이 있으면 댓글로 알려주세요 바로 수정하겠습니다.
    250x250
  • 공부하고 기억하는 공간
    IT - railroad
    공부하고 기억하는 공간
  • 전체
    오늘
    어제
    • 분류 전체보기 (325)
      • 면접 준비 (22)
        • OS (6)
        • Spring Security (0)
        • Java (3)
        • DB (11)
        • Network (3)
      • ElasticSearch (2)
      • Kafka (4)
      • Spring (22)
        • Spring Cloud (7)
        • Security6 (5)
        • JPA (12)
        • 프로젝트 리팩토링 회고록 (4)
        • Logging (8)
        • Batch (2)
      • Redis (17)
        • Redis 개념 (8)
        • Redis 채팅 (5)
        • Redis 읽기쓰기 전략 (1)
      • AWS (11)
      • 리눅스 (29)
        • 리눅스 마스터 2급 (5)
        • 네트워크(기초) (7)
        • 리눅스의 이해 (6)
        • 리눅스의 설치 (2)
        • 리눅스 운영 및 관리 (6)
      • JAVA-기초 (16)
        • JAVA기본 (11)
        • Design Pattern (5)
      • JSP (27)
        • JSP 기본 개념 (10)
        • JSP (1)
      • SQL (1)
      • TIL (36)
      • 문제 풀이 (2)
        • Programmers (9)
        • 백준 문제풀이 (28)
      • JavaScript (10)
      • HTML (17)
      • Ngrinder (1)
        • Ngrinder 문서 정리 (1)
  • 블로그 메뉴

    • 링크

    • 공지사항

    • 인기 글

    • 태그

      Spring
      리눅스마스터2급
      자바 알고리즘
      redis 채팅
      springsecurity
      jsp request
      redis
      백준
      Til
      자바 면접
      자바스크립트
      자바기초
      Springframework
      리눅스
      HTML
      Spring Data Redis
      JSP
      프로그래머스
      spring redis
      스프링프레임워크
      java
      리눅스마스터2급정리
      JavaScript
      CSS
      자바 반복문
      자바
      JS
      자바 면접질문
      레디스
      jsp기초
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.3
    공부하고 기억하는 공간
    HTML- 12강 :hover (마우스오버시 효과)

    개인정보

    • 티스토리 홈
    • 포럼
    • 로그인
    상단으로

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.