확인한 환경과 범위

Chromium에서 본문의 ‘이번 강의의 전체 파일’ HTML·CSS를 실행하고 결과 화면을 캡처했습니다. 완성 예제는 960px 가로 배치·390px 세로 배치, 가로 넘침 없음, 프로필 이미지 표시와 Tab 키 링크 포커스를 확인했습니다. 실제 이메일 발송은 확인하지 않았습니다.

이 글의 순서 7개 단락

완성한 페이지를 다시 살펴보기

지금까지 만든 자기소개 페이지를 브라우저에서 열어 보세요. 이번 강의에서는 새로운 디자인을 추가하기보다, 방문자가 페이지를 읽고 사용할 때 불편한 곳이 있는지 확인합니다. 발견한 문제는 HTML이나 CSS에서 고친 뒤 브라우저를 새로고침해 다시 확인하세요.

점검할 때는 한 번에 모든 것을 바꾸기보다 문제 하나를 수정하고 결과를 확인하는 편이 원인을 이해하기 쉽습니다.

화면 너비에 따라 배치 확인하기

먼저 브라우저 창을 넓게 열어 프로필 이미지와 소개 글이 의도한 대로 배치되는지 살펴보세요. 그다음 창의 너비를 천천히 줄여 보세요. 앞 강의에서 미디어 쿼리로 정한 너비에 도달하면 프로필 영역이 세로 배치로 바뀌는지도 확인합니다.

좁은 화면에서 특히 다음을 살펴보세요.

  • 페이지 아래쪽에 원하지 않는 가로 스크롤이 생기나요?
  • 이미지나 긴 글이 화면 밖으로 튀어나가나요?
  • 세로로 바뀐 이미지와 소개 글 사이에 충분한 간격이 있나요?

가로 스크롤이 생긴다면 개발자 도구에서 화면보다 넓어진 요소를 찾아보세요. 고정 너비를 지정한 이미지나 영역이 원인일 수 있습니다. 예를 들어 이미지에 아래 스타일을 적용하면 이미지가 부모 영역보다 넓어지지 않도록 제한할 수 있습니다.

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

다른 요소에도 고정 너비가 있다면 해당 값과 안쪽 여백을 함께 살펴보세요. 수정 후에는 좁은 화면뿐 아니라 넓은 화면에서도 의도한 크기와 배치가 유지되는지 확인합니다.

글자와 간격 확인하기

제목, 본문, 링크를 차례로 읽어 보세요. 글자색이 배경색과 비슷해 흐리게 보이는 부분이 있다면 색상을 조정합니다. 링크는 주변 글과 구분되는지도 확인하세요.

문단의 줄이 너무 붙어 있거나 영역끼리 너무 가까우면 CSS의 line-height, padding, margin, gap을 살펴보세요. 반대로 여백이 지나치게 커서 내용의 관계가 끊겨 보이는 곳은 간격을 줄여 보세요. 넓은 화면과 좁은 화면에서 모두 다시 읽어 보며 조정합니다.

이미지와 링크 확인하기

프로필 이미지가 표시되는지 확인하세요. 보이지 않는다면 HTML의 src에 적은 파일 이름과 경로가 실제 이미지 파일의 위치와 일치하는지 살펴보세요. 이미지가 표시되지 않을 때를 위해 이미지의 alt 속성에도 내용을 설명하는 문구가 있는지 확인합니다.

페이지의 링크를 직접 눌러 의도한 위치나 주소로 이동하는지 확인하세요. 이동이 끝나면 브라우저의 뒤로 가기로 페이지에 돌아와 나머지 링크도 살펴봅니다. 잘못된 링크가 있다면 HTML의 href를 수정한 뒤 다시 확인하세요.

연락 양식이 있다면 입력란과 버튼이 화면에서 잘 보이는지도 살펴보세요. 양식의 확인 문구 동작은 별도의 JavaScript가 연결되어 있을 때 확인할 수 있으며, CSS 실습을 마치는 데 필수는 아닙니다.

직접 점검하고 마무리하기

