올해 배운 내가 가장 좋아하는 CSS 트릭 5가지

올해는 제가 수많은 UI/UX 앱과 웹사이트를 개발했기 때문에 매우 생산적이었습니다. 도중에 나는 내 디자인을 향상시키기 위해 몇 가지 유용한 트릭을 선택했습니다.

1. CSS 변수

CSS 변수는 공통 요소에 동일한 스타일을 적용하려는 경우에 유용합니다. 예를 들어 공통 요소에 복잡한 상자 그림자를 추가하는 대신 변수를 초기화하고 해당 스타일을 요소에 적용할 때마다 해당 변수를 사용할 수 있습니다.

다음과 같이 :root 및 설정하려는 속성을 사용하여 CSS 변수를 초기화합니다.

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

그런 다음 이 상자 그림자를 적용하려는 모든 요소에서 사용할 수 있습니다.

.container {
   box-shadow: var(--shadow);
}

2. 높이 미디어 쿼리

화면 너비 미디어 쿼리 외에도 화면 높이 미디어 쿼리를 적용할 수도 있으므로 화면 높이가 더 작은 장치가 응답할 수 있습니다. 또한 기기가 화면을 회전할 때 화면 높이가 변경되며 응답을 위해 이러한 변경 사항을 반영해야 합니다.

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

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

3. 계산 기능

CSS 계산 기능은 동적 너비를 설정할 때 매우 유용할 수 있습니다. 요소의 너비가 다른 요소의 너비를 기반으로 하고 싶다고 가정해 보겠습니다.

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

컨테이너 요소의 너비는 부모 컨테이너의 100%에서 300px를 뺀 값을 기준으로 하므로 옆에 있는 컨테이너가 300px이면 동적 컨테이너가 이에 따라 응답합니다.

4. 수직 정렬

요소를 세로로 정렬하는 방법에는 여러 가지가 있지만 때로는 부모 요소의 위치 지정 문제로 인해 복잡해지고 작동하지 않을 수 있습니다. 매번 작동하는 그러한 방법 중 하나는 수직으로 정렬하려는 요소를 절대 위치로 배치하고 다음 스타일을 적용하는 것입니다.

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

이렇게 하면 요소가 부모 컨테이너에 수직으로 정렬됩니다.

5. 테두리 상자 속성

.container {
    box-sizing: border-box;
}

테두리 상자는 CSS에서 가장 유용한 속성 중 하나입니다. 요소의 크기를 균일하게 유지하면서 요소에 패딩을 만들 수 있습니다. 따라서 너비가 300px이고 높이가 300px이고 패딩이 30px인 컨테이너가 있는 경우 기본적으로 CSS는 컨테이너의 크기에 해당 30px를 추가하므로 디자인에서 정렬 및 기타 문제가 많이 발생합니다. box-sizing: border box 속성을 적용하여 모든 컨테이너의 크기를 균일하게 만들 수 있습니다.
box-sizing은 또한 입력, 텍스트 영역 및 선택 상자를 동일한 크기로 만들어 요소에 균일한 모양을 만드는 데 사용할 수 있습니다.

웹사이트: www.flexrweb.com