TIL : 250409수 (말줄임표(ellipsis) CSS, &::placeholder SCSS )

1. 말줄임표 (ellipsis) 적용

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

 

 

2. `&::placeholder`

`&::placeholder`는 SCSS(Sass) 문법이다.

의미는 다음과 같다.

 

🔤 뜻 풀이

• `&` : 현재 선택자를 의미 (예: `.search`)
• `::placeholder` : placeholder 가상 요소 (`input`, `textarea` 등에서 placeholder 스타일링할 때 사용)

즉,

.search {
  &::placeholder {
    color: gray;
  }
}

이건 컴파일되면 CSS에서 아래와 같이 변환됨.

.search::placeholder {
  color: gray;
}

 

✅ 요약

• `&` = 현재 선택자
• `::placeholder` = `placeholder="..."`의 스타일 지정
• 전체는 SCSS 문법으로, 현재 선택자의 `placeholder`에 스타일을 적용한다는 뜻