다음 순서로 자신의 페이지를 점검해 보세요.

  1. 넓은 창과 좁은 창에서 프로필 배치와 가로 스크롤을 확인합니다.
  2. 제목, 본문, 링크의 색상과 문단 및 영역 사이의 간격을 확인합니다.
  3. 이미지가 표시되는지, 각 링크가 올바른 곳으로 이동하는지 확인합니다.
  4. 발견한 문제를 수정하고 브라우저를 새로고침해 두 화면 너비에서 다시 확인합니다.
  5. 수정한 HTML과 CSS 파일을 저장합니다. 이미지 파일을 사용하는 경우 함께 보관하세요.

점검을 마쳤다면 외부 CSS 연결부터 색상, 박스 모델, Flexbox, 반응형 배치까지 적용한 자기소개 페이지가 완성됩니다. 이후 소개 내용이나 색상을 바꾸더라도 같은 순서로 다시 확인해 보세요.

이번 강의의 전체 파일

앞 강의의 파일이 없다면 아래 파일로 시작해도 됩니다. 6강 전체 예제 내려받기에서 06 폴더를 열면 이 단계의 파일을 확인할 수 있습니다. 프로필 일러스트는 함께 들어 있는 profile.svg를 사용합니다. 내 사진으로 바꿔도 됩니다.

완성 화면 열기 · CSS 파일 보기

index.html 전체 보기 
<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>지민의 자기소개</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header>
      <h1>안녕하세요, 지민입니다</h1>
      <p>작은 웹페이지를 만들며 배우는 기록입니다.</p>
    </header>
    <section class="intro profile">
      <img class="profile-image" src="profile.svg" width="240" height="240" alt="지민의 프로필을 나타내는 예제 일러스트">
      <div class="profile-text">
      <h2>저를 소개합니다</h2>
      <p>저는 웹페이지를 만드는 것을 배우고 있습니다.</p>
      <p>오늘의 목표는 CSS로 읽기 좋은 자기소개 페이지를 완성하는 것입니다.</p>
      </div>
    </section>
    <section class="interests">
      <h2>관심사</h2>
      <ul>
        <li>웹 만들기</li>
        <li>산책과 사진</li>
        <li>배운 내용을 짧게 기록하기</li>
      </ul>
    </section>
    <footer id="contact">
      <a href="mailto:hello@example.com">연락하기</a>
      <p>예제용 주소입니다. 내 페이지에서는 실제 연락 방법으로 바꾸세요.</p>
    </footer>
  </main>
</body>
</html>
style.css 전체 보기 
body {
  background-color: #f5f7fa;
  color: #1f2937;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  color: #173b6c;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  color: #173b6c;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.intro {
  background-color: lightyellow;
}

.intro, .interests {
  padding: 24px;
  border: 1px solid #b8c5d6;
  margin-bottom: 24px;
}

.profile {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-image {
  width: 160px;
  height: auto;
}

* {
  box-sizing: border-box;
}

main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

.profile img {
  width: 200px;
  max-width: 100%;
  height: auto;
}

.profile-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  main {
    padding: 16px;
  }

  .profile {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 마지막 점검에서 더한 마무리 스타일 */
.intro, .interests {
  background-color: #fff;
  border-radius: 12px;
}

.profile-image {
  border-radius: 16px;
}

a {
  color: #173b6c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 3px solid #173b6c;
  outline-offset: 4px;
}

실행으로 본 결과

넓고 좁은 화면에서 넘침을 점검하고 카드의 배경·모서리와 링크 표시를 마무리했습니다.

완성 페이지 점검과 수정 — 전체 HTML·CSS 예제의 실제 화면

마지막 예제의 흰 배경·둥근 모서리와 링크 밑줄은 전체 CSS 끝의 마무리 스타일입니다. Tab 키로 연락 링크에 이동하면 포커스 테두리를 확인할 수 있습니다. 연락하기는 메일 앱을 여는 예제이며 실제 메일 발송이나 수신은 확인하지 않았습니다.

CHECK THE SOURCE

참고한 공식 문서

기능 설명은 위 문서를 참고했으며, 예제의 입력·결과와 한계는 본문에 따로 기록했습니다.

한 줄씩 이해하고, 차곡차곡 기록합니다.이 글의 오류 제보하기 ↗