- 와이어 프레임(골격)을 처음으로 만들어 보았다.
HTML 에 넣을 태그 정하는 일이 진짜 보통일이 아니구나 느꼈다. (코딩할 때 이름정하는 시간이 거의 대부분을 차지한다는 이야기를 듣긴 했었다.) 태그 이름을 정할 때, 추후 작업시 어느 부위를 코딩하고 있는지 잘 알기 위해서 많이 고민했다. id와 class의 차이는 잘 알고있어서, 구분하는 건 쉬웠다.
아래 와이어프레임을 첨부해보았다. 굉장히 조잡하다. 다음에 만들 때는 더 직관적이게 만들어야겠다.
- html 을 작성하면서 추가한 태그가 많았다.
페어와 와이어프레임짜면서 이정도면 태그 잘 정한 것 같다고, 충분하다고 생각했었다. 그런데 막상 html을 작성하면서 이 태그가 이 부분을 말하는 거였나 헷갈려서 태그이름 변경도 많이 했고, 추가적으로 필요한 태그들도 생겨서 (부모태그) 작성하는 중간에 이름정하느라 또 애먹었다. 이름을 정하는 부분에 대해서는 꿀팁이 있나 더 알아봐야 겠다.
- CSS 로 태그들의 위치를 배정했다.
CSS가 제일 시간이 오래걸렸다. 생각보다 태그들을 배치하는 일이 마음대로 안됐다. html 태그를 하나하나 가져와서 테두리를 시각적으로 보이게 만들었다. 그래야 박스의 크기를 한 눈에 볼 수 있어서 편하기 때문이다. 간격맞추는 게 노가다였다. 이 과정에서 html로 돌아가
사실 flexbox를 배워서 적용했었어야 했는데, 개념배울 때 연습하면서 적용이 제대로 되지 않아 지레 겁먹고 사용하지 않았다. 그래도 스프린트 리뷰시간에 내가 무엇때문에 잘 적용이 되지 않았는지 깨달아서, 자신감이 생겼다. 이번 주말을 이용해 css 부분에 모두 flexbox를 적용시켜볼 계획이다.
- 다듬기
다른 동기생들은 창의력을 발휘하여 만들었는데, 우리는 한 눈에 봐도 원본이랑 똑같다! 나아가서 더 낫다라고 생각들게 하고 싶었다.
테두리를 둥글게 적용시켰는데, input tyoe="text" 와 text area 부분도 둥글게 될까. 안되면 어쩌지? 고민했는데(안되면 구글링 하겠지 ㅋㅋ), 적용하자마자 바로 둥글게 변해서 기쁘고 신기했다. border-radius 는 만능이었다.
버튼도 둥글게 적용하자마자, 갑자기 고급스러운 버튼이 되었다. 아래 원본과 우리가 만든 것을 함께 놓았다.
추가로 이미지도 첨부했다. 트위터의 짭 느낌으로 까만색 새를 넣어보았다. 이미지를 첨부하는 것도 쉽지가 않았는데, 처음에 적용했을땐 크롬 화면 상에 보이지 않았다. 하지만 F5키를 계속 연타했을때, 잠깐이나마 이미지가 보였다. 아마 css가 로딩되기 전에 이미지가 더 빨리 출력되어서 잠깐 보이고 사라지는 것 같았다. 내 페어는 침착하게 '이렇게 하면 이미지가 보인다'고 하면서 F5키를 연타했는데, 나는 너무 웃겨서 쓰러졌다.
아무튼 우리는 구글링을 해서 html에서 twittler 글자를 써놓은 부분 자식 엘리먼트로 <img src="이미지이름.png">를 추가하고, css에 img { width, height} 에 값을 정해 크기를 정해서 해결했다.
짜잔 ~ 그렇게 나온 완성본. (왼쪽 화면만 보고 처음부터 끝까지 다 따라서 만들어보았다. )
이번에는 목업까지만 만들고, 아마 다음주쯤에 실제로 작동되는 것을 해본다고 한다. 다음주가 기대된다. ㅎㅎ
