TIL

🕸 와이어프레임(wireframe)

웹페이지의 골격인 와이어프레임을 보고, 어떤 목적을 가진 프로그램인지 유추해낼 수 있다면 성공적인 와이어프레임이다. 단순한 인터페이스를 그리는 것이 아니라 각 영역에 해당하는 태그들과 함께 작성하는 연습을 하자!

🌚 목업 & 하드코딩

완성될 화면에 출력될 내용을 html로 직접 하나씩 입력해 보는 것.
javascript로 작동되는 웹 앱을 만들기 전에 설계도를 그리는 것과 같다.
화면의 요소마다 구분해주고 감싸주어야할 단위 들을 잘 찾자.

🐦 Twittler (Twitter Clone) 목업 구현하기

목표

1. UI wireframe 그리기 - figma 프로토타이핑 툴 이용해보기.
2. 트윗작성자UserName, 트윗내용Comment을 입력할 수 있는 html.
3. 트윗 3~4개 화면에 표시(작성자,내용,작성한 날짜 포함)
4. 반복되는 트윗 등의 구조를 class 선택자로 분류하고 바람직한 class 이름 짓기!
5. css 마음대로 꾸미기!!