[CSS] CSS를 더 잘 사용해보기 위한 팁(1)

위 글은 25 CSS Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,

팁이 25가지나 되는 만큼 한 글에 담기보단 8-9개씩 3번으로 나눠서 포스팅할 예정이다.

이 글은 3번째 중 1번째 글이다.

---

1. Centering Elements Vertically and Horizontally (요소를 수직 및 수평으로 중앙 정렬하기)

문제: 요소를 컨테이너 내에서 수직 및 수평으로 중앙 정렬하고 싶습니다.

해결책: Flexbox를 사용합니다.

부연 설명: Flexbox는 CSS 레이아웃의 유연성과 효율성을 극대화하는 강력한 도구입니다. justify-content와 align-items 속성은 요소를 수평 및 수직으로 정렬하는 데 사용됩니다. 이 패턴은 로그인 페이지나 모달 창을 중앙에 배치할 때 매우 유용합니다.

.container {
  display: flex;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */
  height: 100vh;
}

2. Responsive Text with vw (뷰포트에 비례하는 텍스트 크기 설정)

문제: 텍스트가 뷰포트와 비례해서 크기가 조절되도록 하고 싶습니다.

해결책: vw 단위를 사용합니다.

부연 설명: vw 단위는 뷰포트 너비의 백분율을 기준으로 합니다. 최근에는 다양한 뷰포트 단위가 추가되었습니다:

• dvw (Dynamic Viewport Width): 디스플레이 컷아웃 영역을 고려한 동적 뷰포트 너비
• lvw (Large Viewport Width): 최상위 뷰포트의 너비
• svw (Small Viewport Width): 최소 뷰포트의 너비

h1 {
  font-size: 5vw;
}

3. Maintain Aspect Ratio (비율 유지)

문제: 요소의 비율을 유지하고 싶습니다.

해결책: 퍼센트를 기반으로 패딩을 사용합니다.

부연 설명: 이 방법은 패딩의 특성을 이용하여 비율을 유지하는 방법입니다.

이 패턴은 비디오 플레이어나 이미지 갤러리에서 비율을 유지하는 데 유용합니다.

.aspect-ratio-box {
  width: 100%;
  padding-top: 56.25%; /* 16:9 비율 */
  position: relative;
}
.aspect-ratio-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

4. Custom Checkbox and Radio Buttons (커스텀 체크박스 및 라디오 버튼)

문제: 기본 체크박스와 라디오 버튼을 스타일링하고 싶습니다.

해결책: 기본 입력을 숨기고 레이블을 스타일링합니다.

부연 설명: input 요소를 숨기고 label과 span을 사용하여 커스텀 스타일을 적용할 수 있습니다.

이 방법은 접근성을 고려하여 label 태그를 사용하는 것이 좋습니다.

<label class="custom-checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
</label>

.custom-checkbox input {
  display: none;
}
.custom-checkbox .checkmark {
  width: 20px;
  height: 20px;
  background-color: #eee;
  border-radius: 4px;
}
.custom-checkbox input:checked + .checkmark {
  background-color: #2196F3;
}

5. CSS Grid for Layouts (CSS Grid를 사용한 레이아웃 구성)

문제: 복잡한 레이아웃을 만들고 싶습니다.

해결책: CSS Grid를 사용합니다.

부연 설명: CSS Grid는 2차원 레이아웃을 쉽게 만들 수 있게 해줍니다. grid-template-columns와 grid-template-rows를 사용하여 레이아웃을 정의할 수 있으며, gap 속성으로 아이템 간의 간격을 조절할 수 있습니다.

Copy code
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.item {
  background-color: lightblue;
  padding: 20px;
}

6. Sticky Footer (고정된 푸터)

문제: 페이지의 하단에 고정된 푸터를 만들고 싶습니다.

해결책: Flexbox를 사용합니다.

부연 설명: Flexbox의 flex-direction과 flex 속성을 사용하여 푸터를 페이지 하단에 고정할 수 있습니다.

이 패턴은 페이지의 컨텐츠가 적더라도 푸터를 항상 화면 하단에 배치하고 싶을 때 유용합니다.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

7. Smooth Scroll (부드러운 스크롤)

문제: 앵커 링크에 부드러운 스크롤 효과를 추가하고 싶습니다.

해결책: scroll-behavior 속성을 사용합니다.

부연 설명: scroll-behavior: smooth;를 사용하면 앵커 링크를 클릭했을 때 부드럽게 스크롤되는 효과를 줄 수 있습니다.

이 속성은 사용자 경험을 향상시키는 데 도움을 줍니다.

html {
  scroll-behavior: smooth;
}

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

문제: 이미지가 반응형이 되도록 하고 싶습니다.

해결책: max-width 속성을 사용합니다.

부연 설명: max-width: 100%;를 사용하면 이미지는 부모 요소의 너비를 넘지 않도록 설정할 수 있습니다.

height: auto;와 함께 사용하면 이미지의 비율을 유지하면서 크기가 조절됩니다.

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

9. Text Truncation with Ellipsis (텍스트 줄임표로 생략)

문제: 긴 텍스트를 한 줄로 줄이고 끝에 줄임표를 표시하고 싶습니다.

해결책: text-overflow 속성을 사용합니다.

부연 설명: text-overflow: ellipsis;는 긴 텍스트를 잘라내고 끝에 줄임표(...)를 추가합니다. white-space: nowrap;과 overflow: hidden;을 함께 사용하여 텍스트가 한 줄로 표시되도록 합니다. 이 패턴은 제한된 공간에서 텍스트를 깔끔하게 표시할 때 유용합니다.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 예시 너비 */
}