트위틀러(Twittler) 목업 구현하기 1. 유튜브 댓글 UI를 본뜬 트윗튜브(Twitube) 와이어프레임 제작 https://ovenapp.io/view/Bl9WzQtUUrXw6n4ujxxcSeVbBywGhyM1/ 2. 목업 페이지 HTML, CSS 코드 작성 - index.html Twitube Tweet! Check new tweets - main.css * { box-sizing: border-box; } input { margin-top: 1em; color: darygray; border-style: none; border-bottom-style: solid; } button { margin-top: 1em; margin-left: 1em; } #headlineBox { display: fl..

와이어프레임(Wireframe) - 와이어로 설계된 모양 - 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계 - 도형으로 인터페이스를 묘사해 아주 단순하게 레이아웃과 제품의 구조를 보여줌 cf. Oven: 와이어프레임 제작 플랫폼, [실습] 와이어프레임 만들기 - 풋몹(fotmob.com) 목업(Mock-up) - 실물 크기의 모형 - 기능적으로는 동작하지 않는, 실제 웹 또는 앱과 모습이 동일한 HTML,CSS 문서 cf. CodeSandbox: 프론트엔드 웹 개발 에디터, [실습] 트위틀러 목업 구현하기 HTML로 웹 앱 구조 잡기 1. 큰 틀에서 페이지 영역 나누기 (e.g. 댓글 쓰기, 댓글 읽기) 2. 각 영역을 태그로 표현하기 3. id와 class를 사용해 목적에 맞게 이름 붙이기 i..