CSS Miscellaneous Properties

(1) 반응형
반응형으로 만들기 위해서는 크기에 따라 CSS를 한번 더 써주면 된다.

@media all and (max-width: 1300px) {

  .header {

    flex-direction: column;

  }

}

 

(2) 이미지에 붙어 있는 약간의 여백을 없애주는 스타일

img {

  vertical-align: top;

}

 

(3) 글자 바꾸기

p {

  text-transform: capitalize;

}

 

(4) 사용자가 마우스를 올리는 것을 방지

p {

  pointer-events: none;

}

기본값 auto를 쓰면 되살아남

 

(5) 종횡비를 무시하고 화면을 꽉 채울 때

img {

  object-fit: cover;

}

이미지, 비디오 둘 다 쓸 수 있으며 이미지의 경우, 화면을 꽉 채우기 위해 이미지를 키운 후 자른다.
반면 디폴트인 contain을 쓰면 종횡비를 우선시하여 작은 그림이 된다.

 

(6) 박스 사이즈를 설정

p {

  box-sizing: border-box;

}

 

 

(7) 텍스트에 그림자 주기

span {

  text-shadow: 1px 1px 0px darken(blue, 25);

}

offset-x / offset-y / blur-radius / color

darken은 색깔은 어둡게 하는 속성으로, 반대로 밝게 하기 위한 lighten도 있다.

 

 

(8) 기본값과 최대 최소값 설정하기

h2 {

  font-size: clamp(24px, 7.5vw, 36px);

}

clamp(최소값, 기본값, 최대값)

 

(9) 투명도 설정하기

h2 {

  background-color: rgba(99,0,99,0.5);

}

rgba(색상, 색상, 색상, 투명도)

 

(10) 최우선 적용시키기

h2 {

  color:red !important;

}