/* ========================================================================== styles.css — 화면의 디자인(색, 글꼴, 크기, 배치)을 담당하는 파일 ========================================================================== [읽는 방법] CSS는 "선택자 { 속성: 값; }" 형태의 규칙이 위에서 아래로 쌓인 구조입니다. - 선택자(selector) : 어떤 요소에 적용할지 (예: body, .title) - 속성(property) : 무엇을 바꿀지 (예: color, font-size) 점(.)으로 시작하는 선택자는 class 이름을 가리킵니다. 즉 .title 규칙은 index.html의

에만 적용됩니다. [수정 팁] 색을 바꾸고 싶다면 아래 :root 블록의 변수 값만 고치면 전체에 한 번에 반영됩니다. ========================================================================== */ /* -------------------------------------------------------------------------- 1) 색상 변수 정의 :root는 문서 전체의 최상위(=)를 가리키는 선택자입니다. 여기에 --이름: 값 형태로 적어두면 아래에서 var(--이름)으로 재사용할 수 있습니다. 색을 한 곳에서 관리할 수 있어 나중에 테마를 바꾸기 쉽습니다. -------------------------------------------------------------------------- */ :root { --bg: #f7f7f5; /* 페이지 배경색 (아주 옅은 회색) */ --surface: #ffffff; /* 가운데 카드의 배경색 (흰색) */ --border: #e4e4e0; /* 카드 테두리 색 */ --text: #1a1a1a; /* 제목 등 진한 글자색 */ --muted: #5f5f5a; /* 보조 문장의 흐린 글자색 */ } /* -------------------------------------------------------------------------- 1-1) 다크 모드 대응 prefers-color-scheme: dark 는 "사용자가 기기를 어두운 테마로 쓰는 중"이라는 뜻입니다. 그때만 위의 변수 값을 덮어써서 어두운 배색으로 전환합니다. HTML은 전혀 건드리지 않아도 되고, 이 블록을 통째로 지우면 항상 밝은 테마가 됩니다. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --bg: #16161a; --surface: #1f1f24; --border: #2e2e35; --text: #f2f2f0; --muted: #a6a6a0; } } /* -------------------------------------------------------------------------- 2) 기본값 초기화 * 는 "모든 요소"를 뜻하는 선택자입니다. box-sizing: border-box → 요소의 너비를 계산할 때 padding과 border를 포함시킵니다. 이 설정이 없으면 여백을 줄 때마다 요소가 예상보다 커져 배치가 틀어집니다. -------------------------------------------------------------------------- */ * { box-sizing: border-box; } /* -------------------------------------------------------------------------- 3) 페이지 전체 배치 body에 flex를 주고 가로·세로 모두 center로 맞춰 카드를 화면 정중앙에 놓습니다. - display: flex → 자식 요소를 정렬할 수 있는 배치 모드로 전환 - align-items: center → 세로 방향 가운데 정렬 - justify-content → 가로 방향 가운데 정렬 - min-height: 100dvh → 화면 높이만큼 최소 높이 확보(dvh는 모바일 주소창이 접혔다 펴져도 흔들리지 않는 최신 단위) -------------------------------------------------------------------------- */ body { margin: 0; /* 브라우저가 기본으로 넣는 바깥 여백 제거 */ min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; /* 화면이 좁을 때 카드가 가장자리에 붙지 않도록 */ background: var(--bg); color: var(--text); /* 글꼴: 앞에서부터 순서대로 찾아 기기에 설치된 첫 번째 글꼴을 사용합니다. system-ui는 윈도우/맥/모바일 각각의 기본 글꼴을 자동으로 선택해 주며, 외부 폰트를 내려받지 않으므로 페이지가 즉시 표시됩니다. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 글자 가장자리를 부드럽게 렌더링 */ -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- 4) 가운데 카드 index.html의
에 적용됩니다. -------------------------------------------------------------------------- */ .card { width: 100%; max-width: 480px; /* 큰 화면에서 너무 넓게 퍼지지 않도록 상한선 */ padding: 48px 40px; /* 위아래 48px, 좌우 40px 안쪽 여백 */ text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; /* 모서리 둥글기 */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); /* 아주 옅은 그림자로 입체감 */ } /* -------------------------------------------------------------------------- 5) 큰 제목 (

) clamp(최소, 기준, 최대) → 화면 크기에 따라 글자 크기가 자동으로 조절됩니다. 여기서는 최소 32px, 화면 너비의 6%, 최대 48px 사이에서 움직입니다. 덕분에 휴대폰에서도 데스크톱에서도 적당한 크기로 보입니다. -------------------------------------------------------------------------- */ .title { margin: 0 0 12px; /* 위 0, 좌우 0, 아래 12px */ font-size: clamp(32px, 6vw, 48px); font-weight: 700; /* 굵게 */ letter-spacing: -0.02em; /* 자간을 살짝 좁혀 제목을 단단해 보이게 */ line-height: 1.15; /* 줄 간격 */ } /* -------------------------------------------------------------------------- 6) 소개 문장 (

) -------------------------------------------------------------------------- */ .tagline { margin: 0; font-size: clamp(16px, 2.5vw, 18px); color: var(--muted); /* 제목보다 흐리게 해서 위계를 만듭니다 */ line-height: 1.6; }