선발대

[스파르타] 웹프로젝트1: 카카오톡 프로필 화면 만들기 본문

스파르타코딩클럽/활동 내용

[스파르타] 웹프로젝트1: 카카오톡 프로필 화면 만들기

신선한 스타트 2021. 12. 23. 10:05
소개, 결과물

 

내가 만든 완성작

 

  • 오늘 실습은 em, rem, % 등 상대적 수치는 사용하지 않고, px 만 사용할 것.
  • 모든 요소를 감싸는 전체 div는 가로 480px, 세로 800px로 진행할 것.
  • position: absolute 는 딱 하나의 요소에만 사용할 것.
  • 나와의 채팅, 프로필 관리, 카카오스토리 부분은 display: flex 를 이용해서 배치할 것.
  • 부트스트랩은 사용 금지임.
  • 요소들의 상대적 위치만 동일하다면, 그 외 요소의 px는 자유롭게 정하도록.

 

내가 작성한 코드, 모범답안

 

더보기 
<!--내가 작성한 코드: HTML 파일 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Title</title>
    <link rel="stylesheet" href="css/profile.css"/>
</head>
<body>
<div class="container">
    <div class="color-box">
        <div class="line">________</div>
        <div class="profile-message">너부리는 내일 나한테 까만 돌멩이를 줄거야!</div>
    </div>
    <img class="profile-photo" src="img/bono.jpg" alt="profile image">
    <div class="white-box">
        <h3>보노보노</h3>
        <div class="icons">
            <div class="chat-icon">
                <img class="icon" src="img/chat.png" alt="chat-icon">
                <h4>나와의 채팅</h4>
            </div>
            <div class="profile-icon">
                <img class="icon" src="img/profile.png" alt="chat-icon">
                <h4>프로필 관리</h4>
            </div>
            <div class="story-icon">
                <img class="icon" src="img/story.png" alt="chat-icon">
                <h4>카카오스토리</h4>
            </div>
        </div>
    </div>
</div>
</body>
</html>

 

/* 내가 작성한 코드: CSS 파일 */

.container {
    width: 480px;
    height: 800px;
    border: 1px solid lightblue;
    position: relative;
    margin: 50px auto;
}

.color-box {
    /*width: 480px;*/
    height: 500px;
    background-color: steelblue;
    display: flex;
    flex-direction: column; /* 세로로 세우겠다 */
    align-items: center; /* 라인이랑 상메 가로 가운데 정렬 */
    justify-content: center; /* 세로 가운데 위치하기 */
    padding: 0 20px;
    text-align: center;
}

.line {
    color: white;
    margin-bottom: 10px;
}

.profile-message {
    color: white;
    font-size: 19px;
}

.profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    top: 425px;
    left: 165px;
    object-fit: cover;
}

.white-box {
    height: 300px;
    display: flex;
    flex-direction: column; /* 세로로 세우겠다 */
    align-items: center; /* 가로 가운데 정렬 */
    justify-content: space-around; /*  */
    padding: 60px 100px;
}

.icons {
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 50px;
}

.icon {
    width: 50px;
    height: 50px;
}

.chat-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.profile-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.story-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

 

<!--모범답안: HTML-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kakao Profile</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div id="main-container">
        <div id="text-wrapper">
            <div id="line">
            <hr>
            </div>
            <p>안녕하세요 저는 또치입니다! 저는 아프리카에서 온 암컷 타조예요. 원래는 라스베가스 서커스단에서 일했는데, 너무 힘들어서 관두고 둘리 일당에 합류했답니다!</p>
        </div>
        <div id="image-wrapper">
            <img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfX_g62mUIl9aR3nLRdX8Bgk-n3G1Alw-hePu-UWymRmqFXHZK">
            <p><strong>또치</strong></p>
        </div>
        <div id="icons-container">
            <div class="icon-wrapper">
                <img class="icon" src="나와의 채팅.png">
                <p class="small-text"><strong>나와의 채팅</strong></p>
            </div>
            <div class="icon-wrapper">
                <img class="icon" src="프로필관리.png">
                <p class="small-text"><strong>프로필 관리</strong></p>
            </div>
            <div class="icon-wrapper">
                <img class="icon" src="카스.png">
                <p class="small-text"><strong>카카오스토리</strong></p>
            </div>
        </div>
    </div>
