[CSS] CSS관련 참고할만한 팁들

오늘은 CSS의 몇 가지 팁을 공유하려고 합니다.

• 학습자료 링크
  https://youtu.be/2IV08sP9m3U?si=tiDcCSeFmd-HmLj9

1. 상대 패딩 (Relative Padding)

일반적인 방법

• CSS에서 패딩을 주는 일반적인 방법은 다음과 같음

.container {
  padding: 5em;
}

@media(max-width: 700px) {
  .container {
    padding: 2em;
  }
}

상대 패딩 활용

• 상대 패딩을 사용하면 코드를 더 간결하게 작성할 수 있음

.container {
  padding: min(5em, 8%);
}

이는 화면 크기에 따라 패딩을 자동으로 조절해 줌

min() 함수는 두 값 중 작은 값을 선택하여 패딩으로 사용.

따라서, 화면이 작아질수록 % 단위가 더 작아질 가능성이 높고, 그 반대의 경우에는 em 단위가 더 작아질 수 있음

이러한 방식으로 상대 패딩은 화면 크기에 따라 유연하게 조절됨

2. 반응형 폰트 크기 (Responsive Font Sizes)

• 기본 단위: px, em, rem, pt, pc, vw 등이 있음.
  • 그 중 rem은 부모 요소의 폰트 크기를 기준으로 하며, 기본값은 16px입니다.
• 반응형 디자인에서: vw 단위를 사용하면 화면 너비에 따라 글씨 크기가 조절됨

  font-size: 10vw;

  그러나 너무 큰 화면에서는 글씨가 너무 커질 수 있고, 작은 화면에서는 글씨가 너무 작아질 수 있다는 문제가 있음
  
• clamp 속성 활용: 최소, 기본, 최대 값을 설정하여 문제를 해결할 수 있음

  font-size: clamp(1.8rem, 10vw, 5rem);

  • 그러나 화면을 확대하거나 축소 했을때 font-size가 변하지 않는 문제가 있음

    • 줌 기능과 함께 사용하려면 calc 함수를 활용할 수 있음

      font-size: clamp(1.8rem, calc(7vw + 1rem), 5rem);

3. 반응형 이미지 (Responsive Images)

• 기본 스타일: 이미지에 max-width를 100%로 설정하는 것이 일반적

  img {
    max-width: 100%;
  }

  그러나 화면 크기에 따라 이미지의 비율이 깨질 수 있다는 문제
  
• height: auto 속성 활용

  • 이렇게 만들면 이미지가 깨지지 않고 비율에 맞춰 그려질 수 있음

    img {
      max-width: 100%;
      height : auto;
    }

    그러나 CLS문제와 각 요소별 이미지의 크기가 달라진다는 문제가 발생

• aspect-ratio 속성 활용: 이미지 박스를 특정 비율로 고정시킬 수 있으며 CLS문제 해결 가능

  • 이미지 비율이 깨질 경우를 대비해 object-fit 속성을 활용

    img {
      max-width: 100%;
      height: auto;
      aspect-ratio: 16/9; */* 가로로 긴 직사각형 */*
      object-fit: contain; */* 이미지 비율 유지 */*
    }

4. 뷰포트 설정 (Viewport Settings)

• 일반적인 문제: 보통 vh를 활용하면 설정할 수 있지만 스마트폰 등에서 스크롤이 생기는 문제가 발생할 수 있음

  .element {
    height: 100vh;
    padding: 2em;
    background: red;
    color: white;
    border: 15px solid blue;
  }

• dvh 활용: 뷰포트 높이에서 스크롤바 높이를 제외한 값을 사용하여 문제를 해결할 수 있음

  .element {
    height: 100dvh;
    padding: 2em;
    background: red;
    color: white;
    border: 15px solid blue;
  }

5. inert 속성

• 기본적인 네비게이션 바 스타일:

  nav {
    display: none;
  }
  
  nav.show {
    display: block;
  }

• 아래와 같이 사용하면 좀더 유연한 사용이 가능
  • 부드러운 전환:

    nav {
      opacity: 0;
      pointer-events: none;
    }
    
    nav.show {
      opacity: 1;
      pointer-events: all;
    }

  • inert 속성 활용: 화면상에 보이지 않는 경우에도 네비게이션의 메뉴가 선택되는 문제를 해결할 수 있음

    • 해당 요소와 그 하위 요소들은 상호작용을 받지 않게 됨

      nav {
        inert: true;
      }
      
      nav.show {
        inert: false;
      }