[CSS] 네이버 카테고리 예제: 마우스오버, 클릭시 효과 넣어주기

[네이버와 동일한 카테고리 부분] 만들기

 

html 구조로 틀을 만들고,

style에 css를 입혀준다.

 

1. 뼈대 만들기:

 

초록색: span 태그 이용

하얀색: span 태그 이용, div로 묶어주기

 

*span에는 초록색 입혀야하고,

밑에는 또 테두리선 입혀야해서 서로 분리시킴.

 

 

 

h1+h2   

 

h1 뒤의 h2를 초록색으로 칠해주겠다.

 

▶ Naver가 초록색됨.

 

선택자에서 ~와 +는 그 다음걸 적용한다는 뜻!

(뎁스가 동일한지 여부를 잘 살펴볼 것!) 

h1~span:

h1 뒤에 있는 span태그에 전부 초록색을 입히겠다.

 

.box{

}

span 태그에 class 연산자 붙여서,

테두리 만들어줌.

▶ border: 3px solid black;

 

**

hover: 마우스 오버시

인터랙션

 

*마우스 오버: (마우스를 올려놓기만 하는 것)

 

active: 마우스를 클릭시

인터랙션 (보이는 반응)

 

▶ 왼쪽 : 갖다대면 빨간색으로 글씨 바뀜

오른쪽 : 클릭하면 파란색으로 글씨 바뀜 + 배경색 변경

 

hover에 color 적용만 하면 끝!

active에는 color 밑 background 지정까지 해주기!

 

▶ 마우스를 갖다대거나,

클릭하면 인터랙션 발생!!