</body>
</html>

 

 

/* 모범답안: CSS */

#main-container {
  text-align: center;
  width: 480px;
  height: 800px;
  background-color: rgb(255, 166, 166, 1);
  position: relative;
  border-style: solid;
  border-color: rgb(187, 187, 187);
  border-width: 1px;
  margin: 0 auto;
}

#text-wrapper {
  width: 350px;
  margin: 0 auto;
  margin-top: 150px;
  color: white;
  font-size: 18px;
}

#line {
  width: 35px;
  margin: 0 auto;
}

#icons-container {
  width: 480px;
  height: 300px;
  background-color: rgba(255, 255, 255, 1);
  position: absolute;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-wrapper {
  margin-top: 100px;
  width: 100px;
  height: 100px;
}

.icon {
  width: 54px;
  height: 54px;
}

.small-text {
  font-size: 12px;
}

#image-wrapper {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  margin-top: 170px;
  font-size: 20px;
}

#image {
  width: 145px;
  height: 145px;
  border-radius: 50%;
}

 

후기

 

먼저 바로 작성하기 전에, html에서 <div>로 나눌 영역들을 구분해놓았다. (이름표(Class)가 붙어야 하는 곳들)

전체는 프로필 사진을 기준으로 크게 3가지 부분으로 나눴다. (상단, 프로필 사진, 하단)

 

  1. 상단: 라인, 상태메시지
  2. 중간: 프로필 사진
  3. 하단: 사용자명, 아이콘 3개(아이콘 이미지, 아이콘 설명)

 

모범답안과 비교하니 설정한 구역이 조금씩 달랐다.

전체(main-container)안에 3가지 구역이 구성되었다. 

 

  1. text_wrapper: line, <p>
  2. image_wrapper: image, <p>
  3. icons-container: icon-wrapper: icon, small-text

 

  • 상단 부분은 margin: 0 auto; 로 화면 중앙에 위치하도록 했다.
  • wrapper 둘 다 position: relatvie; 로 설정했다.
  • text_wrapper의 구역도 크기를 한 뒤에 margin: 0 auto; 로 중앙에 위치하게 했다.
  • image-wrapper 도 z-index: 1;로 설정해서 중앙에 올 수 있도록 했다.
  • icons-container 은 position: absolute;로 설정했다. display: flex; 등을 이용해서 중앙에 위치했다.

 

초반에 html의 배치만 잘 잡으면 이후 CSS를 적용할 때 좀 더 수월해진다. 이번 과제는 어떤 범위까지 같은 div로 묶어도 될지 감이 잘 안 잡혀서 나중에 CSS를 작성하면서 수정하는 경우가 많았다. 좀 더 많은 예시를 보고 구현하면서 경험을 쌓아야 겠다. 

 

참조

 

'스파르타코딩클럽 > 활동 내용' 카테고리의 다른 글

[스파르타] 항해 플러스 후기  (0) 2023.08.22
[스파르타] 웹 프로젝트2: 인스타그램 모바일 화면 만들기  (0) 2021.12.24
[스파르타] 파이썬 프로젝트3: 턴제 RPG 게임 만들기 (심화)  (0) 2021.12.22
[스파르타] 파이썬 프로젝트3: class 연습문제 (기초)  (0) 2021.12.21
[스파르타] 파이썬 프로젝트1: 업다운 게임  (0) 2021.12.20
'스파르타코딩클럽/활동 내용' Related Articles more
Comments