📚 2023 10-27 [ 프로필 정보 만들기]
오늘은 조금 다른 디자인의 프로필 정보를 만들어 봤다.
부트캠프 다니면서 이때까지 배운 CSS와 조금 알고 있던 지식의 CSS를 합쳐서 만들었다.
완성되고 확인해 보니 첫날에 만들었던 프로필 디자인보다 쪼금(?) 괜찮아 보였다.
📌 따라 만들 이미지 구하기
먼저 내가 만들 프로필 이미지를 구해준다.
따라 만들 이미지 구하는 건 많은 사이트들이 있으니 편한 데로 이용하면 된다.
나는 핀터레스트에서 이미지를 찾았다. 검색창에 "CSS프로필"이라고 치면 다양한 프로필들이 나오는데
이미지를 캡처해서 따라 만들었다.
요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요.
www.pinterest.co.kr
📌 이미지 캡처 및 코딩하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=
, initial-scale=1.0"
/>
<title>profilecard</title>
<link rel="stylesheet" href="./profile_card.css" />
</head>
<script
src="https://kit.fontawesome.com/6206d712ce.js"
crossorigin="anonymous"
></script>
<body>
<div class="mainbox">
<div class="subbox">
<!-- header-right 고생.. -->
<div class="header-left">
<i class="fa-solid fa-arrow-left"></i>
<div class="header-right">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
</div>
<div class="name_icon_btn">
<img src="./짤/짱구.jfif" alt="" />
<p>CodingJJangu</p>
<p>Designer Developer</p>
<i class="fa-brands fa-html5" style="color: red"></i>
<i class="fa-brands fa-css3-alt" style="color: blue"></i>
<i class="fa-brands fa-js" style="color: rgb(207, 207, 95)"></i>
<i class="fa-brands fa-java"></i>
<div style="overflow: hidden"></div>
<button>Message</button>
<button>Subscribe</button>
</div>
<div class="footer">
<i class="fa-regular fa-heart"> 20.4k</i>
<i class="fa-regular fa-comment"> 14.3k</i>
<i class="fa-solid fa-share"> 12.8k</i>
</div>
</div>
</div>
</body>
</html>
body {
background-color: #767879;
margin: 0px;
box-sizing: border-box;
display: flex;
align-content: center;
height: 100vh;
}
.mainbox {
background-color: #ecf0f3;
width: 33.4375rem;
text-align: center;
padding: 3rem 1.5rem;
margin: auto;
border-radius: 10%;
}
.subbox {
background-color: #ecf0f3;
border-radius: 1rem;
width: 13.5rem;
border: 2px solid none;
margin: 0 auto;
padding: 1.5rem;
box-shadow: 2px 3px 5px 0px rgba(126, 125, 125, 0.8);
}
.header-left {
text-align: start;
display: flex;
justify-content: space-between;
}
.header-right {
text-align: end;
}
.name_icon_btn img {
margin-top: -1.3rem;
width: 5em;
height: 5em;
border-radius: 50%;
border: 10px solid #e5edede1;
box-shadow: 2px 3px 5px 0px rgba(126, 125, 125, 0.8);
}
.name_icon_btn p {
margin: 5px;
}
.name_icon_btn p:nth-child(2) {
font-weight: bold;
}
.name_icon_btn i {
font-size: 1.2rem;
box-shadow: 2px 3px 5px 0px rgba(126, 125, 125, 0.8);
border: 3px solid none;
margin: 0.3rem;
border-radius: 50%;
padding: 0.7rem;
text-align: center;
}
.name_icon_btn button {
background-color: #ecf0f3;
padding: 0.8rem 1rem;
margin: 1rem 0.5rem;
border-radius: 0.5rem;
border: none;
box-shadow: 2px 3px 5px 0px rgba(126, 125, 125, 0.8);
}
.footer {
font-size: 1rem;
display: flex;
}
.footer i {
border-left: 3px solid rgba(126, 125, 125, 0.2); /* 아이콘에 border 적용 */
color: rgba(49, 49, 49, 1);
font-size: 0.7em;
padding-left: 0.5em; /* 아이콘 왼쪽에 간격을 주기 위해 padding을 사용 */
margin: 1em auto 0em auto;
}
.footer i:first-child {
border-left: none; /* 첫 번째 아이콘의 왼쪽에는 border를 적용하지 않음 */
}
.footer i + i {
margin-left: 0.5em; /* 두 번째 이후의 아이콘에 왼쪽에 간격을 주기 위해 margin을 사용 */
}
📌 후기
html, css 배웠지만 이건 언어도 아닌데.. 정말 힘들었다. 이전에 혼자서 연습했던 HTML, CSS는
머릿속에서 리셋된 거 같았다.. 폭풍검색과 설명을 보면서 하나하나씩 맞춰나갔다.
그래도 우여곡절 끝에 어느 정도 마무리가 된 거 같다.
두 번째 프로필을 만들면서 느낀 건데 프로필은 만들기 그나마 쉬운 거 같은데... 홈페이지가 가장 걱정이다. 목표는 프로필 5장 정도만 만들고.. 홈페이지를 도전해 보겠다.
지난번 코딩에서는 픽셀(px) 단위를 정말 많이 썼다.
검색결과 픽셀을 남발하면 정말 좋지 않은 코딩이라고 들었다. 여기서는 픽셀(px)보다는 rem을 많이 사용했다.
단위는 em, rem, %, 다양하게 있는데 코딩을 작성하면서 하나씩 알아가 보도록 하겠다.
현재 내 코딩실력은 한참 부족하지만, 하루하루 노력하다 보면 바뀌지 않겠는가?
그날까지 파이팅이다.
📌 픽셀(px) 남발하지 말 것!
'Front-end Developer > CSS' 카테고리의 다른 글
| HTML, CSS 사용하여 UICARD 만들기 (2) (0) | 2023.10.30 |
|---|---|
| HTML, CSS 사용하여 UICARD 만들기 (2) | 2023.10.29 |
| HTML, CSS 사용하여 프로필 만들기(3) (0) | 2023.10.28 |
| [CSS] calc() 함수 사용법 (0) | 2023.10.27 |
| CSS 프로필 만들어 보기 (1) | 2023.10.26 |
