HTML/CSS
-
Twittler(Twitter clone) 구현하기 - (2) HTML (selector 지정)캡틴 코딩일기/javascript 2020. 3. 8. 13:00
Twittler(Twitter clone) 구현하기 - (2) HTML (selector 지정) ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 개요에서는 twittler를 동적으로 구현하기 위한 javascript를 활용한 구현 목표를 집중적으로 다루었으나, 구현되는 기능들을 잘 보여줄 수 있는 HTML도 정말 중요하다. 이미, twittler mock-up을 구현해 보았기 때문에 쉽게 만들 수 있다고 생각하지만 javascript와의 조화를 생각한다면 아직도 고민해야할 부분들이 많다. (실제 그렇게 삽질을 오래도록 했었다.. ) 1) HTML 구성 HTML/CSS 로 mock-up을 구현했던 기억을 되짚어가며, 화면 구성의 뼈대가 되는 영역을 크게 4가지로 구분하였..
-
Twittler(Twitter clone) 구현하기 - (1) 개요캡틴 코딩일기/javascript 2020. 3. 7. 19:26
Twittler(Twitter clone) 구현하기 - (1) 개요 ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 과제를 완성한 지 시간은 조금 지났지만, 스스로 뿌듯했던 twittler 구현에 대해 정리해두고 싶어서 몇 개의 포스팅으로 구분하여 해결 과정을 남겨보려고 한다. 그림에 메모한 주요 구현 기능들을 다시 한번 정리해보면, (네 번째 블록) 처음 페이지를 열었을 때, database(data.js에 등록된 DATA 배열의 요소들)를 tweet 창에 렌더링 할 것. (두 번째 블록) user name과 comment란에 내용을 입력하고, Tweet! 버튼을 눌러서, tweet 창(네 번째 블록)에 위로 쌓아 올리는 tweet을 넣어준다. (세 번째 블록) ch..