CSS3 transform translate 트랜스폼 위치값을 활용한 스플릿 메뉴 만들기
수업 시간에 이미지를 활용해서 스플릿 이미지 메뉴 만드는 방법에 대해 배웠습니다. 이 메뉴 구현의 최대 단점은 이미지를 써야 한다는 것이죠. 꼭 이미지를 써야 할까요? 아닙니다. CSS3 스타일로도 얼마든지 구현이 가능합니다. 이미지 없이 태그 요소만으로도 스플릿 메뉴를 만들 수 있습니다. See the Pen CSS3 : Split Menu by rgy0409 (@rgy0409) on CodePen. 먼저 완성된 nav 메뉴 형태를 살펴보시기 바랍니다. 저 메뉴 위에 마우스를 올려다 놓으면 새로운 메뉴2가 위로 올라오는것을 확인하실 수 있습니다. 그러면 HTML 부터 살펴보시겠습니다. MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 MENU1 MENU2 구조는 간단합니다. 다만 li 태..