[TIL] 2022.04.20 (팀 소개 웹 페이지 - 미니 프로젝트1)

그간 배운 지식들을 토대로 HTML과 CSS를 이용하여 본인을 포함하여 총 4명의 팀원분들과 함께 소개 웹 페이지라는 미니 프로젝트를 진행하였다.

 

우선 본격적인 코드 작성 이전에 카카오 오븐이라는 프로젝트 대시보드를 통하여 메인 페이지의 기본적인 틀(Mockup)을 만들어보았다.

 

총 4명 개개인이 Mockup을 만들어보고 그것들을 종합하여 4명 모두 만족하는 틀을 만들어 두었다.

 

4명의 의견을 종합하여 만들어진 대략적인 Project Mockup

 

우선 상단에는 팀의 이름을 적어주도록 하였고, 그라데이션 효과를 줘보기로 정하였다.

그리고 바로 밑 중단에는 팀 이름에 걸맞은 대표 사진을 걸어두었고, 우측에 우리 팀의 소개 내용을 간략하게 적으려고 했다.

마지막으로 맨 밑 하단에는 총 4명의 팀원들의 소개를 하기 위해 각 팀원들의 사진을 넣어주고, 사진 내 하단에 각자의 이름과 같은 텍스트를 넣어주기로 정하였다.

 

여기서 우리 팀은 각 개인이 Mockup을 보고 코드를 작성한 뒤 모두의 의견을 만족하는 프로그램을 만드려고 하였으나, 그렇게 진행한 결과 시간이 오래 걸리고 그렇게 효율적이지가 않았다.

 

각자 역할을 분담하여 진행하였어야 했는데, 나의 불찰로 인해 시간이 지체되었다고 생각한다.

그래도 팀원분들의 빠른 진행 속도로 인하여 각 개인이 만들어 본 메인 페이지 코드를 받았고, 이 코드들을 종합하여 팀이 생각하기에 꽤 괜찮다고 생각하는 웹 화면이 나왔다.

 

이후 각 팀원들은 각자가 맡는 역할을 분담하여 그것에 대해 공부하여 만들어보기로 정하였다.

 

그중 나는 팀원들의 html, css 코드를 받아 종합하고, 추가적인 배치를 하기 위해 프론트엔드 쪽 역할을 맡아 프로젝트를 진행하였다.

 

1

2

 

Member 하단의 사진들은 각 개인의 사진을 넣어두었기에 모자이크 처리를 했습니다.

그래도 넣어 둔 코드들이 정상적으로 동작하는지 확인하기 위해 다른 사진을 사용했다.

 

메인 타이틀

css

/* 맨 위 상단 */
.main_title {
    /* 가로, 세로 크기 및 바깥 여백 */
    width: 80%;
    height: 270px;
    margin: auto auto 50px auto;

    /* 백그라운드 사진 및 명암, 위치 설정 */
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/static/출출이메인.jpg');
    background-position: center; /* 백그라운드 이미지 위치 조정 */
    background-size: cover; /* 이미지 한도 내 크게 설정 */

    color: white; /* 폰트 색상 */

    /* mytitle의 Flex Container 정의 */
    display: flex;
    flex-direction: column; /* 주 축 정의 : 수직 */
    align-items: center; /* 주 축 정렬 방식 : 중앙 */
    justify-content: center; /* 교차 축 정렬 방식 : 중앙 */
}

 

1. 맨 위 상단의 타이틀

 

우선 세부적인 설정을 위해 .main_title이라는 클래스를 정의해주었다.

그리고 가로 및 세로 크기와 여백 등을 정해준 뒤, Mockup에서 정해준 것처럼 백그라운드 이미지에 linear-gradient를 사용하여 그라데이션 효과를 주었다.

사진이 밝은 색깔이기에 폰트 색상을 화이트 색상으로 정하였고, 텍스트들의 위치를 중앙으로 위치해주었다.

 

각 구간별 무엇인지 설명

css

