트위틀러(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..

오븐(Oven): 와이어프레임 제작 플랫폼 1. 회원가입 2. 새로운 프로젝트 만들기 3. 와이어프레임 제작 풋몹(fotmob.com) 와이어프레임 만들기 - 와이어프레임을 만들 실제 웹사이트 모습 - 와이어프레임 만들기 https://ovenapp.io/view/u7R4WchNXIaxOOVRrQ005E9sZZxwtl8F/

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

HTML 구성하기 - CSS로 화면을 구분할 때는 수직분할과 수평분할을 차례로 적용하여 콘텐츠의 흐름에 따라 작업함 1. 수직분할 : 화면을 수직으로 구분, 콘텐츠를 가로로 배치 2. 수평분할 : 수직으로 분할된 각각의 요소들을 수평으로 구분, 내부 콘텐츠를 세로로 배치 레이아웃 리셋 - HTML 문서는 기본적인 스타일을 가지고 있으며, 때때로는 레이아웃을 잡는 데 방해가 되기도 함 - 기본 스타일링을 제거하는 코드를 적용해 디자인대로 레이아웃을 구현할 수 있다. * { box-sizing: border-box; } body { margin: 0; padding: 0; } Flexbox로 레이아웃 잡기 - display: flex; 를 부모 박스 요소에 적용해, 자식 박스 요소의 방향과 크기를 결정할 수..

CSS(Cascading Style Sheets) - HTML로 작성된 웹 애플리케이션의 구조에 디자인을 적용하는데 사용되는 스타일시트 언어 인터페이스와 UI/UX - 인터페이스 : 컴퓨터와 교류하기 위한 연결고리 - UI(User Interface, 사용자 인터페이스) : 일반 사용자가 쉽게 컴퓨터에게 의도한 행동을 명령할 수 있게 만든 인터페이스. 아무리 훌륭한 내부 기능을 갖고 있더라도 UI가 없으면 소용이 없다. - UX(User Experience, 사용자 경험) : UI를 포함해 사용자가 특정 서비스를 직/간접적으로 경험하면서 느끼는 종합적인 만족도. UX는 직관적이고 쉬운 UI에서 나온다. CSS의 문법 구성 - 셀렉터(Selector) : 특정 태그(요소)의 이름, id, 또는 class ..