유용한 css 모음 (계속 추가중)

제가 개발할 때 조금이라도 편하게 하게끔 기록해 놓은 css 모음집 입니다.

 

✔️ 버튼 기본 css 지우기

button {
	border: 0;
	background-color: transparent;
}

✔️ 내용물을 가운데로 만들기

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

✔️ 배경색 그라이데이션 효과 주기

background: linear-gradient(180deg, #f3f186 0%, #f5c96b 100%);
height: 100vh;

✔️ 이미지 가운데로 꽉차게 입히기

background-position: center;
background-size: cover;

✔️ 링크 태그에서 밑줄 없애기

text-decoration: none;

✔️ 버튼 꽉차게 만들기

   Button {
      display: block;
      width: 100%;
      text-align: center;
    }

✔️ input에서 특정 타입만 선택하기

input[type=text] 
{
     ....
}

✔️ 스크롤 내려도 위치 고정시키기 (sticky)

.sticky {
  position: sticky;
  top: 0;
  background: #8a4baf;
}

sitcky 속성은 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해주어야 한다.

 

overflow: hidden을 하면 sticky가 제대로 동작하지 않는 버그가 있음.

그래서 overflow: hidden대신 contain:paint로 사용한다.