본문 바로가기
개발 일지/TIL

[ HTML ] 미니프로젝트 S.A 및 flex-direction

by CODESIGN 2022. 11. 1.

오늘 한 것

개인 소개 페이지 만들기

 

 

미니 프로젝트 주제

 

팀을 소개할 수 있는 "팀 소개 웹페이지" 만들기

팀원: 5명

 

 

 

웹 개발을 위한 필수 요소

  • 팀원들의 정보를 보여줄 수 있는 페이지를 구현
  • 페이지별로 방명록을 입력받을 수 있는 백엔드 만들기 (JS, Flask, MongoDB)
  • DB에 저장된 정보들을 사람들에게 보여줄 수 있는 페이지 만들기 (HTML, css, JS, Flask, MongoDB)

 

 

필수 포함 내용

  • 팀과 자신에 대한 설명 및 MBTI
  • 객관적으로 살펴본 자신의 장점
  • 협업을 하는 과정에서의 자신의 스타일
  • 우리 팀만의 특징과 추구하는 궁극적인 목표
  • 우리 팀의 약속
  • 팀원들의 블로그 주소

 

 

팀 소개 웹페이지 아웃라인

 

내일배움캠프 B-10조 미니 프로젝트 S.A

떡잎반팀의 소개와 목표와 약속 소개팀원 개인별 소개팀을 응원하는 댓글 남기기

velog.io

 

 

 

개인 소개 페이지 아웃라인

 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="main.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 첫메인페이지 -->
    <section></section>
    <!-- 팀목표 약속페이지-->
    <section></section>
    <!-- 개인소개페이지 -->
    <section class="members">
      <div class="member left">
        <div class="member_img member_img_left">
          <img src="./img/panda.png" alt="" />
        </div>
        <div class="member_description">
          <p class="memeber_name">홍길동</p>
          <p class="member_information">
            개일 적인 소개 Lorem ipsum dolor sit amet. Et asperiores sequi et
            earum voluptas non cupiditate porro et nihil dolor est iure
            pariatur. Ex obcaecati eius qui quas incidunt in perspiciatis fuga.
          </p>
        </div>
      </div>
      <div class="member right">
        <div class="member_description">
          <p class="memeber_name">홍길동</p>
          <p class="member_information">
            개일 적인 소개 Lorem ipsum dolor sit amet. Et asperiores sequi et
            earum voluptas non cupiditate porro et nihil dolor est iure
            pariatur. Ex obcaecati eius qui quas incidunt in perspiciatis fuga.
          </p>
        </div>
        <div class="member_img member_img_right">
          <img src="./img/dog.png" alt="" />
        </div>
      </div>
      <div class="member left">
        <div class="member_img member_img_left">
          <img src="./img/cow.png" alt="" />
        </div>
        <div class="member_description">
          <p class="memeber_name">홍길동</p>
          <p class="member_information">
            개일 적인 소개 Lorem ipsum dolor sit amet. Et asperiores sequi et
            earum voluptas non cupiditate porro et nihil dolor est iure
            pariatur. Ex obcaecati eius qui quas incidunt in perspiciatis fuga.
          </p>
        </div>
      </div>
      <div class="member right">
        <div class="member_description">
          <p class="memeber_name">홍길동</p>
          <p class="member_information">
            개일 적인 소개 Lorem ipsum dolor sit amet. Et asperiores sequi et
            earum voluptas non cupiditate porro et nihil dolor est iure
            pariatur. Ex obcaecati eius qui quas incidunt in perspiciatis fuga.
          </p>
        </div>
        <div class="member_img member_img_right">
          <img src="./img/pig.png" alt="" />
        </div>
      </div>
      <div class="member left">
        <div class="member_img member_img_left">
          <img src="./img/chicken.png" alt="" />
        </div>
        <div class="member_description">
          <p class="memeber_name">홍길동</p>
          <p class="member_information">
            개일 적인 소개 Lorem ipsum dolor sit amet. Et asperiores sequi et
            earum voluptas non cupiditate porro et nihil dolor est iure
            pariatur. Ex obcaecati eius qui quas incidunt in perspiciatis fuga.
          </p>
        </div>
      </div>
    </section>
    <!-- 응원댓글 페이지 -->
    <section></section>
    <!-- 개인블로그 페이지 -->
    <footer></footer>
    <script src="main.js"></script>
  </body>
</html>

 

 

CSS

@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@200;600&display=swap');

.members{
  padding: 4rem
}

.member {
  padding: 2.2rem;
  outline: 2px solid #F1C40F;
  max-width: 70%;
  margin: 0 2rem 3rem 2rem;
  display: flex;
  border-radius: 30px;
  align-items: center;
  box-shadow: 5px 5px 5px 5px gray;
  transition: 1s;
}

.member:hover {
  transform: scale(1.1);
}

.left {
  float: left;
  box-sizing: border-box;
}

.right {
  float: right;
  box-sizing: border-box;
}

.member_img {
  background-color: #F1C40F;
  border-radius: 100px;
  padding: 18px
}
.member_img_left {
  margin-right: 3rem;
  
}

.member_img_right {
  margin-left: 3rem;
}

.member_img img{
  width: 12rem
}

.memeber_name {
  font-family: 'Hahmlet', serif;
  font-weight: 600;
  font-size: 20px;
}

.member_information {
  font-family: 'Hahmlet', serif;
  font-weight: 200;
  font-size: 15px;
}

@media (max-width: 950px) {
  .member {
    margin: 2rem;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  .right {
    display:flex;
    flex-direction: column-reverse;
  }

  .member_img img{
    width: 8rem
  }

  .member_img {
    border-radius: 100px;
    padding: 18px
  }

  .member_description {
    text-align: center;
  }
  
  .member_img_left {
    margin-right: 0rem;
    
  }
  
  .member_img_right {
    margin-left: 0rem;
  }
}

 

 

결과물

 

 

느낀 점

왼쪽 포스터는 사진 + 내용 순서이고 오른쪽은 내용 + 사진 순이다. 이때 반응형을 적용해 휴대폰 넓이에서 볼 경우 세로로 나열되게 설정했다. 그랬더니 사진 -> 내용 -> 내용  -> 사진 순서가 되어버렸다. 원래는 모든 포스터가 사진 -> 내용 순으로 가게 하고 싶었다. 그래서 css에 아래와 같이 적용해주어 문제를 해결하였다.

flex-direction: column-reverse;

 

 

 

'개발 일지 > TIL' 카테고리의 다른 글

[ 스파르타 / TIL ] 내일배움캠프 #6  (0) 2022.11.07
[ 스파르타 / TIL ] 내일배움캠프 #5  (1) 2022.11.04
[ HTML ] box-sizing 및 웹개발 종합반 강의 정리  (0) 2022.11.03
[ HTML ] CSS - Button  (0) 2022.11.02
[ HTML ] 미니프로젝트 계획  (1) 2022.10.31

관련글

댓글

티스토리툴바