개인 프로필 카드 인터페이스

사진을 표시하는 세련된 프로필 카드를 만들어 HTML과 CSS를 배울 수 있는 간단한 초보자 친화적인 프로젝트입니다. 이름, 역할, 소셜 미디어 링크

---

? 사업개요

이 프로젝트에서는 다음 방법을 알려드립니다.

• 기본 HTML 문서를 구성합니다.
• CSS를 적용하여 콘텐츠 스타일을 지정하세요.
• 둥근 모서리와 그림자를 사용하여 간단한 카드 레이아웃을 만듭니다.
• 이미지, 텍스트, 링크를 추가하고 스타일을 지정하세요.
• 요소 정렬에는 Flexbox를 사용하세요.

---

? 파일 구조

프로젝트에는 두 개의 파일이 있습니다:

personal-profile_card/
│-- index.html      ← The HTML structure
└-- styles.css      ← The CSS styling

---

? HTML 파일(index.html)

이 파일에는 웹페이지의 구조(또는 뼈대)가 포함되어 있습니다. 그 모습은 다음과 같습니다.

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal Profile Card</title>
  <link rel="stylesheet" href="styles.css">


  <div>



<h3>
  
  
  <strong>Explanation of Key Elements</strong>
</h3>

<ol>
<li>
<p><strong>Profile Card Container</strong> (</p>
<div>
<br>
A box that holds the image, name, role, and social links.
<li><p><strong>Image Tag</strong> (<img  alt="개인 프로필 카드 인터페이스" >)<br><br>
Displays the profile picture.</p></li>
<li>
<p><strong>Headings and Paragraph</strong>  </p>

<ul>
<li>
<h2> for the user's name.
</h2>
</li>
<li>
<p> for the user's role.</p>
</li>
</ul>
</li>
<li><p><strong>Links</strong><br><br>
<a> tags for social media links.</a></p></li>



<hr>

<h2>
  
  
  ? <strong>CSS File (styles.css)</strong>
</h2>

<p>This file adds styling to your HTML. Here's what it looks like:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  background-color: #f0f8ff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.profile-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.profile-name {
  font-size: 1.5em;
  margin: 10px 0 5px;
  color: #333;
}

.profile-role {
  font-size: 1em;
  color: #777;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-link {
  text-decoration: none;
  color: #008cba;
  font-weight: bold;
  transition: color 0.3s ease;
}

.social-link:hover {
  color: #005f73;
}

주요 스타일 설명

1. 배경 및 센터링:
   
   본문은 Flexbox를 사용하여 프로필 카드를 중앙에 배치하고 연한 파란색 배경색을 설정합니다.

2. 프로필 카드 스타일링:

   • background-color : 흰색 배경을 설정합니다.
   • border-radius: 모서리를 둥글게 만듭니다.
   • box-shadow: 은은한 그림자를 더해 깊이감을 줍니다.

3. 이미지 스타일링:

   • 너비 및 높이: 이미지 크기를 설정합니다.
   • border-radius: 50%: 이미지를 원형으로 만듭니다.

4. 텍스트 스타일 지정:
   
   다양한 글꼴 크기와 색상으로 이름과 역할의 스타일을 지정합니다.

5. 소셜 링크:

   • Flexbox를 사용하여 간격을 조정했습니다.
   • 링크 색상을 변경하는 호버 효과.

---

? 프로젝트 활용 방법

1. 파일 다운로드:
   
   index.html 및 styles.css 파일을 다운로드하거나 복사하세요.

2. HTML 파일 열기:
   
   index.html 파일을 두 번 클릭하여 브라우저에서 엽니다.

3. 콘텐츠 편집:

   • 이름과 역할을 변경하세요.
   • 이미지 URL을 자신의 프로필 사진으로 바꾸세요.
   • 소셜 미디어 링크를 업데이트하세요.

4. CSS 실험:
   
   styles.css에서 색상, 글꼴, 크기를 변경하여 디자인에 어떤 영향을 미치는지 확인해 보세요!

---

? 학습 내용

• HTML 레이아웃을 만드는 방법.
• CSS를 사용하여 요소의 스타일을 지정하는 방법
• Flexbox를 사용하여 정렬하는 방법
• 상호작용을 위해 호버 효과를 추가하는 방법

---

? 다음 단계

• 더 많은 기능 추가: 소개 섹션이나 연락처 버튼을 포함합니다.
• 반응형으로 만들기: 모바일 장치에서 카드를 보기 좋게 만드는 방법을 알아보세요.
• 애니메이션 추가: CSS 애니메이션을 사용하여 카드를 보다 상호작용적으로 만듭니다.

---

즐거운 코딩하세요! ??