본문 바로가기

유트브로 코딩배우기

[자기계발]/유튜브로 코딩배우기 2021. 8. 23. 코딩 초보 반응형 웹사이트 만들기 피드백 드림코딩엘리 채널에서 반응형 웹사이트 만들기 실습을 해보았다. 따라 쓰는 것은 누구나 다 할 수 있으므로 여기서 제안하는 것은 먼저 결과물을 '스스로' 만들어보라는 것이다. 그래서 한 번 해보았다. 1차 시도: 30분 but 매우 허접함 이후 영상을 한 번 시청하여 아이콘, 폰트를 로드하는 사이트와 전체적인 윤곽을 배웠다. 2차 시도: 총 2시간이 걸렸고, 비슷하게 만들었으나 JavaScript 쪽으로 까지 미치지는 못하였다. 이후 영상을 시청하여 HTML과 JS를 연결시키는 방법과 여러 디테일에 관해 배웠다. 밑에 정리를 하였고, 이 지식을 바탕으로 3차 시도를 해볼 것이다. 3차 시도: 총 2시간 반이 걸렸고, HTML과 CSS에서 2가지 상황에서 막혔었다. 또한 CSS에서 :hover 를 a에다가 ..
[자기계발]/유튜브로 코딩배우기 2021. 8. 6. [드림코딩 엘리] 자바스크립트 배열 개념 & APIs 정리 토끼와 당근 같은 비슷한 타입의 Object들을 묶어 놓는 것을 바로 자료구조라고 한다. 보통 다른 언어에서는 이런 자료구조에 동일한 tpye의 object만 담을 수 있다. 하지만 자바스크립트는 dynamically typed language로 type이 동적으로 정의가 된다. 즉, 한 바구니 안에 다양한 종류의 data들을 담을 수 있다. 그러나 이런식으로 프로그래밍 하는 것은 좋지 않다. 나중에는 자료 구조와 알고리즘을 꼭 공부해야하는데, 새로운 데이터를 얼마나 효율적으로 검색 / 삽입 / 정렬 / 삭제할 수 있는지 이런 효율성을 같이 공부하면 매우 도움이 될 것이다. 나중에 어떤 문제를 해결 하느냐에 따라서 많은 자료 구조들 중에 어떤 자료구조를 선택하는지, 그 선택할 때 '검색 삽입 삭제 정렬'..
[자기계발]/유튜브로 코딩배우기 2021. 7. 7. [생활코딩] jQuery 동적인 애니메이션 효과 알아보기 이번 편에서는 jQeury 애니메이션 효과를 이용하여 웹페이지를 보다 동적으로 보여주는 기법에 대해 알아볼 것이다. 효과란? JavaScript와 CSS를 이용해서 HTML element에 동적인 효과를 줄 수 있다. jQuery의 효과 method를 호출하는 것만으로 간단히 효과를 줄 수 있다. 1) fadeout, fadein, hide, show, slidedown, slideup, mix 예제 target e.target 은 event가 발생한 element를 받아낸다. 이것을 wrapper $로 감싸서 this에다가 저장한다. →fadeout을 클릭하면 이 element에 대한 object값을 전달 한다 그 뒤에는 swtich 문이 나온다. $this.attr('id)가 나오는데 주어진 elem..
[자기계발]/유튜브로 코딩배우기 2021. 6. 27. [생활코딩] jQuery 폼(form) 이란? 잠시 쉬었던 코딩 공부를 다시 하려고 한다. 이번 편에서는 jQuery form에 대해서 알아보자. 폼(forms) 서버로 데이터를 전송하기 위한 수단이며 jQuery는 forms을 제어하는데 필요한 event와 method를 제공한다. Forms | jQuery API Documentation Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Bind an event handler to the “focus” JavaScript ..

티스토리툴바