[ CSS 레이아웃 ] 상세_menuBar

 

 

 

0. 만들어야 하는 menuBar체크 

 

 

 

 

# 통합 메인 파일에서 자리 잡아 놓은 div에서 작업

 

 

 

 

 

# 메인메뉴와 서브메뉴 작업

• ul> li에서 < a 태그 > 로 메인 메뉴 만들고
• ul> li> ul> li에서 < a 태그> 로 서브 메뉴 잡아준다.

 

 

 

---

 

 

 

 

 

 

1. 파일 하나 새로 만들어서 기본 틀 잡아주기

 

 

 

 

 

 

# 구조 잡고 내용 채우기 

 

 

 

---

 

 

 

 

# 높이랑 너비는 임의로 지정

• 본 파일에서 사이즈를%로 적용해놓아서 정확한 값 몰라서 일단 임의 값으로 지정 후 작업

 

 

 

 

 

 

 

---

 

 

 

 

 

2. 스타일 적용/해제 해주기

 

 

 

 

 

2-1 < ul 태그 > , < li 태그 > , < a 태그 > 기본 적용되어있는 속성 제거 및 위치 잡기

 

 

 

 

 

---

 

 

 

2. ul>li { float : left  } -  < list >들 순서대로 만들어주기

 

 

 

 

---

 

 

3. 서브메뉴들 숨겨주고 – 메인메뉴:hover;때 보여주도록 처리

 

 

 

---

 

 

 

4. 서브메뉴 선택하러 내려가면 없어지는 부분 수정

 

 

 

 

 

 

메뉴바 완성

 

 

---