텍스트 줄바꿈
text-wrap: balance;| Values | 성능 비용 | 활용 | |
|---|---|---|---|
| balance | 각 줄의 길이 최대한 비슷하게 맞춤 | 높음 (4줄 이하 권장) | 제목, 헤더 |
| pretty | 마지막 줄에 단어 하나만 남는 것 방지 | 비교적 낮음 | 본문, 단락 |
@starting-style
요소 애니메이션 진입 시 첫 프레임 스타일
transition-behavior: ~s allow-discrete
: 애니메이션 끝날 때까지(~s) 속성 전환 미룸
div{
display:none;
opacity:0;
transition:
opacity 0.3s,
/* 애니메이션 끝날 때까지 display 속성 전환(display: none) 미룸 */
display 0.3s allow-discrete;
}
@starting-style{
div.active{
opacity:0; /* .active 상태의 애니메이션 첫 프레임 스타일 */
}
}
div.active{
display:block;
opacity:1;
}사용예시
텍스트 방향에 맞춘 min max size 사용도 낮음
다국어 지원 시 사용
| 가로쓰기 (한국어/영어) | 세로 쓰기 (중국어/일본어) | |
|---|---|---|
min-inline-size |
min-width |
min-height |
min-block-size |
min-height |
min-width |
브라우저 터치스크린 액션
touch-action: pan-y pinch-zoom; 다중 지정 가능| Values | |
|---|---|
| auto | default |
| none | 모든 터치 이벤트 무시 |
| pan-x pan-y pan-left pan-right pan-up pan-down |
특정 축, 방향 |
| pinch-zoom | 손가락 사용한 확대, 축소 |
Mobile (iOS)
| Values | |
|---|---|
-webkit-text-size-adjust: 100% |
텍스트 자동 확대 방지 |
-webkit-touch-callout: none |
텍스트, 이미지 길게 누를 때 : 제한적으로만 사용하기 |
-webkit-overflow-scrolling: touch |
구버전 스크롤링 |
height: 100dvh |
동적 뷰포트 기준 height |
env(safe-area-inset-bottom)
/* padding 값 필요 시 */
padding-bottom: calc(20px + env(safe-area-inset-bottom))- 노치, 홈바 여유 공간 확보
- Values :
toprightbottomleft - viewport 메타 태그 설정
<... viewport-fit=cover>
변경될 속성 힌트 사용도 낮음
will-change: left, top; 다중 지정 가능- 남용 시 성능 저하
| Values | |
|---|---|
| auto | default |
| scroll-position | |
| contents | |
| transform | css 속성 명시 가능 |
텍스트 선택
user-select: auto;- 가상 선택자(::before, ::after)는 선택 안됨
| Values | 출력 | |
|---|---|---|
| auto | default | Lorem Ipsum is simply dummy |
| text | default 와 동일 | Lorem Ipsum is simply dummy |
| none | Lorem Ipsum is simply dummy |
|
| all | Lorem Ipsum is simply dummy |
css trick
inline의 border-bottom 스타일주기
줄바꿈, animation 가능
.txt_underline{background:linear-gradient(color, color) no-repeat 0 100%; background-size:100% border-size}.btn_blur{padding:10px 20px;border-radius:100px;backdrop-filter:saturate(200%) blur(6px);-webkit-backdrop-filter:saturate(200%) blur(6px);background:transparent;border:0;box-shadow:inset 0 1px #fff3;}
.drag-none img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;pointer-events:none;}ellipsis
.ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:16px;line-height:24px;}Login input
<input type="text" spellcheck="false" />input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color:var(--fg-neutral);
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
box-shadow: 0 0 0px 1000px #fff inset;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
-webkit-text-fill-color:var(--fg-neutral);
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
box-shadow: 0 0 0px 1000px #fff inset;
}