🐤 개발하는 참새 🌞

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] 무료로 호스팅하는 방법, 무료 도메인, 닷홈 사용법 안녕하세요 chamroro입니다. 🌞 오늘부터 웹 개발을 위해 필요한 기초 지식들을 정리해서 포스팅해볼까해요. 홈페이지를 운영하기 위해서는 서버 장비, 인터넷 회선 그리고 서버를 1년 365일 가동할 수 있는 최적의 환경을 갖춘 전산실과 서버를 관리할 엔지니어가 필요합니다. 일반적으로 웹(WWW) 공간을 임대(hosting)하는 것을 웹 호스팅(Web Hosting)이라고 합니다. 닷홈으로 웹 호스팅하기 인터넷에서 홈페이지를 운영하려면 인터넷 공간에 자신의 홈페이지를 올려두어야만 합니다. 자신의 컴퓨터에만 있으면 아무런 소용이 없습니다. 그 홈페이지를 인터넷 브라우저에서 올려놓고 홈페이지를 확인하려면 그 홈페이지와 연결될 수 있는 주소가 있어야 합니다. 이 홈페이지 주소를 도메인이라고 합니다. 그리고 홈..

이전 1 ··· 4 5 6 7 다음

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

티스토리툴바