미니 프로젝트 - 팀 소개 웹페이지 개발 (1)

팀 소개 웹페이지 개발

 

프로젝트 소개 : 팀원 7명의 짤막한 자기소개를 담은 웹페이지 제작

내가 맡은 부분 :  전체 개발 중 팀원 소개 페이지 담당

 

피그마를 사용해 간단하게 소개 페이지를 디자인하고 팀원들에게 설명하는 시간을 가졌다.

 

 

TODAY DONE

 

와이어 프레임 디자인

멤버 소개란 디자인

멤버 소개란 html작성

멤버 소개란 css작성 (수정 필요)

 

---

 

개발을 하며 발생한 문제들

 

1. 첫번째 ISSUE ( 해결 O )

러프하게는 완성을 했으나 CSS 부분에 욕심이 생겼다. 자바스크립트 연결은 내일 하자는 계획 아래 남은시간은 전부 CSS에 투자하였다. 초기 디자인의 카드 모양을 만들기 위해 아래의 코드를 사용해 카드 앞면과 뒷면을 만들었다.

        <div class="main">
            <div class="front-card">
                <div class="eclipse">
                    <img src="https://ifh.cc/g/tHaG9J.png">
                </div>
                <div class="mem-img">
                    <img src="https://ifh.cc/g/MlCTtV.jpg">
                </div>

                <div class="mem-name">팀원 이름</div>
                <div class="mem-mbti">MBTI</div>
                <div class="mem-stack">기술 스택</div>
                <div class="social-ic">
                    <a href="#" class="github"><img class="github-img" src="https://ifh.cc/g/WzANcb.png" /></a>
                    <a href="#" class="blog"><img class="blog-img" src="https://ifh.cc/g/rjCyQk.png" /></a>
                    <a href="#" class="email"><img class="email-img" src="https://ifh.cc/g/WFnftW.png" /></a>
                </div>
            </div>

            <div class="back-card">
                <div class="mem-self-intro">자기소개</div>
                <div class="mem-hobby">취미</div>
                <div class="mem-sw">자신의 장단점</div>
                <div class="mem-coop-style">협업스타일</div>
                <div class="mem-note">한마디</div>
            </div>
        </div>

위의 코드와 같이 카드 앞면, 뒷면을 순서대로 기록을 했는데, 여기서 'front-card'를 rotate할때 첫번째 이슈가 생겼다.

html은 작성된 순서대로 하나씩 그려지는 방식이라, 카드 뒷면이 앞에 그려지게 된다. 그래서 원래 하고자 했던 카드 디자인이 나오지 않았다.

이를 해결하기 위해 각각의 div에 깊이를 줄수 없는지 찾아보게 되었다. (안드로이드 개발에서는 쉽게 depth를 주어 처리했기 때문에 css에서도 depth와 관련된 속성이 존재할것이라 생각했다.)

CSS 코드에서 front-card와 back-card에 z-index라는 속성을 주어 간단하게 해결할 수 있었다.

.front-card {
    background: #ffffff;
    transform: rotate(-10deg);
    z-index: 1;
}

.back-card {
    background: #ffc851;
    z-index: 0;
}

 

|결과|

1번이 수정 전, 2번이 수정 후

 

 

 

2. 두번째 ISSUE ( 해결 X )

 

<div class="view">의 범위(카드와, 팀원 리스트가 들어있는 구역)를 전체 화면으로 설정하고싶었다. 맨 위에 생성될 헤더 부분을 제외한 구역 전체를 다 활용하여 컴포넌트들을 배치하는것이 목표였다.

하지만, 아무리 구역을 나누어 설정을 하고, height를 설정을 하지 않거나 100%를 주었음에도 불구하고 전체의 구역을 차지하지 못하였다.

여러가지 방법들을 사용해서 고쳐보고는 있으나, 완전하게 수정하지는 못했다.

 

방법 1 : vh,vw를 사용하여 전체 화면으로 만들기

      .view {
        width: 100vw;
        height: 100vh;
      }

 

해당 코드를 활용하여 작성을 하였을때, 이슈가 하나 생겼다. 해당 div내의 컴포넌트들의 길이를 px로 지정할 경우에는 전체 화면에 배치되는것이 아닌 화면 범위를 벗어난 구역에 컴포넌트들이 발생하게 되었다.(안타깝게도 개발 당시 이미지를 캡처하지 못했다.)

그래서 비율을 통해 배치를 하게 되었는데, 이 경우 화면을 확대하거나 축소할때마다 비율이 함께 변하는 문제가 생겼다.

헤더부분을 만들지 않을 경우, 내가 원하는 형태의 배치가 가능하긴 했다. view부분이 비율에 따라 수정되는 것은 상당히 원하는 기능이었다.

 

방법 2 : position 속성 활용

body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

 

view에서 다른 오브젝트들의 사이즈를 동등하게 유지하기 위해 position을 활용하여 body를 꽉 채웠다.

결과로 말하자면, 소용 없었다. header 부분을 지정하자마자 header 외의 부분의 height가 고정되었다....

헤더 부분을 만들지 않을 경우에는 내가 원하는 형태로 배치가 되었다..!🤬🤬🤬

 

 

|결과|

오늘치 최종 결과물

 

 

 

 

느낀점

TIL을 이런식으로 작성해보는 것은 처음이라 서식이라던지 여러가지가 다 마음에 안든다.. 조금더 양식을 정리해서 다시 읽었을때 쉽게 이해되도록 수정해야겠다.

월요일에 web에 대한 기초 강의를 듣기 시작하여, 바로 이렇게 프로젝트에 적용해본 경험은 처음인 것 같다. 하지만 재미있으니 짱이죠?

그나저나 vh,vw와 %로 비율을 지정했을 때, 특정 오브젝트는 크기를 유지하고 싶다면? 어떻게 해야할까?

전체 화면으로 설정을 했음에도 불구하고 왜? 테두리 구역에 여백이 생기는건지 모르겠다….

내일 정보들을 조금 더 찾아 수정해봐야겠다.