[수업노트](20.10.28)D+14 white-space/overflow/text-overflow:ellipsis

1. white-space: nowrap; 

 - 자동 줄바꿈 금지

 - 영역이 한정될 경우 텍스트가 영역외로 나가게 된다

---

2. overflow: hidden;

 - 영역외로 나간 텍스트를 숨기는 기능

---

3. overflow: scroll;
 - 스크롤을 생성하여 보여주게 한다

---

4. overflow: auto;
- 텍스트 길이가 영역외로 나가면 스크롤 생성/ 영역 내이면 스크롤바 작동하지 않음

---

* 영역내에서만 보이게 잘리고 말미에 ...표시

{ white-space: nowrap; 
overflow: hidden;
text-overflow:ellipsis }

---

5. 3차 메뉴 쉽게 구현하기

1. HTML 입력

nav.menu>ul>li*4>a[href="#"]{1차 메뉴 아이템 $}

+ul>li*4>a[href="#"]{2차 메뉴 아이템 $}

+ul>li*4>a[href="#"]{3차 메뉴 아이템 $}

2. body, ul, li, a 노멀라이즈

3. 노멀라이즈 후 바로 2차메뉴를 숨겨 1차 메뉴 만들듯이 만들어준다 div> ul ul {display:none;}

4. 1차 메뉴 중앙정렬

5. 1차메뉴 배경색,너비 최소화 (inline-block), 메뉴가장자리 여백 (padding), 모서리 둥글게(border-radius)

6. 1차 메뉴아이템 한줄 정렬(inline-block)

7. 1차 메뉴아이템 텍스트에 부모 너비에 맞춰 크기변경 및 padding값 적용시키기(block설정), 사방여백주기(padding)

8.  1차 메뉴아이템 커서 올리면 배경및 텍스트 색 변경 ul>li:hover>a 지정 후, 배경 및 글자색 변환

-1차 메뉴 끝

9. 1차 메뉴에 커서 올리면 2차 메뉴가 나와야 하므로  ul>li:hover>ul 지정 후,나타내기 (block설정)

10. 메뉴크기에 전체적으로 영향을 주지 않기 위해 2차메뉴에 div> ul ul{position:absolute;}지정

11. 2차 메뉴 포지셔닝 2차메뉴를 1차메뉴에 가두어준다 div > ul {position:relative;}

12. 2차 메뉴 포지셔닝 top:100; left:0;

13. 2차 메뉴 배경이 없기때문에 1차메뉴 배경색 속성을 후손선택자로 분리 마크업

14. 1차메뉴 자식선택자를 후손 선택자로 바꿔주어 여백과 호버효과를 적용받기

-2차 메뉴 끝

15. 1차 메뉴만 커서 올리면 2차 메뉴가 나오므로  1차메뉴 자식선택자를 후손 선택자로 바꿔주어 3차 메뉴 나타내기

16. 1차 메뉴 아이템만 가둘수있는 relative값이 지정되있으므로 후손선택자로 분리 마크업

17.  3차메뉴 포지셔닝. 계단식배열로 나타내주기 위해 div> ul ul ul{left:100; top:0;} 분리 마크업

18. 자동 줄바꿈을 금지시키면 잘리지 않고 나오기 때문에 텍스트에 white-space:nowrap;

19. 제일 우측 메뉴는 화면에서 3차 메뉴가 잘리기 때문에 좌측 마지막 메뉴아이템만 정렬 바꿔주기

     div>ul>li:last-child> ul ul{left:0; right:100%;}