바닥글 및 마지막 터치 · 마틴과 코딩하기

바닥글, 큰 인상을 주는 작은 세부 사항, 최종 점검 등 웹 사이트의 모습을 마무리해.

보여줄게: 바닥글

바닥글은 페이지를 닫어. 일반적으로 더 어둡고 차분하며 맨 아래에 유지돼.

footer {
  background-color: #1f2937;   /* dark gray */
  color: white;
  text-align: center;          /* center the text */
  padding: 24px 16px;
  margin-top: 48px;            /* space away from the content */
}

footer a {
  color: #93c5fd;              /* links in a dark footer need to be light */
}

바닥글에는 웹사이트를 만든 사람, 연도 및 연락처 정보가 포함되어야 해(자유롭게 만들거나 학교의 정보를 사용하해. 웹사이트에 집 주소나 전화번호를 절대 입력하지 마해).

보여줄게: 전문가처럼 보이게 만드는 작은 디테일

거의 아무도 모르는 세 가지 작은 것들이지만 큰 변화를 가져옵니다.

/* 1. Smooth scrolling when clicking a link within the page */
html {
  scroll-behavior: smooth;
}

/* 2. Images zoom in slightly when hovered */
.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

/* 3. ...and make that zoom smooth, not instant */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03)요소를 103% 크기로 늘리고transition”0.2초에 걸쳐 부드럽게 변경해.”라고 말해. 사진 위로 마우스를 가져가세요. 부드러운 작은 리프트가 보이시나요? 이것이 바로 현대 웹사이트가 하는 일야.

네 차례 💪

예제에 따라 바닥글의 스타일을 지정하고(머리글의 색상과 자유롭게 일치) 웹사이트를 만든 사람 + 연도가 포함되어 있는지 확인해.

예제에서 세 가지 프로 세부 정보를 추가해.

**전체 웹사이트를 전체적으로 점검해.** 다음 체크리스트를 살펴보세요.

메뉴는 모든 페이지에서 모든 페이지로 작동해.
모든 이미지가 표시되며alt채워졌어.
창을 전화기 너비에 맞게 줄야. 모든 것이 맞고 옆으로 넘치지 않어.
바닥글에는 집 주소, 전화번호, 전체 학교/학급 정보가 없어(안전!). -<title>모든 페이지에서 의미가 있어.

완전한 바닥글 솔루션(색상 조정)

HTML(모든 페이지에서 동일):

<footer>
  <p>Made by Jake in 2026 · built with my own two hands and HTML</p>
  <p><a href="index.html">Home</a></p>
</footer>

CSS:

footer {
  background-color: #1f2937;
  color: white;
  text-align: center;
  padding: 24px 16px;
  margin-top: 48px;
}

footer a {
  color: #93c5fd;
}

html {
  scroll-behavior: smooth;
}

img {
  transition: transform 0.2s ease;
}

.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

⚠️

**안전 제일:** 다음 강의에서는 웹사이트가 실제 인터넷에 연결되어 누구나 볼 수 있게 돼. 따라서 정확한 집 주소, 전화번호, 이메일, 학급 이름, 또는 귀하 또는 그 안에 있는 사람들이 불편해 하는 사진을 포함해서는 안 돼. 부모님과 함께 홈페이지에 들어가 함께 확인해 보세요.

✅

**직접 확인해:** 웹사이트에는 메뉴가 포함된 헤더, 멋진 열의 콘텐츠, 카드, 사진, 바닥글이 있으며, 해당 항목 위로 마우스를 가져가면 항목이 부드럽게 움직야. 진짜 홈페이지 같네요. 왜냐하면 그것은 하나이기 때문야! 마지막 단계가 남았어. 세상에 알리는 것야.

이번 수업에서 배울 점

바닥글: 어두운 배경, 밝은 텍스트,text-align: center,margin-top. -transition+transform= 프로 웹사이트처럼 부드러운 마이크로 애니메이션.
게시하기 전에 항상 부모님의 눈을 통해 콘텐츠를 다시 확인해. 개인 정보는 인터넷에 속하지 않어.