트위버 목업 구현해보기

앞서 배운 HTML과 CSS를 사용해서 간단한 목업을 만들어 보았다.

본 수업은 페어 프로그램으로 줌을 통해 페어분과 함께 상의하며 작업하였다.

 

순서는 다음과 같았다.

 

먼저 오븐(Oven)을 통해 와이어프레임을 짜고,

 

그에 맞춰 목업을 구현한다.

 

우리는 트위터와 네이버를 합친 트위버(Twiver)라는 사이트를 만들고 그 목업을 구현해 보기로 했다.

 

 

자바스크립트로 하는 기능 구현 틀은 짜여져 있었고,

HTML과 CSS로 사이트의 구조를 만드는 작업만 하면 되었다.

 

input을 받을 이름과 메세지를 적는 칸을 만들고

Tweet버튼과 새 메세지를 확인하는 버튼을 만들고

그 밑에는 이름과 날짜,메세지가 적힌 댓글창으로 구성했다.

네이버와 비슷한 색으로 글씨색(color)을 맞추고, 글자의 폰트를 조절해 주었다.

네이버의 날개모자와 비슷한 모자 이미지를 Twiver글씨 옆에 넣어주었다.

수업 후 느낀 점

생각보다 하고싶은 건 많았는데 오류가 뜰 때도 많았고, 

생각한대로 안 나오는 경우도 많았다.

그래서 비교적 간단한 작업임에도 시간이 꽤 걸렸다.

구글이 많은 도움을 주었고 왜 개발자에게 구글링이 필수라고 하는 말들을 몸소 느낄 수 있는 시간이었다.

확실히 글로 배우는 것보다 실제로 한번 만들어보는 것에서 배우는게 더 많은 것 같다. 

 

구글링을 통해 HTML과 CSS에서 이미지를 불러와 넣는 여러가지 방법을 구체적으로 알게 되었고(이미지 URL 삽입, 이미지 경로 삽입, d이미지 이름 삽입(HTML 파일 내에 이미지 파일이 있는 경우) )

Flexbox에 대해 더 잘 이해하게 되었다.

글자색,폰트,굵기,그림자 뿐 아니라 밑줄, 가로줄(text-decoration), 자간(letter-spacing), 행간(line-height)등 다양한 기능을 통해 생각보다 더 다채롭게 디자인을 구현 가능하다는 것을 알게 되었다.