0w0

올해 배워 잘 써먹고 있는 Css 트릭5

글

올해는 많은 UI/UX 애플리케이션이나 Web 사이트를 개발해, 상당히 충실한 1년입니다.

그 과정에서 디자인을 더욱 빛낼 편리한 트릭을 익힐 수 있었습니다.

  1. CSS 변수

CSS 변수는 공통 요소에 같은 스타일을 적용하고 싶은 경우에 편리합니다.

가령 복잡한 박스 쉐도우를 공통 요소에 추가하는 대신에, 요소를 초기화해서 그 스타일을 요소에 적용할 때마다 그 변수를 사용할 수 있습니다.

CSS 변수 초기값은 :root 설정으로 지정해서 사용할 수 있습니다.

:root {
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

이렇게하면 우리는 어떤 요소에도 원하는 박스 쉐도우를 적용할 수 있습니다.

.container {
  box-shadow: var(--shadow);
}
  1. Height 미디어 쿼리

화면 폭의 미디어 쿼리 대신에 화면의 높이 미디어 쿼리 적용함으로 화면이 높이가 크지 않은 기기에서도 반응형 대응할 수 있습니다.

또 기기를 회전하면, 화면의 높이가 변하므로, 그 변화도 반응적으로 반영할 필요가 있습니다.

@media only screen and (max-height: 800px) {
  .container {
    height: 95%;
  }
}

800 픽셀 이하 화면에서는 그리드 요소의 높이가 변경됩니다.

  1. Calc 함수

CSS calc 함수는 동적인 폭을 설정할 때 꽤 편리합니다.

가령, 어떤 요소의 폭을 다른 요소의 폭을 준비하고 싶은 경우

.container {
  width: calc(100%-300px);
}

컨테니어 요소 폭은 부모 컨테이너 100%에서 300px를 뺀 값이 됩니다.

이에, 이웃 컨테이너가 300px이라면 다이나믹 컨테이너에 대응할 수 있습니다.

  1. Vertical Alignment

어떤 요소를 수직으로 정렬할 방법은 여럿 있지만, 부모 요소 위치 관계가 복잡해지고, 의도대로 작동하지 않은 경우도 많습니다.

그럴 때 유효한 방법의 하나가 수직으로 정렬할 요소를 absoulte 포지션으로 지정해 스타일을 적용하는 것입니다.

.container {
  position: absolute;
  top: -50%;
  transform: translateY(50%);
  margin: auto;
}

이렇게함으로 요소를 부모 컨테이너 수직방향으로 정렬됩니다.

  1. Border-Box Property
.container {
  box-sizing: border-box;
}

border-box는 css에서 정말 편리한 프로퍼티 중 하나입니다. 이로 인해 요소의 모양은 일정하게 유지하면서 요소에 패딩을 작성할 수 있습니다.

300px x 300px 컨테이너에 30px 패딩을 설정하면, CSS 기본값은 그 px가 컨테이너 유지하는 기능이 추가되기에 디자인 위치나 그 외의 다른 많은 문제를 일으키고는 합니다. box-sizing: border-box 프로퍼티를 적용하는 것만으로 모든 컨테이너 크기를 통일할 수 있습니다.

box-sizing은 입력, 텍스트 영억, 셀렉트 박스 크기도 일정하기 함으로 요소의 외관을 통일시킬 수 있습니다.

Website: www.flexrweb.com

재밌는 댓글

box-sizing: border-box; is a life changer 😄

잡담

이 외에도 잡기 중에 font-size: 62.5%;를 주면 16px인 브라우저의 기본 폰트 크기가 10px로 맞춰집니다.