1. 와이어프레임 (wireframe) ≒ 골격
비교적 단순한 도형만을 사용하여 제품의 인터페이스를 시각적으로 묘사한 것
-> HTML 코드를 작성하기 전에 와이어프레임을 만듦으로써 각 영역에서의 주요 태그들을 생각해 볼 수 있다.
※ 참고 사이트 : figma.com/
2. 목업
예시 트위틀러 모습이 있었는데 똑같이 만들면 되는 줄 알고 최대한 비슷하게 만들었다...ㅎ
<div> 태그로 크게 묶어주고 그 안에서 두 부분으로 나누어 주었다. Username과 Message를 입력하는 부분과 입력한 트윗들이 보이는 부분으로 나누었다. 와이어프레임에서 미리 생각했듯이 위 부분에서는 입력하는 곳과 트윗 버튼이 있어야 하므로 input, textarea, button을 이용했고 아래 부분에서는 체크 버튼과 list가 존재해야 하기 때문에 button, ul로 구성했다.
'TIL 👩🏻💻' 카테고리의 다른 글
| TIL : Algorithm Basic (0) | 2021.03.18 |
|---|---|
| TIL : 고차함수 (0) | 2021.03.16 |
| TIL : Javascript Koans (0) | 2021.03.12 |
| TIL : Command Line, Git (0) | 2021.03.11 |
| TIL : 배열, 객체 (0) | 2021.03.09 |