첫 페어 실습 (트위틀러 목업 구현)
시작은 와이어프레임부터 만들었으나, 너무 대충 만들어서 따로 저장해두지 않았다..
구상은 구글링 하다가 선배 기수 분이 블로그에 올려놓으신게 있어서 그분 것을 참고했다.
페어 분과 html을 먼저 완성시키기로 했고, 페어분이 내비게이터, 내가 드라이버로 정했고 서로 번갈아가며 해보기로 했다.
▶html 작성
섹션은 크게 twittler와 새로운 트윗을 확인 할 수 있는 Check New Twittler 버튼이 들어갈 header 부분과
이름, 트윗내용, 트윗을 저장할 트윗 버튼이 들어갈 main-page 부분,
트윗된 내용들이 보일 tweet-list 부분으로 총 3 부분으로 구성했다.
header 부분에 들어갈 Check New Twittler 버튼은 https://fontawesome.com/icons/house?s=solid 여기 사이트에서 가입 후 가져와서 바꾸어주었다.
main-page 부분에서 우선 이름과 트윗 내용이 들어갈 부분을 만들어준 후, 트윗 버튼을 만들었고 페어분께서 아이콘을 넣으면 좋겠다고 하셔서 역시 Check New Twittler 버튼 아이콘을 가지고 온 사이트에서 가져왔다.
Tweet-list 부분은 코드스테이츠에서 미리 양식을 만들어놓았기 때문에 따로 작성한 부분이 없다.
▶CSS 작성
html은 생각보다 수월하게 완성시켰는데 CSS는 시작부터 어디서 어떻게 손대야 할지 막막했다.
우선 header 부분 부터 시작하긴 했는데, Flexbox로 정렬하기가 어려웠다.
이론은 이해가는데 실전에 적용시키려니 어떤 부분을 어떻게 응용시켜야 할지 페어분이랑 서로 막막해하다가 이것저것 일단 해보고 틀리면 다른 것도 해보자는 마음으로 시작했다.
어떻게 하다보니 그럭저럭 원하던 결과물이 나왔고 나머지 글씨 색이나 굵기, 테투리 작업은 비교적 수월했으나 각 요소들 간의 미세한 배치가 까다로웠다.
예를 들면 twittler 로고가 테두리에 너무 가까워서 떨어뜨리고 싶은데 얼마나 어떻게 떨어뜨릴지, 이런 것들..?
main-page 에서도 비슷했던 것 같다.
가장 까다로웠던건 요소들의 배치와 각 요소들 간의 간격 설정.
이 과정에서 페어분께서 어떻게 했으면 좋겠다고 의견을 많이 내주셨고, 의견 방향대로 구현이 어려울 때 해결하는 방법을 잘 알려주셨고, 서로 모르는 부분이 나왔을 때도 페어분께서 구글링을 잘하셔서 먼저 해결책을 많이 제시해주셨다.
마지막 twittler-list 부분이 가장 어려웠다.
다른 부분들은 차치하고 main-page에서 처럼 아이콘을 넣고 싶었는데, 출력되는 tweel-list 들은 코드스테이츠에서 미리 작성해서 줄 때 html 부분에서 해당 내용을 찾을 수가 없었다.
앞서 main-page 에서는 우리가 직접 html을 작성했고 아이콘을 넣고 싶은 요소에 직접 붙여 넣기만 하면 됐는데, 이 섹션에서는 html은 사실상 빈 공간인데 웹 사이트로 보면 이미 출력돼서 보이는 내용은 있고... 도대체 어디에 존재하는 거니..?
한참을 헤매다가 페어분께서 구글링을 해서 어느 정도 해결책을 주셨다.
우선 파일에 새로운 direction으로 img를 만들어서 해당 direction에 넣고 싶은 이미지를 웹 사이트에서 찾아서 붙여 넣기를 한다.
그다음에 li에 해당하는 클래스에 list-style-image url"img/파일명"을 입력해서 어설프지만 그래도 꽤 원하던 결과물을 얻을 수 있었다.
누군가가 보기에는 정말 하찮은 코드 일진 몰라도 그래도 언젠간 나도 보면서 '내가 이랬었지..'라는 걸 느끼기 위해...
코드도 올려놔야겠다..
https://codesandbox.io/s/twittler-forked-4ce6mw?file=/index.html