TIL 14 (미니프로젝트2)

어제 문제가 발생했던 텍스트가 사진 옆 세로로 삐져나오는 문제와 더불어 배율변경할때 텍스트가 변동되는 사안,

그라데이션 안쪽에 사진을 작업할수있는 방법을 튜터님에게 문의드렸다.

 

해결방법은

 

    <div class="portraits-container">

        <div class="portrait">

            <img src=" 멤버사진 URL "

                alt="Portrait 1">

            <p class="p-text" span="poppins-regular">백엔드</p>

            <p class="p-name">팀원님</p>

        </div>

        <div class="portrait">

            <img src=" 멤버사진 URL "

                alt="Portrait 2">

            <p class="p-text" span="poppins-regular">백엔드</p>

            <p class="p-name">팀원님</p>

 

현재 수정본은 포트레이트 컨테이너 클래스에 포함되어있으나, 그 전에는 분리되어있는 상태였고

CSS 스타일에서 클래스 포지션이 앱솔루트로 적용되어있었기때문에 동일선상에 존재하지않고 빗겨갔던 이유였다.

 

따라서 

 

        .portraits-container {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 35vh;

        }

        .p-text {

            color: rgba(14, 14, 174, 0.833);

            text-align: center;

            position: relative;

            bottom: 15px;

        }

        .p-name {

            color: rgba(14, 14, 174, 0.833);

            text-align: center;

            position: relative;

            bottom: 35px;

            font-size: medium;

            font-weight: bold;

        }

 

이렇게 구분지어주고 현재 포지션을 앱솔루트를 사용하게되면 절대값으로 지정되어지기때문에 쓰실 때 주의를 요한다고 전달받았다. 

 

이렇게 적용시키면 사진 아래쪽에 글자가 두문단으로 작성할수있게되고 필요에 따라 위치를 조정할수있게 두었다.

 

추가적으로 포트레이트 클래스에 필터기능과 트랜지션 기능을 넣었고 우리 팀원소개사진에 흑백 명암효과를 주었다.

 

        .portrait {

            width: 130px;

            height: 130px;

            margin: 15px;

            flex-direction: column;

            text-align: center;

            align-items: center;

            position: relative;

            filter: grayscale(100%);

            transition: filter 0.5s;

        }

 

        .portrait:hover {

            filter: grayscale(0%);

        }

 

filter가 grayscale 100%로 내가 지정하는곳만 컬러로 나오게되고, 지정하지않은곳은 흑백처리가 된다.

 

그리고 그라데이션 박스 안에 사진을 넣는 방법도 튜터님에게 설명을 들었으나, 다른 팀원분이 프론트쪽 지원하시겠다하셔서 이 부분은 설명해드리고 넘겨드렸다.

 

이곳까지 진행하고나선 리눅스와 git, git-hub에 관한 강의를 들었는데, 리눅스는 터미널을 제어할 수 있는 프롬프트를 배우는것이었고 이해는 했으나 실전용으로 쓰려면 암기가 필요하고 개발자 중 리눅스모르면 개발자가 아니라고까지하니 ㅋㅋ 일단 메모라이즈는 해뒀으니 넣어두겠다.

pwd : 현재경로확인
ls : 리스트(현재경로에 있는 목록을 보여달라)
ls -a : -a 는 옵션이며 all을 뜻함 (현재 경로안에 모든 목록을 보여달라)
cd (change directory) : 원하는 디렉토리로 이동한다.
cd .. : 상위경로로 이동
cd . : 현재경로
cd ../../ : 상위경로(2번)로 이동
mkdir 폴더명 : 현재 위치에 폴더만들기
ll : 상태확인(앞에 d가 붙어있으면 폴더)
touch 파일명 : 현재위치에 빈 파일 만들기 

 

그리고 git에 대해 세이브포인트같은 설명을 듣던중...

 

아기가 운다 아내가 몸이 좀 안좋아 산부인과에 다녀오게되었는데 수업들으며 아기본다고 30분정도 뒷이야길 제대로 못들었다. 녹화본과 강의자료를 참조로 시간날때마다 배워놓고 써먹어야겠다. 

 

이후에 슬로건이랑 문구짜기 등 팀원분들과 미팅 후에 제작중이던 웹페이지 디테일을 수정하고 내일 미팅할 이야기를 정리해보는 시간을 가지려고한다.

 

※ 어떤 문제가 있었는지

- 각자의 이미지를 넣어야하는 박스가 타원형이며 사진사이즈마다 제멋대로 크기가 변함

 

※  내가 시도해본 것들

-  박스사이즈를 줄여보기도했고, 고정시켜보려고 노력했으나, 이미지를 일관된 사이즈로 변경시켜버림

 

※  어떻게 해결했는지

- 이미지를 일관된 사이즈 (width: 200px; heigh: 200px; 같은) 정도로 고정시켜버린뒤 적용했다.

다만 추후에 이미지에 따라 필요용도가 다 있으므로 프롬프트로도 변경할 수 있는 부분을 찾아야한다.

 

 

※  무엇을 새롭게 알았는지

- Git과 GIT-HUB의 역할에 대해 배웠다.

GIT은 내가 세이브포인터 만들어주는거고 원하는때마다 저장해주는걸로 보면되겠다.

GIT HUB는 소스코드의 클라우드로 보면 될거같다. 

팀 협업에 관해서 배웠다. 어떤구조로 개발자들이 협업을 하는지에 대해 배울수있었고 충돌과정이 발생하는 부분도 배울수있어서 오늘 특강은 유의미했다고 생각한다.

 

작은 프로젝트임에도 팀원들과의 소통, 어떤부분은 어떻게 만드는게 좋을지, 어떤부분을 수정하는게 좋을지를 시간을 정해두고 미팅을 하고있는데 프로젝트를 하지않았다면 모를수밖에 없는 느낌이 들었다.

 

다행히도 우리 팀원분들은 내가 제안해주는 부분에 대해 긍정적으로 받아주고계시고, 나도 더 열심히 따라갈 수 있는 발판이 되어가고있다.

 

한편으로 글을 마무리 짓기전에 드는 생각은, 본 캠프가 끝나면 마음맞는분들이랑 얼굴붉힐일 없이 프로젝트 하나 지정해서 개발해보고싶은 생각이 들었다.