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

TIL 1. [실습] 트위틀러 목업 구현하기 점검 및 평가 ⭐ 난이도 : ⭐⭐⭐⭐ 이해도 : ⭐⭐⭐ Comment - 첫 페어 프로그래밍 시간이었지만 페어님이 불참하셔서 혼자 실습을 진행했다. 글로 배우고 충분히 이해했다고 생각했지만 역시 직접 코드를 짜보는건 별개의 문제였다. 멀쩡히 완성했는데도 에러가 발생해서 두시간 넘게 화내면서 찾아보다가 알고보니 따옴표 하나를 빼먹어서 생긴 문제였다는 걸 찾게되니 이렇게 허무할 수가 없었다. 페어가 있었다면 금방 찾아낼 수 있었던 문제였겠지만, 앞으로의 실습에선 이런 일이 발생하지 않았으면 좋겠다😂. To-Do List ⬜✔️ - 아침운동 ✔️ - Study에 참여하거나 직접 만들기 ⬜ - Learn IntelliJ IDEA 완료 ⬜ - W3Schools - CS..

오븐(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; 를 부모 박스 요소에 적용해, 자식 박스 요소의 방향과 크기를 결정할 수..