목록ALL CONTENTS
안녕하세요 😁 이번에 결혼하는 예랑이입니다..! 대부분이 그렇겠지만 결혼식을 처음하시는 분들이라면 예식장, 스튜디오, 드레스, 메이크업 등등.. 선택의 폭이 너무 넓고, 어떤 업체를 선정해야할지 많은 분들이 고민하실거라 생각하는데요~ 저와 예신이는 선택장애가 심해서 결국 웨딩 플래너를 껴서 스드메를 선택했습니다..! 하하..😅 하지만 저희 부부가 결혼식에서 제일 중요하게 생각하는 것은 먼 훗날에 가장 이쁘고 젊을때의 기억에 남기고 싶은 맘이 커서 결혼식날에 추억을 담기 위해 본식 스냅뿐만 아니라 생생하게 그날의 기억을 느낄 수 있게끔 해주는 본식 DVD를 추가적으로 선정했습니다! 둘다 신중하게 골랐지만 본식 스냅보다도 본식 DVD를 더 신경써서 선택하였는데요! 그래서 여러분들께 제가 고민하고 선택한 업체..
event.stopPropagation() 또는 e.stopPropagation() 을 이해하기 위해서는html 상에서 사용자 이벤트가 어떻게 전달되는지를 이해해야합니다. 웹에서의 이벤트 전파(Event Bubbling) 만약 사용자가 웹페이지 내의 버튼을 클릭했을때 대부분의 사용자들은 버튼만 반응했다고 생각하게 됩니다.하지만, 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 예를 들자면 div 태그 하나만 클릭했을 뿐인데 3개의 이벤트가 발생하게 됩니다. 그 이유는 브라우저가 이벤르를 감지하는 방식 때문입니다. 브라우저는 특정 화면요소에 이벤트가 발생했을 때그 이벤트를 최상위에 있는 화면요소까지 이벤트를 전파시킵니다. 따라서 위에 콘솔창 이미지로 보이듯이 chi..
함수선언식(Function Declarations) 이란? 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식입니다. function 함수명() { // 내용 }; //예시 function abc() { return 'abcdefghijklmnopqrstuvwxyz' } abc(); // 'abcdefghijklmnopqrstuvwxyz' 함수표현식(Function Expressions)이란 ? 유연한 자바스크립트 언어의 특징을 활용한 선언 방식 var 함수명 = function () { // 내용 } //예시 var abc = function () { return 'abcdefghijklmnopqrstuvwxyz' } abc(); // 'abcdefghijklmnopqrstuvwxyz' 함수 선언식..
여러개의 요소를 셀렉트하는 방법은 $('AAA BBB CCC').on('XXX', function () { // (X) 요소사이에 ',' 를 넣어주어야됩니다. }); $('AAA, BBB, CCC').on('XXX', function () { // (O) aaa,bbb,ccc 의 요소를 한번에 잡을 수 있습니다. }); 이벤트를 바인딩하는 방법을 보여드리면 $('AAA').click(function () { //하나의 이벤트 밖에 바인딩할 수 없습니다. }); 하지만 Jquery 1.7 부터는 .bind() 나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 바인딩합니다. .on() 메소드는 다음과 같은 특징을 가지게 됩니다. 1. 선택한 요소에 어떤 타입의 이..
인수란(Argument) ? 값, 변수, 참조 등 전달되는 값 을 의미합니다. 매개변수란(Parameter) ? 함수 등에서 사용되는 전달된 값 을 받는 변수를 의미합니다. function abc(a,b) { // a, b는 매개변수(Parameter)를 의미합니다. return a + b }; abc(1,2); // 1,2는 인수(Argument)를 의미합니다.
프로토타입을 사용하는데에 장점은 ? 객체지향적이고 상속을 사용한다라는 점과 프로토타입 객체를 사용하면 객체가 프로토타입의 프로퍼티를 상속할 수 있어서 각 객체에 필요한 리소스의 양을 대폭 줄일 수 있다는 장점이 있습니다. 프로토타입의 방식은 2가지로 나뉘게 되는데, Classical 방식과 Prototypal 방식이 있습니다. 두가지의 결과는 같지만 차이를 알아봅시다. 먼저 Classical 방식을 보면 function Point(x,y){ this.x = x; this.y = y; } // 객체 생성 number = new Point(5,5); number2 = new Point(3,3); // 프로토타입에 메서드를 추가 Point.prototype.add = function(){ return this..
$(document).ready vs $(window).load() & $(window).on('load') vs body.onload $(document).ready() 는 외부 리소스, 이미지와는 상관없이 브라우저가 DOM(document Object Model) 을 생성한 직후에 실행 $(window).load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됩니다. $(window).load() 또는 $(window).on('load') DOM(Document Object Model) 의 Standard 이벤트 입니다.HTML의 로딩이 끝난 후 실행 되고, 화면에 필요한 모든 요소 (image, css, javascript 등)들이 웹 브라우저 메모리에 모두 올려진 다음에 ..
placeholder 에서 줄바꿈을 하려면? □□□ 는 ?! 이것만 넣어주면 됩니다.
CSS 가상요소(:after , :before)를 통해 추가된 컨텐츠의 내용을 줄바꿈하는 방법 HTML 과 CSS(혹은 SCSS) after 결과 안녕하세요 줄바꿈입니다.
본 글은 Javascript Scope and Closure by Zell Liew 의 번역 글입니다. 스코프(Scope) 란 ? Javascript에서 스코프(Scope) 란 어떤 변수들에 접근할 수 있는지를 정의합니다.스코프엔 두가지 종류가 있는데요, 이는 전역 스코프(global scope) 와 지역 스코프(local scope) 로 나뉩니다. 전역 스코프(Global Scope) 란? 변수가 함수 바깥이나 중괄호 ( { } ) 바깥 에 선언되었다면, 전역 스코프 에 정의된다고 합니다. const globalVariable = 'some value' 전역 변수를 선언하면 코드 모든 곳(함수 포함)에서 해당 변수를 사용할 수 있습니다. const hello = 'Hello World!'; functi..
var 는 function-scoped 이고, let , const 는 block-scoped 입니다. 여기서 function-scoped 과 block-scoped 가 무엇인가는 스코프 관련글에서 설명 드리겠습니다. var (function-scoped) // var는 function-scope이기 때문에 for문이 끝난다음에 a를 호출하면 값이 출력이 됩니다. // 이건 var가 호스팅 되었기 때문입니다. for(var a=0; a
패턴 해석 IE9~ IE8 IE7 * 모든 요소 선택 O O O #id ID값으로 지정된 요소를 선택 O O O .class Class값으로 지정된 요소를 선택 O O O E Element 요소 선택 O O O E:link 방문하지 않은 Element를 선택 O O O E:visited 방문한 Element를 선택 O O O E:hover 마우스가 Element에 올라가 있는 상태의 Element를 선택 O O O E:active 마우스 클릭 또는 키보드가 눌린 상태의 Element를 선택 O O O E:focus Focus가 머물러 있는 동안 Element를 선택 O O X E:first-line Element 요소의 첫번째 라인을 선택 O O O E:first-letter Element 요소의 첫번째..