기본 Reset부터 clip-path까지 – 실전 웹 디자인 시작하기

이번에는 새로운 CSS 프로젝트를 시작할 때 반드시 설정해야 할 초기 세팅과 함께, 비교적 최신 CSS 기능인 clip-path를 활용한 디자인까지 다룹니다. 본문에서는 주요 흐름과 실습 내용을 정리해 보겠습니다.

---

배우는 것

• Universal Selector를 이용한 기본 Reset
• body에 적용하는 글꼴 설정 및 전역 스타일
• clip-path 속성으로 요소의 클리핑(잘라내기)
• background-image를 활용한 배경 이미지 및 그라디언트 오버레이
• vh 단위를 사용한 반응형 높이 설정
• box-sizing: border-box의 의미와 필요성

---

기본 Reset 설정하기

브라우저 기본 스타일을 제거하기 위해 universal selector(*)를 사용합니다:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

과거에는 Normalize.css 같은 외부 CSS를 사용했지만, 이제는 브라우저 간 차이가 줄어들어 간단한 reset으로도 충분합니다.

---

전역 폰트 및 텍스트 설정

body에 글로벌 폰트 스타일을 설정합니다:

body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #777;
  padding: 30px; /* 여백 테두리 효과 */
}

body는 모든 요소의 부모이기 때문에 폰트 설정은 상속되어 전체 페이지에 적용됩니다.

---

Header 구성 및 배경 처리

HTML 구조

<header class="header">
  Some text
</header>

CSS 설정

.header {
  height: 95vh;
  background-image: 
    linear-gradient(to right bottom, rgba(40,180,133,0.8), rgba(0,100,80,0.8)),
    url(../img/hero.jpg);
  background-size: cover;
  background-position: top;
}

• vh 단위: 뷰포트 높이의 95% 사용
• **background-image**에 두 개의 배경을 지정
  • 첫 번째는 그라디언트 오버레이
  • 두 번째는 배경 이미지
• RGBA 색상을 활용해 이미지 위에 반투명 그라디언트 덮기

---

clip-path 미리보기

이후에 다룰 clip-path는 HTML 요소를 마스크 처리해 독특한 형태로 자르는 기능입니다.
예: 삼각형, 원형, 다각형 모양으로 요소 잘라내기.

---

마무리

CSS 초기 세팅과 배경 처리에 대해 매우 실용적인 지식을 배웠습니다. 앞으로 프로젝트를 시작할 때마다 사용할 수 있는 매우 중요한 부분이니 꼭 익혀두세요. 다음에는 clip-path를 실제로 활용해 요소를 다듬는 방법을 배웁니다.