이전 포스팅에서 HTML에서 드롭다운 메뉴의 기본적인 카테고리를 만드는 방법을 알아보았습니다.
이번 포스팅에서는 앞서 만든 HTML 소스를 CSS에서 스타일을 적용시켜
외형적인 드롭다운 모양을 갖추는 방법을 알아보겠습니다.
위와 같은 카테고리용 HTML 코드를 앞의 포스팅에서 작성해보았습니다.
CSS 창과 비교하면서 보면 이해가 쏙쏙 됩니다.
참고로 프로그램은 드림위버입니다.
HTML 창에서 <head></head> 사이에 다음 명령어를 입력해야
CSS 스타일 적용이 가능하다는 점 주의하세요.
1번 코드 -> 모든 태그의 마진과 패딩값을 초기화 시킵니다.
2번 코드 -> div id drop 값의 리스트 스타일(동그라미 표시)을 없애줍니다.
위와 같이 나옵니다.
박스의 배경색을 RGB값으로 입력
테두리 굵기는 1px, 실선(solid)의 색상은 흰색
넓이 100px, 높이 40px를 하였습니다.
line-height를 높이와 같은값(40px)으로 주면 글자가 세로에서 중앙정렬이 됩니다.
text-align: center; 은 글자를 가로에서 중앙정렬을 시킵니다.
float: left; 은 박스들을 세로 정렬에서 가로 정렬로 바꾸어 줍니다.
이런 모양이 나옵니다.
<a> 태그에서
text-decoraton: none; 은 글자의 밑줄을 없앱니다.
글자의 색상은 흰색으로 주었습니다.
display: block; 은 블락모양으로 화면상에 표시되게 만들어 줍니다.
만약 이 코드를 입력하지 않으면
박스 위에 마우스커서를 올렸을 시에는 손모양으로 변하지 않고
글자 위에 올렸을 때에만 변합니다.
이런 형태가 나오네요.
이제 전체적인 틀은 모두 갖추었습니다.
a:hover 태그로 마우스포인트가 닿았을 때 색깔이 변하도록 적용합니다.
a:hover 태그 적용 모습
평소에는 하위 메뉴를 보이지 않게 적용합니다.
하위메뉴가 사라지게 되죠.
이제 마우스포인트를 갖다댔을 시에 하위메뉴가 나오도록 적용해 봅시다.
drop안의 모든 ul li [ex) 홈, 일상, 여행, 컴퓨터]에 마우스커서를 올리면
그 아래에 있는 ul [ex)미국,캐나다,일본,홍콩]이 보이도록 해줍니다.
이제 마우스포인트를 올리면 하위메뉴가 나오게 됩니다.
마지막으로 하위 메뉴의 position을 absolute로
상위 메뉴인 ul li의 position을 relative로 적용합니다.
상위 메뉴의 위치를 하위 메뉴가 그 위치를 기준으로 (0, 0)위치를 잡습니다.
position 적용하지 않아도 당장에는 아무 변화가 없지만
위와 같이 상위메뉴의 위치를 이동시키면 바로 하위메뉴의 정렬이 틀어집니다.
상위 요소 따라서 이동한 다음에 그 위치를 기준으로
다시 정렬한다고 생각하면 쉬울 듯 합니다.
지금까지 드롭다운 메뉴를 만드는 방법이었습니다.
드롭다운 메뉴 하나만 만들어봐도 굉장히 많은 태그들을 이해하게 됩니다.
'컴퓨터 > HTML CSS' 카테고리의 다른 글
| HTML/CSS 드롭다운메뉴 이미지 추가하여 꾸미기 (0) | 2017.12.03 |
|---|---|
| 크롬에서 반응형 웹사이트 PC에서 모바일 화면으로 보는 방법 (0) | 2017.12.02 |
| HTML/CSS 드림위버 카테고리 작성하여 적용시키기 (0) | 2017.12.01 |
