🎨CSS | overflow, 말줄임, 가상 클래스, 가상 요소 선택자

텍스트가 콘텐츠 박스 밖으로 넘칠 경우 처리

text-overflow

• 콘텐츠 밖으로 나온 텍스트를 어떻게 처리할 지 선택
• overflow: hidden; : 넘치는 텍스트 안보이게 설정

ellipsis

• 넘치는 텍스트 말줄임 처리

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

• white-space: nowrap; : 줄바꿈을 하지 않고 같은 줄에 쭉 써줌
  text-overflow:ellipsis; : 넘치는 텍스트 말줄임 처리

• 몇 번째 줄에서 말줄임 처리할 지 설정

/* 세 번째 줄에서 말줄임 */
.example {
	overflow:hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

---

가상 클래스 선택자

:가상이벤트 형태로 특별한 상태의 요소를 선택

:first-child, :last-child, :nth-child(n)

• 형제 그룹에서 순서에 따라 요소 선택
• 형제 요소 중 n번 째에 없으면 적용 X

/* 첫 번째 요소 선택 */
li:first-child {
	color: salmon;
}

/* 마지막 요소 선택 */
li:last-child {
	color: royalblue;
}

/* li와 형제 요소 중 3번째 요소 선택 */
/* 만약 세번 째에 <li> 없다면 적용X */
li:nth-child(3) {
	color: sandybrown;
}

/* 짝수 요소 선택 */
li:nth-child(even) {
	text-decoration: underline;
}

응용 예시

<div>
  <p>첫번째</p>
  <p>두번째</p>
  <strong>세번째</strong>
  <p>네번째</p>
  <div>다섯번째</div>
</div>

/* 형제 그룹 안의 3번 째 자식 태그가 <p>인 요소 */
/* 위의 경우 3번째 태그가 <p>가 아니라 <strong> 이어서 적용 X */
p:nth-child(3) {
	color: green;
}

/* div + ' '(공백 - 모든 자식 요소 의미) div 자식 요소 중 n번 째 */
/* 위의 경우 <strong>세번째</strong> 의미 */
div :nth-child(3) {
	text-decoration: underline;
}

/* 형제 <div> 중 3번 째 요소 */
/* 위의 경우 존재 X */
div:nth-child(3) {
	font-size: large;
}

결과

:nth-of-type(n)

• 형제 그룹의 같은 태그를 가진 요소 중에서 순서를 기반으로 선택

/* 형제 태그들 중 3번 째 <p> 요소 */
p:nth-of-type(3) {
	color: green;
}

:not()

• 부정선택자, 특정 요소 제외하고 선택

/* <p>중 첫번 째, 마지막이 아닌 요소 */
p:not(:first-child):not(:last-child){
	color: green;
}

:root

• 전역 변수를 선언할 때 사용

:root {
	--main-color: hotpink;
}

ul {
background-color: var(--main-color);
}

💡참고
가상클래스 선택자 div:not(:first-child) 와 복합선택자 div~div 같음

• 일반 형제 선택자 (~)는 자신 뒤에 나오는 형제 태그 전체 선택이기 때문에, 첫 번째 div를 제외하고 그 뒤에 나오는 형제 div 모두를 선택
• margin-top: 20px; 같은 경우 요긴하게 쓰임!

---

가상 요소 선택자

• 선택한 요소에 자식 생성
• 보통 content 속성과 짝을 지어 요소에 장식용 콘텐츠를 추가
• 빈태그(닫는 태그가 없는 태그) <img> br input 에는 적용 X

::before, ::after

• 선택한 요소 전, 후로 콘텐츠 추가

응용 예시

<ul>
  <li>안녕하세요</li>
  <li>저에요</li>
</ul>

li {
	list-style: none;
}

ul::before {
	content: "[";
}

ul::after {
	content: "]";
}

li::before {
	content: "<";
}

li::after {
	content: ">";
}

결과