2024. 4. 21. 11:50ㆍ· FRONT-END/└ CSS
환경 : Visual Studio Code
[ 해당 실습에서 사용한 메뉴바 body 코드 ]
<body>
<ul class="menu">
<li>
<a href="#">데이터 관리</a>
<ul>
<li><a href="#">포켓몬스터</a></li>
<li><a href="#">사원정보</a></li>
<li><a href="#">메뉴정보</a></li>
<li><a href="#">학생성적</a></li>
</ul>
</li>
<li><a href="#">자유게시판</a></li>
<li class="menu-end">
<a href="#">관리자메뉴</a>
<ul>
<li><a href="#">회원관리</a></li>
<li><a href="#">충전상품관리</a></li>
<li>
<a href="#">통계</a>
<ul>
<li><a href="#">포켓몬통계</a></li>
<li><a href="#">사원통계</a></li>
<li><a href="#">메뉴통계</a></li>
<li><a href="#">회원통계</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">로그인</a>
<ul>
<li><a href="#">회원가입</a></li>
</ul>
</li>
<li>
<a href="#">??? 님</a>
<ul>
<li><a href="#">마이페이지</a></li>
<li><a href="#">포인트충전</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
</li>
</ul>
</body>
</html>
(+) Menu : 계층형 구조(tree 구조)이다.
계층형 구조를 표현하기에 가장 적합한 태그는 <list> 태그 이다.
└ <ul>은 순서가 없는 리스트 태그이다 (unorder list)
└ <ol>은 순서가 있는 리스트 태그이다 (order list)
[ 스타일을 추가하여 메뉴바 형태를 구현 해보자 ]
- 스타일이 아무것도 없는 초기 화면 형태
- <ul>, <ol> 태그를 부여한대로 출력된다.
- 단, 우리가 원하지도 않은(지정하지도 않은) 마진과 패딩이 자동으로 들어가 있음. -> 초기화 필수
- 디자인 초기화
(+) 이렇게 menu 클래스에 대한 기본 여백을 제거하게 되면, 하위 list 태그들에 대한 여백이 제거되지 않음
└ menu 클래스의 모든 ul에 대한 여백을 제거해 줘야 됨
(+) menu 클래스와 menu 클래스의 모든 ul 태그에 대한 기본 여백 및 list 표기 모양을 제거하는 식
(+) 모든 계층의 공백이 전부 제거되었다는 것을 확인 가능
(+) 계층형인 것이 화면에 보이지 않아도 괜찮음! 이미 코드로 지정해준 것이 화면에 나타나지 않을 뿐임! (문제될 것 없음)
- (추가) a태그 모양 변경 + 크기 설정이 가능하도록 inline-block으로 변경
(+) 글자 색상은 외부의 스타일 태그를 따라가도록 설정
(+) a 태그의 밑줄을 제고
(+) 화면의 보여지는 형태와 크기를 바꾸기 위하여 display 속성을 inline-block 으로 변경
- 메뉴들을 가로로 배치해보자
메뉴바를 가로로 만들기 위해선 우리가 준 메뉴의 계층 형태를 이해해야 한다. (아래 그림 참고)
- 1차 메뉴를 가로로 정렬
1차 메뉴들이 함께 일렬로 가로 배치돼야된다.
(+) menu 클래스 바로 아래 있는 li 태그들에게 inline-block 속성을 적용한다.
- 1차 메뉴들끼리 연관 배치가 되어야 함
(+)파란색끼리만 연관 배치.
(+) menu 클래스의 li의 position을 relative로 두고, 그 li태그 아래 ul태그들에게 absolute 속성을 부여한다.
즉, li끼리는 연관 배치, ul은 절대 배치를 사용한다.
- 메뉴의 글자 크기 및 폭 지정
- 2차 이상의 메뉴를 숨김 처리 후, 마우스를 올렸을 경우에 보여지도록 처리
(+) 위 결과 화면에서의 문제점 :
하위 메뉴가 살짝 우측으로 치우쳐져서 나온다.
→ position을 지정해주지 않았기 때문
- 문제점 해결
이렇게 하면 모든 구현이 어느정도 완성 되었다.
그런데, 메뉴의 이름이 길어지지게 되면 하나의 메뉴 칸이 늘어나는 현상이 발생한다. (메뉴 칸이 늘어나선 안 됨.)
따라서 말줄임표 처리를 해줘야 된다.
(+) menu 클래스 아래 모든 a태그에 적용
(+) 글자가 많아지면 보이지 않고, 말줄임표 처리하도록 적용
- (추가) 연관배치가 되어있는 메뉴들 중, 한 가지 메뉴만 오른쪽에 위치시키기
└ position을 변경
(+) 오른쪽 상단에 위치시키고 싶은 메뉴에 클래스를 부여하여 처리 (menu-end)
(+) position이 absolute라면 기준이되는 기준 영역을 추가적으로 지정해주어야만 한다.
→ 전체 메뉴 클래스인 .menu에 position을 relative로 설정
→ 만약 fixed로 설정하면, 페이지 내에서 스크롤을 내려도 계속 상단에 고정되어 있게 되는 효과를 줄 수 있다.
→ relative 혹은 fixed 중 원하는 속성을 부여해주면 된다
그런데, 이렇게 해주면 또 문제가 발생할 수 있다.
이전에 3차 이상의 메뉴가 오른쪽으로 나오게끔 설정해주었기 때문에, 만약 3차 이상의 메뉴가 있는 경우 화면에서 보여지지 않는다.
→ 따라서 클래스 명이 menu-end가 붙은 태그들은 3차 이상의 메뉴가 왼쪽에서 보이게끔 해줘야 한다.
(+) 원래 지정해준 left의 값을 제거해준 후 right의 값을 부여해야한다.
→ left의 값을 auto로 설정해야 한다. (none, 0 둘 다 안 됨!!)
메뉴바 구현 끝!
개인 공부 기록용입니다:)
'· FRONT-END > └ CSS' 카테고리의 다른 글
[ CSS ] display 속성의 요소들 이해 (block, inline, inline-block) (1) | 2024.04.28 |
---|---|
[ CSS / HTML ] 배치 디자인 (inline-block, floating) (0) | 2024.04.23 |
[ CSS / HTML ] checkbox 활용한 디자인 (1) | 2024.04.20 |
[ CSS / HTML ] 텍스트 디자인 설정 (0) | 2024.04.19 |
[ CSS / HTML ] 아이콘 디자인 (0) | 2024.04.18 |