본문 바로가기
Front-end Developer/CSS

HTML, CSS 사용하여 프로필 만들기(3)

신입IT 2023. 10. 28. 21:07
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

'Front-end Developer/CSS' Related Articles

티스토리툴바