[멋쟁이 사자처럼] 토이프로젝트 TRIP-LOG 완성과 회고

목요일 발표를 마지막으로 첫 번째 팀 프로젝트가 끝났다.

 

우선 결과물을 보자❗

---

 

TRIP-LOG

여행 동선을 지도에 표시해서 공유하고, 도움이 될 정보들을 사용자끼리 공유하는 커뮤니티 웹사이트

 

사용 폰트

S-CoreDream-3Light

S-CoreDream-6Bold

S-CoreDream-9Black

index.html

 

index.html(2)

 

signup.html

login.html

profile.html

 

create.html

 

update.html

 

 

map.html

 

detail.html

---

주요 CSS 정리

요소 정 가운데로 이동

top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* .wrapper의 절반 만큼 다시 이동해서 중앙에 위치  */

 

커서 손가락 모양으로 바꾸기

cursor: pointer; 

* cursor: 요소 위에 마우스 커서가 올라갔을 때 모양 지정

 

요소 채우기

object-fit: cover
/* 내용이 종횡비를 유지하면서 정의된 너비와 높이를 가득 채울 때 까지 확대 */

* object-fit: 요소의 내용(img, video, object, svg)이 지정된 너비와 높이에 맞게 들어가는 방식을 지정

 

사진에 커서 올리면 밝기 낮추기

.all_write > img:hover {
    filter: brightness(50%);
}

* filter: 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용(이미지, 배경, 테두리 렌더링 조정)

 

요소 정 가운데로 이동

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* .container 절반 만큼 다시 이동해서 중앙에 위치  */
    width: 300px;
}

 

소셜 로그인 정렬

.social_login {
    display: flex;
}

* flex-direction 속성을 따로 지정하지 않으면 기본값인 row가 적용(왼쪽에서 오른쪽)

* flexbox: 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공

 

Model Form 크기 조정

.container > form > p > input {
    width: 100%;
    height: 20px;
    border: 1px solid;
}

.container > form > p > textarea {
    width: 100%;
    height: 300px;
    border: 1px solid;
}

* 개발자 모드에서 태그 확인 후 변경

 

---

개발 과정 및 후기

개발 과정

- 개발은 중요도에 따라 계획을 세웠고 최종적으로 [중요] 태그의 모든 작업, 추가로 [아이디어] 태그의 게시글 좋아요 기능을 구현했다.

 

- 나는 팀 내에서 CSS작업을 맡았는데 작은 프로젝트였지만 디자인 초안을 만들어 둔 게 큰 도움이 됐다. 초안이 없었으면 이거 했다 저거 했다 시간이 두 배로 들었을 거다.

TRIP_LOG_디자인초안.pdf

1.14MB

 

- HTML이랑 CSS에 대한 기본적인 지식이 너무 없어 구름에서 기초 강의를 하나 듣고 시작했다. 강의 덕분에 처음보다는 나아졌지만, 그래도 끝나니 아쉽다. 보이는 건 똑같더라도 더 효율적이고, 간단하고, 누가 봐도 이 자리에 있어야 할 것 같은 태그를 쓰고 싶다❗

 

- CSS도 CSS지만 일하는 방식에 있어서도 고민을 많이 했다. 나 같은 경우는 계획을 세우면 기간 안에 끝내야 한다는 집착이  좀 있는데, 프로젝트를 하다 보니 사이사이 변수가 너무 많아서 당황스러웠다. 계획을 안 세울 수는 없지만 오래 하기 위해서 좀 더 유연해질 필요는 있는 것 같다.

 

발표 직전까지 회의회의

 세부적으로 아쉬운 점이나 보완할 점이 많지만, 단기간에 여럿이서 처음부터 끝까지 해냈다는 게 엄청 뿌듯하다. 이렇게 하나 만들고 두 개 만들다가 엄청난 거 만들고 그러는 거지

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

우리 팀원들 진짜 진짜 자랬따자래써