지난번에 이어 아래 소스로 드롭다운 메뉴바를 만들겠습니다. 버튼에 마우스를 올리면 아래로 메뉴가 촤르륵 뜨는 형태입니다.
■ HTML 소스
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <style type="text/css"></style> </head> <body> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </body> </html> |
■ 스타일 소스
※ 아래 소스를 복사해서 HTML 소스의 스타일 태그 안에 넣어주세요.
<style type="text/css">여기에 넣어주세요.</style>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } |
※ 여기서는 리스트를 사용하지 않았고, 전체를 감싸는 div 박스(.dropdown) 안에 버튼(.dropbtn)과 div(.dropdown-content)안의 a링크로 구성되어 있습니다.
※ .dropbtn
- background-color, colr, font-size, padding 등을 지정해줍니다.
- border는 없앴고, cursor: pointer; 속성을 주어 버튼에 마우스를 올렸을 때 a링크처럼 손가락 모양이 나오도록 해줍니다.
※ 앞선 세로 메뉴바 / 가로 메뉴바에서 한 것처럼 a요소와 마우스 오버시 효과 등을 지정해 줍니다.(간단히 줄일께요)
- display: block; → a링크 요소의 영역을 확장
- a요소에 color, text-decoration:none; , padding 지정
- a요소에 마우스를 올렸을 때, 배경 색상이 변하는 효과를 주었습니다.
※ .dropdown-content
- a요소들을 감싸고 있는 div 박스
- width, background-color 지정
- position: absolute; → 다음 요소가 오게 되면, 자리를 비우면서 떠 있는 상태. 기준좌표를 주지 않았기 때문에 현재위치에서 이동하지는 않음. 이때, 부모 div에 position: relative;를 주어, 부모 영역 내에서 자리할 수 있도록 함.
- display: none; → 화면에 보이지 않도록 가림. 마우스 오버시 display: block;으로 다시 화면에 보여줌.
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); → div 박스 주변에 그림자 효과를 줍니다.
(참고) box-shadow: 첫번째 두번째 세번째 네번째 rgba(R,G,B,투명도);
- 첫번째 : 수평 방향 그림자 길이. 양수값 : 오른쪽으로, 음수값 : 왼쪽으로 그림자가 생김.
- 두번째 : 수직 방향 그림자 길이. 양수값 : 박스 아래쪽으로, 음수값 : 박스 위에 그림자가 생김.
- 세번째 : 흐림의 반경(blur radius). 음수값 지정 안됨. 값이 클수록 그림자 끝이 흐려지고, 값이 0이면 선명한 그림자가 됨.
- 네번째 : 그림자의 확산 방향. 양수를 지정하면 그림자의 전방위로 확대, 음수 값을 지정하면 그림자 크기가 줄어듬.
- 다섯번째 : 그림자의 색상. rgba(R, G, B, 투명도)로 표시할 수 있음.
■ 결과화면
점점 우리가 알고 있던 웹사이트의 형태가 점점 갖춰지고 있네요^^