개인 프로필 카드 인터페이스-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

Patricia Arquette

Dec 17, 2024 am 01:56 AM

Personal Profile Card Interface

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

? 사업개요

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

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

? 파일 구조

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

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

로그인 후 복사

? HTML 파일(index.html)

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

<!DOCTYPE html>
<html lang="en">
<head>
  <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">
</head>
<body>
  <div>



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

<ol>
<li><p><strong>Profile Card Container</strong> (<div><br>
A box that holds the image, name, role, and social links.</p></li>
<li><p><strong>Image Tag</strong> (<img>)<br><br>
Displays the profile picture.

로그인 후 복사

Headings and Paragraph

for the user's name.
for the user's role.

Links

tags for social media links.

? CSS File (styles.css)

This file adds styling to your HTML. Here's what it looks like:

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;
}

로그인 후 복사

주요 스타일 설명

배경 및 센터링:

본문은 Flexbox를 사용하여 프로필 카드를 중앙에 배치하고 연한 파란색 배경색을 설정합니다.
프로필 카드 스타일링:
- background-color : 흰색 배경을 설정합니다.
- border-radius: 모서리를 둥글게 만듭니다.
- box-shadow: 은은한 그림자를 더해 깊이감을 줍니다.
이미지 스타일링:
- 너비 및 높이: 이미지 크기를 설정합니다.
- border-radius: 50%: 이미지를 원형으로 만듭니다.
텍스트 스타일 지정:

다양한 글꼴 크기와 색상으로 이름과 역할의 스타일을 지정합니다.
소셜 링크:
- Flexbox를 사용하여 간격을 조정했습니다.
- 링크 색상을 변경하는 호버 효과.

? 프로젝트 활용 방법

파일 다운로드:

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

index.html 파일을 두 번 클릭하여 브라우저에서 엽니다.
콘텐츠 편집:
- 이름과 역할을 변경하세요.
- 이미지 URL을 자신의 프로필 사진으로 바꾸세요.
- 소셜 미디어 링크를 업데이트하세요.
CSS 실험:

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