[CSS] 유용한 CSS 속성 정리

헷갈리거나 활용하지 못했던 CSS 속성들 정리 (...ING)

 

accent-color : 

ㄴ 브라우저 기본 지정 색 (e.g 체크박스는 파란색) 변경 해줄 수 있음

 

min-height: 0

ㄴ flex 아이템 중 어느 하나가 길어지는 경우 위의 요소가 화면을 넘어갈 때에 0으로 지정해주면 해결 가능 

 

list-style-type: none;

ㄴ li 태그 bullet 표시 제거 

 

:root {

    --color-bg-dark: #f5f5f5;

    --color-bg: #fdfffd;

    --color-grey: #d1d1d1;

    --color-text: #22243b;

    --color-accent: #f16e03;

}

ㄴ 자주 쓰는 색상 이름 지정하여 var(--color-bg)와 같은 형태로 돌려쓸 수 있음

 

*{

    box-sizing: border-box;

}

ㄴ 패딩, 마진 효과 줘도 본연의 사이즈 유지

 

border

outline

 

filter: brighteness(110%);

ㄴ 밝기 조절 (hover 같을 떼)

 

pointer-events: none;

ㄴ 

 

flex: 1 0 auto

ㄴ grow, shrink

 

overflow: hidden;

ㄴ  자식 요소가 부모 요소보다 몸집이 커질 때 부모 요소로 가려주는 효과

 

overflow-y: auto;

ㄴ 내용이 세로 길이 넘어 가는 경우 자동 스크롤 효과 

 

스크롤바 꾸미기

::-webkit-scrollbar {

    width: 0.5rem;

}

 

::-webkit-scrollbar-track {

    background-color: var(--color-bg-dark);

}

 

::-webkit-scrollbar-thumb {

    background-color: var(--color-scrollbar);

}

 

::-webkit-scrollbar-thumb:hover {

    background-color: var(--color-accent);

}

 

ul 태그 기본 스타일 제거

ul {
  list-style: none;
  padding-left: 0;
}

button 태그 기본 박스 스타일 제거

button {
  outline: none;
  border: none;
}

특정 클래스 아래에 라인 추가

.filter.selected::after {
    content: '';
    display: block;
    margin-top: 0.2rem;
    border: 1px solid var(--color-text);
}