서브 메뉴 CSS 세팅 방식들

난 아직 잘 모르기 때문에

이렇게 길게 하여 정리를 하겠다. 뭐 따로 할 수 있는 방법이 있다고 하는데 나중에 차차 배우면서 나아가겠다.

맨 처음 세팅 할 때에는 이렇게 세로로 정렬된 상태로 있는다.

만약 logo 가 어디 갔냐고 물어 보면 header .logo 부분에서 display : none으로 변경 하여 안보이게 가려지게 된다. 마치 안드로이드 앱 visibility 가 invisible 로 생각하면 된다.

암튼 되돌아 와서 각각의 css 부분을 일일히 다 나누어서

이와 같이 나타내었다.

a 태그를 가지런히 정렬하고 주변 패딩을 늘리면

이와 같이 바뀌게 된다. 그 다음 밑줄을 없애기 위해

COMMON 부분의 a 태그를 새로 생성하고 text-decoration : none을 한다.

COMMON 으로 빼는 이유는 만드는 모든 a 태그에서 밑줄을 포함을 시키지 않을 것이기 때문이다.

자 이렇게 이것저것 조미료를 뿌리고 만들면

이런 방식으로 만들게 된다.

자 그러면 각각의 블록 처리와 구별을 해 보자