[9일차] 줄바꿈 / 스크롤 / 내용숨김 ... / white-space, overflow, text-overflow

1. 줄바꿈 금지 / white-space:nowrap

---

2. 스크롤 생성 / overflow-x:auto

가로방향으로 스크롤바를 무조건 생성 (단, 넘치치 않으면 스크롤바가 안생김)

• 안녕하세요 문구는 넘치지 않아 스크롤바가 생성되지 않음

---

3. 스크롤 무!조!건 생성 / overflow-x:scroll

필요에 따라 가로 스크롤바 생성

---

4. 넘치는 내용 숨김 / overflow-x:hidden

넘쳐나는 내용 무조건 숨김 = overflow-x:hidden;

넘친 텍스트 ... 으로 처리 = text-overflow:ellipsis;

• div:nth-last-child(1) : 뒤에서 첫 번째 자식
  

• section > div:nth-child(3n + 3) : 3의 배수 + 3번째인 요소에 적용
  

---

문제 풀기

🔗 CodePen 풀다운 만들기 예제 v2: https://codepen.io/jangka44/pen/pLbVoq
🔗 CodePen 풀다운 만들기 예제 v3: https://codepen.io/jangka44/pen/GRqRrvX