/* 각 타이틀 사이를 나눠주는 구간 */
.contents {
    width: 75%;

    margin: 50px auto 50px auto;
    padding: 25px;
    padding-top: 40px;
    padding-bottom: 40px;

    /* 테두리 스타일 */
    border-top: solid;
    border-bottom: solid;
    border-width: 1px;

    text-align: center; /* 텍스트 위치 중앙 */
}

 

2. 각 구역을 설명해주는 칸

 

각 구간의 크기를 다른 타이틀들의 크기와 맞추기 위해 가로 크기 최댓값을 75%로 설정해주었고, 여백도 정의해주었다.

테두리 스타일(border)은 1px 단위의 실선으로 정의해주었고, 텍스트 위치를 중앙으로 잡아주었다.

 

우리 팀의 소개 내용 타이틀

css

/* introduce 안에 들어가는 설정 */
.introduce {
    /* background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); */
    background-color: lightblue;
    width: 80%;
    height: 350px;
    margin: 50px auto 50px auto;
}

/* introduce 안에 들어가는 모든 <p> 태그들의 설정 */
.introduce p {
    font-size: 20px;
    line-height: 50%;
    margin-top: 20px;
}

/* introduce 안에 들어가는 모든 <h1> 태그들의 설정 */
.introduce h1 {
    font-size: 40px;
    border-bottom: solid;
    border-width: 2px;

    margin: 10px 0px 0px 370px;
    padding: 20px 0px 20px 0px;
}

 

3. 우리 팀의 소개에 관한 구간

 

.introduce 클래스를 만들어주고 각각의 크기와 여백을 맞춰주었다.

좌측에 들어가는 색상과 비슷하게 lightblue 색상으로 그라데이션 효과를 주어 사용하려고 했으나, 별 다른 차이를 느끼지 못하고 기존의 색상을 사용하였다.

그리고 .introduce 클래스 내에 들어가는 모든 <p>와 <h1> 태그들을 일괄적으로 설정해주기보다는 들어가는 전체 태그들에 대한 폰트와 여백 설정도 직접 정의해주었다.

 

하지만 이것만 만들어주고 끝낸다면 다음과 같은 상황을 마주하게 된다.

 

아직은 미완성

 

아직 이미지를 지정해주지 않았을뿐더러, 추가적인 설정을 해주지 않아 내용이 이상하게 나오는 모습을 볼 수 있다.

 

css

/* team_title의 설정 */
.team_title {
    width: 350px;
    height: 350px;
    float: left; /* 이미지 바로 옆에 텍스트 추가가 가능하게끔 설정 */
    margin: auto 30px auto auto;

    /* team_title에 들어가는 이미지에 대한 설정 */
    background-image: url("/static/출출이.jpg");
    background-size: cover;
    background-position: center;
}

/* team_text 안에 들어가는 값을 위한 여백 설정 */
.team_text {
    margin: 30px 30px 30px 10px;
}

 

넣어 줄 이미지의 크기와 경로를 지정해주고, float : left;를 넣어주어 넣어 준 이미지 바로 옆에 텍스트가 추가되도록 설정해준다.

이어서 350x350 크기로 정해준 이미지에 맞춰서 background-position을 중앙으로 위치한 다음 background-size로 크기를 넘겨도 넘긴 이미지는 없앤 뒤 조절해주었다.

 

hover 연결, 임시로 다른 사진을 넣어 둔 모습

 

4. Member card 지정(hover)

 

원래는 다 같이 Mockup을 정하였을 때 이미지를 누르면 옆에 리스트 형식으로 펼쳐지게끔 만드려고 하였지만, 이후 다른 팀원분의 의견이 더 괜찮을 것이라고 생각하여 다음과 같이 변경하게 되었다.

 

의견을 제시해주신 팀원 분은 이미지에 마우스를 올리면 해당 이미지에 자기소개 TMI 페이지가 열리게끔 설정하는 것이 괜찮을 것 같다고 얘기해주셨다.

 

다음과 같은 코드를 만들려면 :hover라는 CSS 의사 클래스를 정의해주면 된다.

 

css

