디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 생긴다.
말줄임표를 사용하면 해당 문장이 사실은 더 긴 문장이고 생략되었다라는 것을 암시해주는 역할을 할 수 있다.
👨🦰 white-space
원래 설정된 디폴트는 width를 넘어갈 경우 줄바꿈이 자동으로 되는데
white-space가 이 줄바꿈을 설정해주는 거다.
white-space:normal;로 할 경우 일반적인 줄바꿈이 되고
white-space:nowrap;으로 하면 줄넘김이 되지 않음
👨🦰 text-overflow
텍스트가 넘치는 부분을 어떻게 처리할 지 관여하는 기능
white-space:nowrap; 👉 줄넘김 하지 마세용
overflow:hidden; 👉 설정한 div 넓이보다 길어지면 안 보이게 하세용
text-overflow:ellipsis; 👉 줄넘김 처리를 말줄임으로 해주세용
text-overflow:clip; 👉 그냥 컷!!! 잘라버려용
'✍ 따뜻한 개발 공부' 카테고리의 다른 글
| [2주차] 웹개발 종합반 개발일지 (0) | 2022.10.22 |
|---|---|
| [1주차] 웹개발 종합반 개발일지 (0) | 2022.10.20 |
| [javascript] 사진 확대해서 띄우기 / onClick 이벤트 활용하여, 사진 클릭 시 사진 확대하기 (0) | 2022.09.04 |
| [api] 구글 map x , 카카오 map x ! 구글 회원가입없이 홈페이지 지도 만들기 / api 이용하여 사이트에 현재 위치 표시하기 (0) | 2022.09.03 |
| [JavaScript] onClick 시 나타났다 사라지기 / display:none 과 display:block 이용하기 (0) | 2022.09.02 |
댓글