Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 판화
- 문자열 자르기
- Transform
- HTML
- 자바스크립트
- 레이아웃
- 반응형
- flex
- 제이쿼리
- MARGIN
- 웹
- IT
- 메소드
- Photoshop
- 사이드바
- Poster
- BNX사이트
- 드롭다운메뉴
- CSS
- sideproject
- 클리핑마스크
- position
- web
- CLIPING MASK
- PHP
- jQuery
- JavaScript
- steak
- float
- 플렉스
Archives
- Today
- Total
코딩 슬라임 공방
상단메뉴바,사이드메뉴바,컨텐츠박스 본문
하위메뉴 표시 조심
하위 메뉴 표시 때문에 박스 크기가 바뀌어서 약간의 빈틈이 생긴다.
1차에서 2차메뉴 사이의 빈틈은 ul과 li태그가 기본적으로 block과 같은 display크기를 가지고 있어서
사이드 메뉴 바가 적당한 width를 가지고 있지 않으면 추가되는
[+][-]때문에 박스 사이즈가 달라지기 때문에 틈이 벌어 질 수 있다.
2차,3차 메뉴박스가 최소한의 길이를 가져야한다는 조건하에서
2차,3차 메뉴들은 박스에 사이즈를 주지 않으면 메뉴 텍스트들이 자동 줄바꿈이 되어버려서 세로줄이 되어버린다.
세로줄이 되어버리는 이유는 position:absolute를 주었기 때문에 너비가 최소화 되려고 한다.
해결 방법은 박스에 사이즈를 강제로 부여하거나 메뉴 텍스트에 white-space:nowrap 를 넣어서 줄바꿈을 금지시켜서 한줄로 표시되게 해야한다.
'HTML_CSS_JAVA SCRIPT 수업' 카테고리의 다른 글
CSS-Transform 속성값 정리 (0) | 2020.04.30 |
---|---|
3D큐브 만들기, 3D 슬라이드 (0) | 2020.04.29 |
옆에서 나오는 사이드 메뉴 만들기(연습) (1) | 2020.04.27 |
가상요소 선택자 (0) | 2020.04.27 |
배경이미지 고정, ProgressBar 만들기 (0) | 2020.04.25 |
Comments