HTML
-
Twittler(Twitter clone) 구현하기 - (5) random한 tweet 불러오기캡틴 코딩일기/javascript 2020. 3. 11. 14:00
Twittler(Twitter clone) 구현하기 - (5) random 한 tweet 불러오기 이번엔, check new tweet 버튼을 눌러서 random 한 user name - message를 불러와서, tweet창에 추가하는 함수에 대해 정리해보겠다. data.js 에 담긴 data는 user name과 message가 각각 분리된 '배열(array)'로서 저장되어있다. randomUser = []; randomMessage = []; 그리고, 내가 만든 함수는 아니지만 random한 index를 생성하는 함수가 미리 구현되어있었다. 이 포스팅을 정리하면서 처음 들여다보게 되었는데, MDN에서도 내용을 다루고 있어서 쉽게 이해가 되었다. (Math.floor / Math.random 을 검색..
-
Twittler 구현하기 - (4) HTML에 입력한 글을 javascript로 처리하기캡틴 코딩일기/javascript 2020. 3. 10. 13:00
Twittler 구현하기 - (4) HTML에 입력한 글을 javascript로 처리하기 벌써 twittler에 대한 네 번째 포스팅이라니! 이번에는 user name과 comment 아래에 만들어둔 text / textarea에 직접 입력하는 내용을 javascript 함수를 사용해서, new tweet으로서 추가하는 방법에 대해 정리하겠다. 지난 포스팅에서 다루었던 DOM관련 내용 중에, selector를 지정하는 방법은 네 가지가 있다고 언급되었다. 어떤 selector에도 사용이 용이한 'querySelector'를 사용하여 기능 구현에 대해 설명하려고 한다. 먼저, 입력 ~ 출력의 순서에 대해 정리해보았다. 1) user name과 comment 에 각각 해당하는 내용을 작성한다. 2) twee..
-
코딩 2.5개월차, 잘 모르겠다. (javascript, HTML/CSS)캡틴 코딩일기/HTML, CSS 2020. 2. 17. 02:55
코딩 2.5개월 차, 잘 모르겠다. (javascript, HTML/CSS) ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 작년 12월부터 수강을 시작한 코드스테이츠 Pre-course. 2.5개월을 넘어 3개월을 꽉 채우기 직전 단계에서 좀 힘들다. 핑계라며 마음가짐이 약해지는 자신에게 채찍질을 해 댔지만, 역시 평일에는 피곤해서 쉬이 컴퓨터에 손이 가지 않는다. (300만원짜리 맥북이라도 열기 싫더라.) Premium plus코스를 수강하고 있지만, 주중에 질문거리를 충분히 생각할 수 없는 지금의 환경이라면 주말에 출근(?)을 하게 되어도 '좋은 질문'을 '잘' 할 수 없게 된다. 금요일 저녁이 되어서야 부랴부랴 다음날의 학습 진도를 확인하고 토요일의 오피스아워에..
-
HTML / CSS : CSS box model에 대해서 알아보자캡틴 코딩일기/HTML, CSS 2020. 2. 9. 23:05
HTML / CSS : CSS box model에 대해서 알아보자 오늘은, HTML을 보기 좋게 꾸며주는 CSS의 기능 중에 box model에 대한 배움을 정리해보고자 한다. margin border padding contents 구글의 개발자 콘솔에서 Elements 탭을 열면, style 란에 위와 같은 박스 모델에 대한 그림을 볼 수 있다. 콘솔창의 문자들과 씨름을 하다 지친 눈이 금새 박스모델의 구성도로 향하게 되었던 기억이 있다. 텍스트 박스, 버튼 등 HTML로 구현하는 기능중심의 요소에 디자인을 부여하는 CSS. 박스 모델은 컨텐츠와 가장 가까이서 각종 항목들을 조정하여주는데. 한 번 제대로 공부하여 두는것 만으로도 여러모로 적용해보며 내가 원하는 디자인을 구현해볼 수 있다. padding..