Mini Project : 프로필 페이지 만들기(CSS:2일차 과제)

📌 프로필 페이지에 CSS 스타일링 추가하기

이번 프로젝트는 1회차 때 만들었던 프로필 페이지를 재활용하여, CSS로 디자인을 개선하는 과정입니다. 3회차 강의의 핵심은 HTML과 외부 스타일 시트를 연결하고, 전체 레이아웃, 배경색, 폰트, 이미지 등을 스타일링함으로써 웹 페이지를 아름답게 꾸미는 것입니다.

---

1. 준비 단계

1. 프로필 페이지 재활용
   • 1회차 때 만들었던 프로필.html을 복사해 3회차 폴더에 저장합니다.
   • 이미지도 같이 복사해 동일 폴더 구조를 유지합니다.
2. CSS 파일 만들기
   • 외부 스타일 시트(예: profile.css)를 생성하고, HTML 문서에 link 태그로 연결합니다.
    
   • rel="stylesheet"를 통해 이것이 스타일 시트임을 명시합니다.

<link rel="stylesheet" href="profile.css">

이전에는 내부 스타일 시트를 사용했지만, 이번에는 외부 스타일 시트를 별도로 만들어 연동하는 점이 핵심입니다.

---

2. 가운데 정렬 & 배경 설정

1. 전체 선택자로 텍스트 정렬
   • 모든 텍스트를 가운데 정렬하기 위해서 전체 선택자(*)를 활용합니다:

* {
  text-align: center;
}

1. • 즉시 페이지가 정리된 느낌이 생깁니다.
2. HTML 태그에 배경 색상 적용
   • 페이지 전체의 배경색을 지정하면, 더욱 통일감 있는 디자인을 구현할 수 있습니다:

html {
  background-color: rgb(210, 180, 140); /* 예시로 어두운 갈색톤 선택 */
}

 

• RGB 색상 코드나 다른 색상 지정 방식을 자유롭게 활용하세요.

1. 바디 레이아웃 조정
   • body에 width: 640px; 등을 지정해 중앙에 콘텐츠를 모을 수 있습니다:

body {
  width: 640px;
  margin: 0 auto; /* 양옆 여백 auto → 가운데 정렬 */
}

 

• 수평선(HR) 등도 너비가 제한되어, 레이아웃이 깔끔해집니다.

---

3. 폰트와 이미지 스타일링

1. 헤더(h1) 폰트 크기 조정

기본보다 큰 제목을 원한다면, 예를 들어:`

h1 {
  font-size: 48px; /* 32px → 48px 상향 */
}​

1. • 다른 폰트, 색상 등도 추가하여 개성 살릴 수 있습니다.
2. 이미지 둥글게 만들기
   • 프로필 사진 등을 원형으로 만들려면:

img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

1. • 사진 크기도 줄이면서 모서리를 둥글려 프로필 아이콘처럼 연출합니다.

3.문단(p) 폰트 크기 확장

• 모든 텍스트가 16px이라면, 이를 조금 키우고 싶을 때 rem 단위를 활용합니다:

p {
  font-size: 1.5rem; /* body의 기본 16px → 24px 반영 */
}

1. • rem은 루트(html) 폰트 크기를 기준으로 배수 계산, 반응형 디자인에 유리합니다.

---

4. 개성 있는 스타일링 & 과제 안내

• 글꼴(Web Font) 교체: 원하는 웹 폰트나 컴퓨터에 설치된 폰트를 font-family로 지정해 보세요.
• 색상 변경: 색상을 자유롭게 변경하여 자신만의 색상 테마를 만들기.
• 레이아웃 조정: width, margin, padding을 다양하게 사용해 공간감을 부여하세요.

추가 실습 아이디어

• CSS 애니메이션 효과로 프로필 사진에 Hover 애니메이션 적용
• box-shadow 등으로 카드형 느낌 연출

과제를 진행하면, 같은 프로필 페이지여도 100명이 만들면 100가지 디자인이 탄생할 것입니다!

 

 

---

✅ 결론

3회차 강의의 마무리 프로젝트에서는 기존 프로필 페이지를 재활용해 CSS 스타일을 입히면서 웹 디자인의 기본기를 다집니다. HTML에 외부 스타일 시트를 연결하고, 가운데 정렬, 배경색, 폰트 크기 조정, 이미지 모서리 둥글게 등 단계별 스타일링을 실습해 보는 것이 핵심 목표입니다.

이후에는 자유로운 디자인을 통해 개성 있는 프로필 페이지를 완성해 보세요.
4회차 강의에서 만나 더 심화된 내용으로 돌아오겠습니다! 🙌