$$config title: day3,web2 keywords: - 2차 메뉴 만들기 - 텍스트 생략 css 속성 $$ # 메모 - 2줄 이상 나타내고 생략하기 ```html

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate veniam cum, corrupti praesentium sit, atque ad optio inventore omnis quod nostrum amet eveniet? Assumenda labore accusamus soluta adipisci, aliquam veniam?

``` ```css div { width: 400px; padding: 5px; /* padding 값을 많이 주면 설정한 행 이상이 보이게 됨!(2줄 설정이지만 공간이 넓어지면서 3줄이 보이게 됨) */ border: 5px solid black; overflow: hidden; /* 박스 너비를 넘치는 텍스트 숨기기 */ text-overflow: ellipsis; /* 생략 표시 '...' */ word-break: break-all; /* 영어는 단어 단위로 줄바꿈이 되어서 알파벳 단위로 줄바꿈이 되도록 해줌 */ /* white-space: nowrap; 은 한 줄로 나타나게 됨 */ display: -webkit-box; /* webkit는 Chrome, Safari 브라우저에서만 사용 가능 */ -webkit-line-clamp: 2; /* 박스에 나타낼 행 개수 * 전제조건: display: -webkit-box; -webkit-box-orient: vertical; */ -webkit-box-orient: vertical; /* 박스의 흐름 방향을 지정 */ } ``` # 2차 메뉴 ```html ``` - ul > li > a 는 불변의 패턴이다. - ul은 ul을 자식으로 둘 수 없다. - a는 대부분의 경우 오직 텍스트만 가질 수 있다. - li는 li를 자식으로 둘 수 없다. - ul의 자식은 무조건 li 여야 한다. - li는 그 어떤 것도 자식으로 가질 수 있다. ```css /* 1차 메뉴를 제외한 모든 서브메뉴를 숨기고, 메뉴 아이템에 마우스를 올렸을 때 자식인 메뉴가 나타나도록 하기*/ .menu-1 ul > li:hover > ul { display: block; } /* 1).menu-1 > ul li 2).menu-1 ul > li => 1/2번 둘 다 가능하지만 1번 형식을 주로 사용*/ ``` ```css /* 1차 메뉴 아이템 텍스트에 마우스를 올렸을 때 인접 동생인 2차 메뉴의 배경색을 red로 변경하기 */ .menu-1 > ul > li > a:hover + ul { background-color: red; } ``` # 텍스트 생략 css 속성 ```css div { white-space: nowrap; /* 텍스트 줄바꿈X */ overflow-x: hidden; /* 넘치는 부분 숨기기 */ text-overflow: ellipsis; /* 넘치는 글자 '...' 생략 */ } ``` - overflow / -x / -y - 속성값 1. visible: 넘쳐도 보임(default) 2. hidden: 숨김 3. scroll: 항상 스크롤바 생김 4. auto: 텍스트가 넘칠 때만 스크롤바 생김 - text-overflow를 쓰기 위한 전제조건 1. white-space: nowrap => 넘치는 텍스트 필요 2. overflow: hidden