footer 만들기

June 28, 2023

서론

어제 밤 10시까지 티켓을 다 만들고 오늘은 검사를 받았다.
기본적으로 배분은 잘했지만 레이아웃과 기능을 분리해서 하는편이 나중에 따로 유지보수하기 좋기때문에 분리했으면 좋겠다는 조언을 해주셨다.
빨리 코딩을하고싶어서 빠르게 나누었다.

그런데 티켓이 22개가 나왔는데..티켓 기능들도 체크리스트로한것까지하면..
이걸 프론트 2명이서 다할수 있을까싶지만 어떻게든 해봐야겠지.
일단 첫 주는 레이아웃을 만드는것을 목표로 내가 footer를, 다른분이 nav바를 하기로 하였다.

새롭게 배운점

놀랍게도 나는 이 푸터를 만드는데 거의 하루가 걸렸다.
이렇게 오래걸린 이유는 새롭게 배운점이 너무 많았기때문이다.

1. input 태그와 label

footer를 만들면서 html코드에대해 공부하고 nomard 코코아톡 클론챌린지를 하였다.
이때 input 태그에 대해서 공부하였는데 input태그에 이렇게 많은 기능이 있을 줄 몰랐다.

속성	설명
text	문자입력
password	비밀번호 입력
submit	form 데이터 제출
button	버튼
reset	form 데이터 초기화
file	파일 업로드
checkbox	체크박스

이외에도 range,search,time 등 정말 많은 기능이있었다.

그렇게 다만들고 className을 썼는데 퍼블리셔 출신의 팀원분이 label태그랑 연결되어야한다고 알려주셨다.
그래서 label태그에 대해 알아보았다.
label태그는 input태그를 보충 설명하며, 반드시 input name과 label이 연결되어야한다고 한다.
또한 react에서는 for 대신 htmlFor을 사용해야한다는 것을 알았다.

<div className="inputBox">
  <input type="checkbox" name="checkText" />
  <label htmlFor="checkText">본인은 14세 이상입니다.(필수) </label>
</div>

html/css 도 알아야할게 정말 많았다.

첫 문제발생

이후에는 이솝의 푸터같이 똑같은 넓이의 박스 4개를 수평으로 펼쳐야했는데, 사이즈가 맞지않았다.
첫번째 박스(체크박스가있는)가 혼자 너무크고 나머지는 옆으로 쭈구리처럼 들어가있어서 뭐가 문제지 싶었고 찾아보니 이유는 내가 준 width에 있었다.

item {
  padding-left: 2em;
  padding-right: 2em;
  width: 20%;
}

넓이를 화면 기준으로 25%씩 주면되겠지하고 25%로 맞추니 모든것이깨졌던 것이다.
그래서 넓이를 정해주고 margin과 padding으로 간격을 맞췄다.

팀원에게 보여주었더니 이제 반응형 footer를 만들어보자하셨다.

2. 반응형과 flex

반응형이라는 말에 많이 겁먹었지만 어렵지않다며 찾아보라고하셨다.
찾아보니 기존의 row로 펼쳐졌던 내용물을 넓이가 깨지는 간격이 되었을때 column으로 바꾸면 되는거같아서 쉬워보였다.
하지만 어림도 없지.
이전에 margin과 padding으로 간격을 억지로 맞추다보니 반응형으로 만들었을때 난리가 났다.

하지만 나는 ‘엥 왜지?’하고 이것저것 건드려봤는데 점점더 이상해져서 다른 팀원분에게가서 물어보았다.
그분이 말씀하시길 ‘아니 왜이렇게 margin이랑 padding을 남용했어요! flex쓰세요!’였다.
flex로 간격을 맞추고 거기서 padding과 margin은 조금씩 사용해보라하셨다.

확실히 flex로 위치를 맞추고 margin 대신 패딩을 쓰니 자연스럽게 반응형이 완성되었다.
이렇게 처음으로 나의 반응형 푸터가 완성되었다!

결과물

@media (max-width: 700px) {
  .container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
  }
}

📝 느낀점

1. html태그공부를 반드시 해야겠다.

자주쓰는정도만 알면되지않을까했는데 footer를 만들면서 태그하나가 정말 다양한 기능을 할 수 있다는 점을 알았다.

2. 시작전부터 두려워하지 말자.

footer를 만들면서 반응형 웹사이트에대해서도 공부해보았는데, ‘이걸 내가..?’했으나 막상 해보니 어렵지않았다.

3. margin은 최대한 쓰지 말자.

프로젝트 시작전에 개구리 css를 24번까지 쉽게 풀어서 flex를 잘 사용한다고 생각했는데, 현실은 margin쟁이였다.
이번에 margin과 padding을 사용할때 잘 생각해서 사용해야한다는걸 느꼈다. 이제 화면이 내생각과 다르게 깨진다면 margin과 padding을 먼저 의심하자.

4. 웬만하면 flex와 grid를 사용하자.

🤔 기억에남는 점

1. 내인생 첫 반응형

글을 쓰는 지금 옆에서 프론트엔드 두분이 언제까지 푸터로 우려먹을꺼냐고 놀리시는데 나는 너무 뿌듯하다ㅎㅎ
이게 나의 인생첫 푸터이자 반응형이라구!!^^

2. 프론트 질문왕

갑작스럽게 들어온 프론트엔드 교육과정에서 쫓아간다고 열심히 하기는했는데..
여전히 css나 html,바닐라자바스크립트는 실력이 부족했다.
(이정도면 한게 없는거 아니냐..?)

검색해보고 이런저런 시도를 해봐도 안되는것들이 많아서 다른 프론트엔드 분들이나 멘토님에게 기본적인 질문을 많이하였다.
그래서 첫날은 다른 프론트분들의 비명소리가 끊이지 않아서 멘토님들이 무슨일이냐고 중재하러 오셨던게 기억에 남는다.
비명 지르시면서도 하나하나 다알려주는 프론트분들이 너무 고마웠다.
하지만 다음날부터는 질문 양이 확줄어서 프론트분들이 놀라셨다고한다ㅎㅎ

Twitter Facebook LinkedIn

Kimsu