HTML/CSS - 마우스 선택자 hover

바로 앞 포스팅에서 웹사이트 상단 로고와 메뉴바를 만들었는데, 이번엔 그것의 심화버전이다. 

이번에는 귀찮으니 다 텍스트로 하고, 좀 더 심화해 다룰 내용에 초점을 맞출 예정이다. 

 

보통 로고나 메뉴박스를 선택하면 어떠한 특정 링크로 연결이 되는데(메인 화면 등), <a>태그를 이용해서 링크연결을 하면 글자가 자동적으로 파란색에 밑줄이 그어져서 나온다. 

 

이것은 a태그에 파란글자, 언더바 초기화를 text-decoration:none이라는 속성으로 해주면 된다. 

 

그럼 이제 로고는 화면 왼쪽에, 메뉴박스는 오른쪽에 배치해 보자. 

 

여기까지 배치하는 방법은 앞 포스팅에서 다루었으므로 생략한다. 프로그래밍 한 것은 다음과 같다ㅎㅎ

 

그리고 html에서 semantic 태그를 잘 다루는 것이 중요한데, <header>는 로고와 주메뉴를 아우르고, 메인 메뉴는 꼭 <nav> 태그로 묶어주는 것이 좋다. 웹사이트 하단의 주소/저작권 정보는 <footer>태그로 묶어주는 것이 좋다. 

시각적으로 드러나는 차이가 없지만, div태그를 남발했다가는 혼쭐이 날것야..^^

 

메뉴박스에 마우스를 가져다 대면 색이 변하는 경우가 있다. 마우스 선택자 hover 속성을 이용한 것인데, 한번 해보자. 

나는 마우스를 메뉴에 갖다 대면 흰색 글씨에 파랑바탕으로 바뀌었으면 좋겠다. 

이렇게 해 보고 결과가 어떻게 나오는지 보자. nav li:hover a에서 <a>앞에 사이띄기를 한 것은 왜 일까?

→ 정답: <a>태그가 <li>, <nav>태그의 자식, 자손이라서

 

마우스를 메뉴에 가져다 대면 이렇게 잘 반영이 되었다. 

그런데 한 가지 아쉽다. hover가 <li>태그의 크기만큼 자리를 차지했으면 좋겠는데, 딱 <a>태그의 콘텐츠만큼의 크기만 가지고 있다. 

이것은 왜냐하면 <a>태그는 인라인태그로, 크기를 가질 수 없기 때문이다. 따라서 width, height를 반영해도 크기가 반영이 되지 않는다. 

 

이런 경우 인라인태그라는 <a>의 성격을 display 속성을 이용해서 바꾸어 줄 수 있다. 

nav li:hover a{display:block; width:100px; color:white; background:blue; border-radius: 20%}

 

display:block으로 해주면 a는 블록의 성격을 가지게 되고, 비로소 크기를 갖게 된다. 마우스를 대면 비로소 전체크기만큼파란색이 입히는 것을 볼 수 있다. 

 

display에 대해서는 다음 포스팅에서 더 알아보자!