가희의자기개발블로그

display는 화면이 표시될때 특정 영역이 표시 되는데 성질을 부여하는 속성이다. 즉, 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다. 1_ inline display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 대표적으로 이나 태그 등이 있다. 이 inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시가 된다는 것이다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다. 또한, margin과 padding속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다. 2_ block block으로 지정된 엘..

01_속성값 구하기 $대상.attr("속성이름") $대상.ata("data-속성이름") 일반 속성 값을 구할 때는 attr()메서드를 사용하고 "data-"로 시작하는속성의 경우 data()메서드를 이용하면 좀 더 쉽게 속성값을 구할 수 있다. 01_속성값 설정하기 $대상.attr("속성이름","값") $대상.data("data-속성이름","값")

일반적으로 속성은 일반 속성과 사용자 정의 속성이 있다. 일반 태그의 id와 class 그리고 태그에 링크 정보를 담는 href와 태그의 이미지 정보를 담는 src등을 일반 속성이라 부르며 data-value와 같이 사용자가 필요에 의해서 만들어 사용하는 속성을 사용자 정의 속성이라고 한다.

Scope란? 자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지를 정의한다. 스코프에는 두 가지 종류가 있는데 바로 전역 스코프와 지역 스코프이다. 전역 스코프 전역 스코프는 변수가 함수 바깥이나 {} 바깥에서 선언되었다면, 전역 스코프에 해당한다. const hello = 'Hello Marcus' function marcusHello () { console.log(hello) } console.log(hello) // 'Hello Marcus!' sayHello() // 'Hello Marcus!' 비록 위와같이 전역 스코프를 이용하여 변수를 선언할 수 있지만 그렇지 않는게 좋습니다. 왜냐하면, 두 개 이상의 변수의 이름이 충돌하는 경우가 생길 수도 있기 때문이죠 실제로 초기 프로그래밍 언어는..

01_Hoisting의 개념 모든 변수 선언은 호이스트 된다. 호이스트란, 변수의 정의가 그 범위에 따라 선언(declaration)/초기화(initialization)/할당 분리 되는것을 의미한다. 즉, 변수가 함수내에 정의 되면 선언이 함수의 최상위로, 함수 바깥에서 정의 되었을 경우 전역 컨텍스트의 최상위로 변경된다. 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. - 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. - 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. - 유효 범위: 함수 블록{}안에서 유효하다. 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리..

JavaScript에서 변수를 선언하는 방식은 var과 let 그리고 const가 있다. 이 세개를 비교하기 위해서는 몇가지 고려해야할 사항이 있다. 바로 변수 값의 변환 변수의 유효범위 호이스팅 1_변수 값의 변환 JavaScript를 사용할 때 흔히 말하는 큰 문제점은 변수 선언의 방식이다. var을 이용할 경우 할당되는 값이 유동적으로 변경될 수 있다. 예를 들어 var name = "Gahui"; var name ="Minho"; console.log(name) // Minho name이라는 변수를 두번 선언 했음에도 불구하고 에러가 뜨지 않고 2번째 변수가 첫번째 변수 값을 덮어 씌워 버린다. 이런 문제점들로 인해 let과 const는 var와 같은 선언 방식을 막고 있다. let name = ..

01_스타일 값 구하기 $대상.css("스타일 속성이름") $대상.css("스타일 속성이름","스타일 속성이름", ...) 02_스타일 값 설정하기 $대상.css("속성이름","값") $대상.css({ 속성이름:값 속성이름:값 }) css()메서드는 스타일 속성값을 설정할 때도 사용된다. 03_클래스 추가 $대상.addClass("클래스 이름1[클래스 이름2 ...]") addClass() 메서드를 이용하면 노드에 하나 이상의 클래스를 추가할 수 있다. 04_클래스 삭제 $대상.removeClass() $대상.removeClass("클래스 이름1[클래스 이름2 ...]") ※toggleClass() 이 메서드는 클릭시 해당 클래스가 있으면 제거해주고 없으면 생성해준다.

01_스타일을 다루는 방법 스타일을 다루는 방법은 두 가지가 있다. 정적인 방법 작성한 스타일을 직접 변경하는 방법을 말하며 스타일 변경 후 문서를 재실행해야 한다. 동적인 방법 웹 문서를 실행한 상태에서 자바스크립트와 jQuery를 이용해 스타일을 다루는 방법을 말한다. 문서를 재실행할 필요가 없다. 02_jQuery를 활용한 스타일 다루는 방법의 특징 스타일 역시 jQuery에서는 스타일을 좀더 쉽게 다룰 수 있는 다양한 기능을 제공한다. 02_1_스타일 위치와 관계 없이 스타일 속성 접근 가능 자바스크립트를 이용하는 경우 자바스크립트의 경우 인라인 스타일이냐 아니냐에 따라 스타일 속성 접근 방법이 다르다. 우선 style속성으로 접근할 수 있는 스타일 속성은 인라인 속성만을 접근할 수 있다. 내부,..