안녕하세요! 저는 프론트엔드 개발자를 준비하고있는 디자이너 출신 Louis 입니다😀
(자기소개를 해서 깜짝 놀라셨죠..?)
저는 개발에 대해 공부를 하고 싶어서 올해 3월달 부터 혼자서 공부하다가 9월에 '스파르타코딩클럽 내일배움캠프'에 함류를 해서 공부를 하고 있었답니다..!
9월 한달은 사전 캠프 기간으로 혼자서 공부를 하고 있다가 이번에 미니 프로젝트를 받게 되어서 3일간 진행한 상황에 대해 설명드릴려고 찾아왔습니다!
프로젝트 콘셉트은?
먼저 프로젝트 콘셉트는 같은 팀원들과 친해지기 위한 프로젝트였습니다!
각자 자신들을 소개하는 웹페이지를 만드는 프로젝트였고 이번 기회를 통해서 팀원들과 한 층 친해질 수 있는 기회가 될 수 있었던 것 같습니다
그래서 어떻게 진행했나요?
처음에는 너무 막막해서 역할을 정하는데 하루를 다 보냈던 것 같습니다 (제가 팀장을 했습니다(?))
일단은 디자인이 있어야지 코드를 작성할 수 있을 것 같아서 제가 디자인을 잡고 다른 팀원들은 깃에 대해 공부를 하고 서로를 알려주기로 했습니다
이번 프로젝트는 디자인이 중요한게 아니었기 때문에 디자인은 하루만에 뽑아버리고 본격적으로 역할을 나누기 시작했습니다 (위 이미지는 예시입니다!! 내용은 무시해주세요..!)
본격적인 프로젝트 시작
저희 팀은 구역별로 나눠서 구연하기 시작했습니다 팀원분들도 적극적으로 잘해주셔서 결과물은 금방 나올 수 있었습니다
하지만 잘하다가 문제점이 발견되는데...
구연하기 전 해상도를 1920*1080으로 생각을 하고 시작을 했는데
내용들을 중앙정렬이 안돼서 화면을 늘리면 왼쪽 상단으로 모여버리는 상황을 마주하게 됐습니다...
구세주 등장..!!
타 팀원분이 display: fles를 써보라는 이야기를 해주었고
오브젝트에 width 값을 px으로 주지말고 100vw 값으로 주라는 이야기를 듣고 호다닥 고치기 시작했습니다
그래서 내가 만난 문제점과 해결방안은?
중앙의 콘텐츠 정렬을 위해서
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;위와 같은 코드를 통해서 중앙 정렬을 할 수 있었습니다
flex-direction 에서 차이가 서로 있는데요
flex-direction: row 같은 경우는 아래와 같이 표현될 수 있고
반대로 flex-direction: column 같은 경우는 아래와 같이 표현될 수 있습니다!
flex를 활용해서 쉽게 정렬을 할 수 있었습니다
추가로 마지막 footer 부분의 width 값을 1920px 로 주었기 때문에 구연이 제대로 안되고 있었습니다
이 부분은 100vw 로 설정하여 해결 할 수 있었습니다
100vw 로 설정를 하면 내가 지정된 값까지 꽉채워져 저 처럼 개발자 도구에 들어갔을 경우 당황하는 상황은 피할 수 있습니다
그러면 문제점 끝?
이대로 끝이면 정말 다행이겠지만 맥과 윈도우 사이의 약간 차이가 있는 것 같았습니다
하지만 이 부분도 위와 같은 방법으로 해결될 수 있는 문제점이었습니다! 정말 다행이었습니다..
그래서 오늘의 큰 교훈
항상 중앙정렬를 할 경우는
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;flex 를 신경써보자..!!
그리고
꼭 width 을 픽셀값으로 지정하지말고 꼭 vw 값을 이용하도록 하자!
진짜 정말 마지막으로
큰 프로젝트도 아니고 아직 기능 연결도 안된 상태인데 1차 완성했다고 많이 배우네요...
역시 실전으로 맞으면서 배우는게 최고인 것 같습니다
여러분들은 항상 행복코딩하시길 제가 응원하겠습니다 오늘도 고생하셨습니다😀
