JQuery 정복하기 3 (event, element, form) 이벤트란?시스템에서 일어나는 사건을 의미javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.jQuery의 이벤트크로스브라우징의 문제를 해결해줌bind로 이벤트 핸들러를 설치하고, unbind로 제거 (예제1) (on,off로 업데이트 됨)trigger로 이벤트 핸들러를 강제로 실행 (예제2)click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음예제1. on, off, trigger를 이용한 이벤트의 설치, 제거, 호출 ..
JQuery 정복하기 2 (wrapper, 선택자, chain) 래퍼(wrapper)란?jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')bold 표시한 부분이 래퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환한다.레퍼의 안전한 사용$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용한다.제어 대상을 지정하는 방법jQuery( selector, [context] )jQuery( element )예제 1. jQuery( selector, [context] ) test2 test 예제 2. jQuery( element ) ..
JQuery 정복하기 1 (Library, JQuery, javascript와 비교) 작년에 자바스크립트 할때 잠깐 공부하고 연습 조금 했던 JQuery를 다시 파보려 한다.https://www.samsungsds.com/kr/insights/jQuery.html라이브러리란?(library)자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들jQuery란?엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리Hello world - 첫번째 jQuery🌞 사용방법직접 서비스 하는 경우https://jquery.com/download/ 에서 jquery 소스코드를 다운로드 한다.위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다.구글의 자바스크립트 라이브러리를 ..
[웹 개발을 위한 기초지식5] javascript로 동적 사이트 만들기 자바스크립트(JavaScript)란?자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.제가 만든 사이트에서는 마우스를 올렸을 때 자바스크립트를 이용하여 디테일한 설명을 볼 수 있도록 에니메이션을 추가하였습니다.🐤 source codejQuery(document).ready(function ($) { $('#checkbox..
[웹 개발을 위한 기초지식4] html에 css로 스타일 입히기 지난번 소개해드린 html코드에 이번엔 css를 입힘으로써 조금 더 예쁜 사이트로 만들어볼텐데요!우선 responsible page로 만들기 위하여 추가한 코드를 살펴볼게요/* Responsive CSS */@media (max-width: 1080px){ .image{ flex: 100%; max-width: 480px; }}@media (max-width: 400px){ .image .details p{ font-size: 12px; } .more .read-more, .more .icon-links a i{ font-size: 18px; }}screen width에 따라 세개의 버전으로 나뉩니다.1080을 기준으로 더 클 땐 grid가 3개씩 나뉘지만, 작을 땐 1줄로 바뀝니다.또한 400보..
[웹 개발을 위한 기초지식3] html로 웹사이트 만들기 지난 [웹 개발을 위한 기초지식3] 포스팅에서 마지막에 조금 공개됐던http://chamroro.dothome.co.kr/index.html 바로 이 페이지!만들기 위해 사용된 html 에 대한 내용을 정리해볼까 합니다전체적인 골격은 이 덩어리 6개로 이루어져있습니다.🌞 : 제일 많이 보이는 태그로, div태그는 Division의 약자입니다. 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다.🌞 : i..
[웹 개발을 위한 기초지식2] 개발 환경 설정하기, vscode+extensions(sftp, html snippets), filezilla client, 한글설정 등 지난 [웹 개발을 위한 기초지식1] 에 이어 오늘 다룰 내용은 본격적인 개발 환경 설정에 관한 내용입니다.1. vscode 설치https://code.visualstudio.com/2. vscode extension 설치설치해야할 extension은 sftp, html snippets 이렇게 두개입니다! 이외에도 작업할 때 있으면 편한 estenstion 들이 많이 있는데요! 이건 나중에 몰아서 vscode extension 추천 포스팅으로 가져올게요 🌞대부분 로컬에 서버가 존재하지 않으며, 원격에서 작업을 많이 합니다.코드를 패치한 것을 저장하고 다시 서버에 올려서 적용하고, 이러한 작업은 여간 번거로운 일이 아닌데요 ..이러한 수고를 덜어주는 것이 에디터에 SFTP 동기화 기능인데 패치된 코드를 지..
[웹 개발을 위한 기초지식1] 무료로 호스팅하는 방법, 무료 도메인, 닷홈 사용법 안녕하세요 chamroro입니다. 🌞 오늘부터 웹 개발을 위해 필요한 기초 지식들을 정리해서 포스팅해볼까해요. 홈페이지를 운영하기 위해서는 서버 장비, 인터넷 회선 그리고 서버를 1년 365일 가동할 수 있는 최적의 환경을 갖춘 전산실과 서버를 관리할 엔지니어가 필요합니다. 일반적으로 웹(WWW) 공간을 임대(hosting)하는 것을 웹 호스팅(Web Hosting)이라고 합니다.닷홈으로 웹 호스팅하기인터넷에서 홈페이지를 운영하려면 인터넷 공간에 자신의 홈페이지를 올려두어야만 합니다. 자신의 컴퓨터에만 있으면 아무런 소용이 없습니다. 그 홈페이지를 인터넷 브라우저에서 올려놓고 홈페이지를 확인하려면 그 홈페이지와 연결될 수 있는 주소가 있어야 합니다. 이 홈페이지 주소를 도메인이라고 합니다. 그리고 ..