박스 크기와 이미지를 설정하도록 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>명함</title>
<link rel="stylesheet" href="public/Photo.css" />
</head>
<body>
<div class="card">
<div class="profile">
<img src="public/KakaoTalk_Lyonphoto.jpg" alt="" />
</div>
<div class="name">홍길동</div>
<div class="job-title">Student</div>
<div class="contact-info">
전화번호: 123-456-7890<br />
이메일: abc@dfg.com
</div>
</div>
</div>
</body>
</html>
css
.card {
width: 500px;
height: 250px;
background-color: white;
border: 1px solid black;
border-radius: 2rem;
box-shadow: 0 0 5px 1px gray;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.5;
text-align: center;
}
.name {
font-weight: bold;
font-size: 18px;
margin-bottom: 20px;
}
.job-title {
font-style: italic;
margin-bottom: 20px;
}
.contact-info {
margin-bottom: 10px;
}
.profile {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
}
.profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
'블록체인 sw개발자' 카테고리의 다른 글
| [html] Flex와 박스(box)이미지 활용 (0) | 2023.06.26 |
|---|---|
| [HTML] 사진,지도 삽입 (0) | 2023.06.26 |
| [HTML] Slide (0) | 2023.06.21 |
| [HTML] Keyframes, transition, transform (0) | 2023.06.20 |
| [HTML] 이미지 정렬 (0) | 2023.06.19 |