/* member-item의 기본 형태 설정*/
        .member-item {
            flex-basis: 300px;
            /*flex-shrink: 0;*/
            margin: 0 4px;
            opacity: 0.7; /* 해당 이미지들의 투명도 설정 */
            transition: 0.5s; /* CSS 속성 변경 시 속도를 조절 */
        }

        /* member-item에 마우스를 올리면 실행되는 CSS */
        .member-item:hover {
            opacity: 1; /* 투명도를 0.4 > 1 변경*/
            flex-basis: 400px;
            margin: 0 20px;
        }

        /* member-item에 마우스를 올리면 실행되는 profile-contents p의 실행 내용 */
        .member-item:hover .profile-contents p {
            opacity: 1;
            transition-delay: 0.4s; /* 생성까지 걸리는 시간 */
            max-height: 8em;
            margin-top: 0.4em;
        }

        /* member-item 이미지에 대한 값 */
        .member-item img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }

 

해당 코드에서 opacity을 이용하여 해당되는 이미지들의 투명도를 설정하였고, hover에서 다시 돌아올 때의 속도를 조절하기 위해 transition를 사용하여 CSS 속성 변경 시 애니메이션 속도를 조절해주었다.

이후 이미지에 마우스가 올라오면 hover를 정의해주고 원하는 크기(400px)와 애니메이션 효과를 주었다.

 

GIF 사진을 보면 알다시피 지정해준 크기에서 마우스를 올리면 크기가 잠시 커졌다가 떼면 돌아오는 것을 확인할 수 있다.

 

그리고 해당 이미지의 크기들이 전부 다르기에 가로와 세로 크기를 지정해주고 넘어가는 부분은 object-fit:cover;를 사용하여 일정 크기로 맞춰주었다.

 

css

/* 리스트를 열 때 생성되는 marker 삭제 */
ul {
    list-style: none;
    padding-left: 0px;
}

 

마지막으로 리스트 형식으로 지정되어 준 Member Card 모음들은 위쪽의 코드들로만 구성할 경우 ( · )과 같은 리스트 marker가 찍히게 되는데, marker 삭제 코드를 적어주었다.

 

그리고 Member Card 내에 생성되어 있는 텍스트나 버튼 형식의 URL은 추가적으로 적어주어야 한다.

 

css

.profile {
    position: relative; /* 문서 흐름에 따른 본래의 위치 */
}

/* profile-contents 안에 들어가는 텍스트 값들 */
.profile-contents {
    position: absolute; /* 가장 가까이 있는 요소에 배치 */
    right: 16%;
    bottom: 0;
    padding: 20px;
}

/* profile-contents 안에 들어가는 <h2> 태그의 값 */
.profile-contents h2 {
    font-size: 50px;
}

/* profile-contents 안에 들어가는 <span> 태그의 값 */
.profile-contents h2 span {
    display: block;
    font-size: 40px;
}

/* profile-contents 안에 들어가는 <p> 태그의 값 */
.profile-contents p {
    color: #ffffff;
    font-size: 43px;
    min-width: 140px;
    max-height: 0;
    overflow: hidden;
    line-height: 1.2;
    transition: all 1s;
    opacity: 0;
}

 

해당 Member Card에 대한 클래스들 안에 <div class="">로 profile 클래스를 넣어주었다.

 

position:relative;와 position:absolute를 사용하여 근접하여 있는 요소(Member Card가 있는 곳)에 들어갈 수 있게 설정해주었다.

 

"TMI 보러 가기"는 overflow:hidden;을 통하여 초기에는 숨겨져 있는 상태로 만들어주고, transition을 통해 애니메이션 효과를 주어 나타나게끔 했다.

 

-

 

처음으로 팀원들과 함께 프로젝트를 진행하였다.

처음 하는 프로젝트라 많이 미숙하기도 하고 익숙하지 않은 첫 프로젝트라 그런지 시간이 많이 걸린 것 같다.

그래도 개개인이 공부하여 만들어 본 코드들과 서로 간의 협동을 통해 메인 웹 페이지 화면을 만들 수 있었다.

 

이제 추가적인 기능들도 추가해보고 여러 가지를 시도해보면서 완성된 웹 페이지를 보고 싶다.

 

마지막으로, 항상 팀원분들께 감사드립니다.

 

:D