알아두면 유용한 잡다한 CSS

1. background 속성

background: url() no-repeat center center/24px 24px;

앞에서 부터 url('이미지 url') , repeat 여부 , 백그라운드 포지션x , 백그라운드 포지션y , 백그라운드 사이즈 width , 백그라운드 사이즈 height;

2. 이미지 사이즈 div에 맞추기

: https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container

max-width: 100%;
max-height: 100%;

3. CSS object-fit

: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

4. 브라우저 스크롤 바 꾸미기

body::-webkit-scrollbar {
	/* position: absolute;
	top: 0;
	right: 0; */
	width: 10px;
}

body::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
	background: #e5e5e5;
	border-radius: 10px;
}

5. 텍스트 넘칠 경우 말 줄임 처리

	overflow: hidden;
	text-overflow: ellipsis;

6. line-clamp

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	
	// 이거 꼭 확인! nowrap인 경우 한줄로 나오기 때문에, line-clamp가 적용되지 않는다.
	white-space: normal;

7. Placeholder CSS 수정하기

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 
}

::-ms-input-placeholder { /* Microsoft Edge */
 
}

8. 이미지 사이즈 가로, 세로, 가로/세로 기준으로 맞출 경우

a {
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 1.38889vw 4.44444vw;
	box-sizing: border-box;
}

img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}

// 가로 기준으로 이미지 사이즈 맞추기
img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	max-height: 100%;
	margin: auto;
}

// 세로 기준으로 이미지 사이즈 맞추기
img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: 100%;
	max-width: 100%;
	margin: auto;
}

9. IE에서 'unset' 속성이 적용되지 않음

: https://stackoverflow.com/questions/48425453/ie11-css-alternative-to-unset
=> 'auto' 속성으로 대체!

// IE에서 동작 X
top: unset;

// IE에서 동작 O
top: auto;

10. 스크롤바 CSS로 숨기기

: https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll
: https://epjang.tistory.com/41

.box {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}