[html&css] 메뉴 hover시 밑줄 트랜지션 a태그 display:block; after활용
메뉴 텍스트에 마우스를 over 했을 때 밑줄이 있길 바라는 작업지시서를 받았습니다. hover 밑줄 이펙트는 검색하면 어디에든 많이 나오긴 합니다. 찬찬히 둘러보면서 어느 위치에 어떤 속성을 줄지 찾고 적용해보는 것이 가장 어려운 것 같습니다. 카페 24 솔루션을 사용하기 때문에 기존의 소스에 수정을 가하느라 적절한 위치를 찾는데 오래 걸렸지만 이것을 최대한 간소화 해보니 복잡할것이 없었습니다. 작업 당시에는 a태그 안의 요소들의 크기로만 보이는 밑줄에 여기 저기 속성의 위치를 옮겨보며 허둥댔지만, 카페 24의 불필요한 div들을 간소화하다 보니 확실히 눈에 보이는 것이 있었습니다. 요컨대 복잡하게 div의 위치를 찾을 것이 아니라 밑줄의 가로 크기가 a 태그 안의 요소 크기보다 크거나 작게 정해진 만..
사각사각/html & css
2020. 6. 19. 18:08
공지사항