HTML/CSS 6.1 · 6부. 종합 프로젝트

소개 페이지

사진·소개글·연락처를 한 장에 담습니다. 미디어 쿼리 없이 만듭니다.

예상 학습 시간 20분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 중급

개념 설명

완성본을 먼저 봅니다

여기서부터는 새 문법이 없습니다. 앞 다섯 부에서 배운 것을 어떤 차례로 조립하는가가 배울 거리입니다.

첫 프로젝트는 소개 페이지입니다. 사진 · 소개글 · 할 줄 아는 것 · 연락처를 한 장에 담습니다.

<main class="wrap">
  <header class="profile">
    <img class="avatar" src="/learn/htmlcss/sample-logo.png" alt="">
    <div>
      <h1>홍길동</h1>
      <p class="lead">웹 화면을 만드는 일을 배우고 있습니다.</p>
    </div>
  </header>

  <section>
    <h2>할 줄 아는 것</h2>
    <ul class="tags">
      <li>HTML</li>
      <li>CSS</li>
      <li>반응형 배치</li>
    </ul>
  </section>

  <section>
    <h2>연락처</h2>
    <dl class="info">
      <dt>전자 메일</dt>
      <dd>hong@example.com</dd>
      <dt>사는 곳</dt>
      <dd>서울</dd>
    </dl>
  </section>
</main>

* { box-sizing: border-box; }

:root {
  --brand: #6e56cf;
  --ink: #3b4252;
  --line: #e5e0f5;
  --gap: 16px;
}

body {
  font-family: "Pretendard", "맑은 고딕", sans-serif;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 24px 16px; }

/* 머리 — 사진과 글을 나란히 */
.profile {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--gap);
  align-items: center;
  padding-bottom: var(--gap);
  border-bottom: 1px solid var(--line);
}

.avatar {
  width: 88px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  background: #f4f2fb;
}

h1 { margin: 0; font-size: clamp(20px, 5vw, 28px); }
.lead { margin: 4px 0 0; color: #5b6272; }
h2 { font-size: 1.05rem; margin: 24px 0 8px; }

/* 태그 목록 */
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tags li {
  background: #f4f2fb;
  color: var(--brand);
  font-size: 0.9rem;
  padding: 4px 12px;
  border-radius: 12px;
}

/* 연락처 — 이름과 값을 두 칸으로 */
.info {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 12px;
  margin: 0;
}
.info dt { color: #686c78; font-size: 0.9rem; }
.info dd { margin: 0; }

상세 사용법

어떤 차례로 만들었나

마크업을 먼저 다 적습니다. 스타일 없이도 읽히는 문서여야 합니다(1.7). 이 상태에서 Tab 으로 다녀 보면 짜임이 맞는지 알 수 있습니다.
바탕을 정합니다. box-sizing · 글꼴 · 줄 간격 · 본문 폭. 화면마다 같은 네 줄입니다.
이름을 뽑습니다. 색과 간격을 :root 에 둡니다(4.4).
덩어리별로 스타일을 얹습니다. 머리 · 태그 · 연락처 차례로, 한 덩어리를 끝내고 다음으로 갑니다(5.3).
좁은 화면에서 확인합니다. 320px 에서 넘치지 않는지 봅니다(5.4).

마크업을 먼저 끝내는 것이 중요합니다. 스타일을 얹어 가며 마크업을 고치면 선택자가 계속 어긋납니다.

상세 사용법

여기서 고른 것들

자리	고른 것	까닭
머리	Grid `88px 1fr`	사진은 고정, 글은 남는 자리 전부입니다.
태그 목록	Flexbox + `wrap`	개수가 정해지지 않아 줄이 바뀌어야 합니다.
연락처	`dl` + Grid	이름과 값의 짝이라 `dl` 이 맞습니다(1.4).
제목 크기	`clamp`	중단점 없이 화면에 맞춥니다(4.2).

미디어 쿼리가 하나도 없습니다. max-width · clamp · flex-wrap 만으로 좁은 화면까지 됩니다. 4.1 에서 "중단점은 적을수록 좋다" 고 한 것이 이런 뜻입니다.

흔한 실수

세 가지

사진에 border-radius: 50% 만 줍니다. 원본이 정사각형이 아니면 타원이 됩니다. aspect-ratio 와 object-fit 을 함께 주십시오(4.3).
목록의 점과 여백을 지우지 않습니다. ul 에는 기본 padding-left 가 있어 왼쪽이 밀립니다.
연락처를 표로 만듭니다. 이름과 값의 짝은 dl 입니다. 표는 행과 열이 모두 뜻을 가질 때 씁니다(1.4).

실습 문제

직접 해보기

1. 좁은 화면에서 세로로 쌓기 난이도 중

화면이 420px 아래면 사진과 글을 세로로 쌓고 가운데 정렬하십시오.

열을 하나로 만들면 저절로 쌓입니다. 가운데 정렬은 justify-items 와 text-align 입니다.

@media (max-width: 419px) { .profile { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

2. 내 소개 페이지 만들기 난이도 중

위 코드를 바탕으로 자기 소개 페이지를 만드십시오. 파일로 저장해 브라우저로 열어 보십시오(1.2). 색과 글꼴을 바꿔 자기 것으로 만드는 것이 이 실습의 내용입니다.

요약

정리

마크업을 먼저 끝내고 스타일을 얹습니다.
바탕 → 이름 → 덩어리 → 좁은 화면 확인 차례로 만듭니다.
둥근 사진은 aspect-ratio · object-fit · border-radius 셋을 함께 씁니다.
미디어 쿼리 없이도 되는 화면이 많습니다.