'🐤 Web' 카테고리의 글 목록 (3 Page)

[Javascript plugin] Masonry Layout 적용하기 메이슨리 레이아웃 ( Masonry Layout )을 이용하면 크기가 다른 컨텐츠를 효율적으로 배치할 수 있다. 빈영역을 최소화할 수 있으며 지겨운 스타일로부터 벗어나 자유로운 느낌을 주기도 한다! 핀터레스트가 이러한 레이아웃을 사용하는데, width는 고정하고 height는 설정하지 않은 것으로 보인다. 구글링을 해보니 오직 css로만 구현하는 방법도 나오긴 하던데.. 효율충인 나는 더 간편한 자바스크립트 라이브러리를 사용하려한다. https://masonry.desandro.com/ Masonry Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower: bower install ma..

JQuery 정복하기 4 (탐색, animation, ajax) 탐색 체인 컨텍스트를 유지하면서 제어의 대상이 되는 엘리먼트를 변경하는 기법 http://api.jquery.com/category/traversing/ 📍 예제 javascript을 입력 한 후에 엔터를 눌러주세요. .add(selector)엘리먼트를 추가한다 .andSelf()현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다 .children([selector])자식 엘리먼트를 선택한다 .closest(selector)가장 가까운 selector 조상 엘리먼트를 탐색한다 .each(function(index,Element))현재 엘리먼트 셋에 반복 작업을 실행한다 .end()이전 체인 컨텍스트로 돌아간다. .eq(index)현재 엘리먼트 셋에서 index에 해당하는 엘리먼트를 선택한다 .filter(s..

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 wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 ..

JQuery 정복하기 1 (Library, JQuery, javascript와 비교) 작년에 자바스크립트 할때 잠깐 공부하고 연습 조금 했던 JQuery를 다시 파보려 한다. 거의 노베이스에 가깝기 때문에 이 글은 정말 A부터 시작한다 🐥 우선 노하우...라고 하긴 너무 거창해보이니까.. 공부법을 소개해보자면 필자는 공식문서를 중요시 여긴다. 코딩할 때 가장 중요한 언어가 영어 (우리 교수님께서 많이 하시는 말씀이다) 인 이유가 공식문서나 영어로 이루어진 문서를 읽기 위함이라는 말이 있다. TMI지만 컴공 공부하면서 구글링도 많이 하고 영문서를 많이 봤더니 영어공부 하나도 안했는데 토익점수가 올랐다 (..?) 하지만 절대 공식문서로 공부를 시작하지 않는다. 공부를 시작하려면 공부해야할 것이 무엇인지를 먼저 감을 잡아야하는데, 공식문서에 적인 딱딱한 영어 설명으로는 나에게 와닿지 않기 때문..

[웹 개발을 위한 기초지식5] javascript로 동적 사이트 만들기 자바스크립트(JavaScript)란? 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다. HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다. 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다. 제가 만든 사이트에서는 마우스를 올렸을 때 자바스크립트를 이용하여 디테일한 설명을 볼 수 있도록 에니메이션을 추가하였습니다. 🐤 source code jQuery(document).ready(function ($) { $('#check..

[웹 개발을 위한 기초지식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줄로 바뀝니다. 또한..

[웹 개발을 위한 기초지식3] html로 웹사이트 만들기 지난 [웹 개발을 위한 기초지식3] 포스팅에서 마지막에 조금 공개됐던 http://chamroro.dothome.co.kr/index.html 바로 이 페이지! 만들기 위해 사용된 html 에 대한 내용을 정리해볼까 합니다 전체적인 골격은 이 덩어리 6개로 이루어져있습니다. 🌞 : 제일 많이 보이는 태그로, div태그는 Division의 약자입니다. 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다. 🌞 : ..

[웹 개발을 위한 기초지식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 2 3 4 다음

라이브러리 브랜드 그룹 | 🐤 개발하는 참새 🌞

티스토리툴바