728x90
3번째 프로필 카드 만들기
오늘도 핀터레스트에서 이미지를 찾아서 비슷하게 만들기 시작
당일에 배운 걸 까먹지않기위해 되도록이면 배운걸 사용할 수 있는 이미지를 선택했다.
[background, opacity, display:flex 등]
HTML코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=
, initial-scale=1.0"
/>
<title>profile_card2</title>
<script
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./profile_card2.css" />
</head>
<body>
<div class="main-box">
<div class="profilebox">
<div class="img-box">
<img src="/복습/짤/짱구.jfif" alt="" />
<p>Dear JJangu</p>
<p>Web Developer</p>
<div class="icon-box">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-linkedin-in"></i>
<i class="fa-brands fa-instagram"></i>
</div>
</div>
</div>
</div>
</body>
</html>
CSS코드
* {
margin: 0px;
padding: 0;
box-sizing: border-box;
}
body {
}
.main-box {
background-image: url(./석양\ 일러스트\ ai\ 무료다운로드\ free\ sunset\ image\ download\ -\ \ Urbanbrush.jfif);
height: 100vh;
/* 전체 덮어쓴다. */
background-size: cover;
/* 반복하지 않는다. */
background-repeat: no-repeat;
/* 포커싱을 중앙으로 */
background-position: center center;
opacity: 0.8;
display: flex;
align-items: center;
justify-content: center;
}
.profilebox {
background-color: rgb(102, 97, 97, 0.6);
border-radius: 0.3rem;
width: 16rem;
height: 23rem;
display: flex;
justify-content: center;
}
.img-box {
text-align: center;
color: white;
}
.img-box > p:nth-child(2) {
margin-top: 1.5rem;
font-weight: bold;
font-size: 1.4rem;
}
.img-box > p:nth-child(3) {
font-size: 0.9rem;
margin-top: 0.3rem;
}
.img-box img {
width: 10rem;
height: 10rem;
border-radius: 50%;
margin-top: 2rem;
}
.icon-box {
display: flex;
justify-content: center;
margin-top: 1.5rem;
line-height: 2.3rem;
}
i {
background-color: rgb(102, 97, 97, 0.6);
width: 2.3rem;
height: 2.3rem;
border-radius: 50%;
border: 1px solid rgb(102, 97, 97, 0.6);
margin: 0 0.2rem;
box-shadow: 2px 2px 1px 1px rgba(12, 12, 12, 0.3);
}
background-color 색상을 rgba로 활용해 봤다. rgba를 활용하여 opacity를 같이 주는 연습을 했다.
이전에 사용하지 않았던 display:flex사용하여 중앙정렬 등 배치를 깔끔하게 할 수 있었다
아이콘에는 box-shadow를 사용하여 좀 더 입체적으로 볼 수 있게끔 만들었다.
앞으로 남은 프로필 2장 파이팅..
728x90
'Front-end Developer > CSS' 카테고리의 다른 글
| HTML, CSS 사용하여 UICARD 만들기 (2) (0) | 2023.10.30 |
|---|---|
| HTML, CSS 사용하여 UICARD 만들기 (2) | 2023.10.29 |
| HTML과 CSS로 프로필 만들기 (0) | 2023.10.27 |
| [CSS] calc() 함수 사용법 (0) | 2023.10.27 |
| CSS 프로필 만들어 보기 (1) | 2023.10.26 |
