티끌모아태산

JQuery : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 *html->css->javascript 순서로 적용 simple $(셀렉터).length : 요소의 개수를 얻기 위해 사용 each() : For~in(반복문) 처럼 각 요소마다 적용 $(this) : each() 함수 내에서 현재 접근 가능한 요소 text() : 엘리먼트에 대해 텍스트 내용을 얻는다. css() : 인자로 지정한 CSS 스타일을 선택한 요소에 적용 console.log("출력할 대상") one two three four five six ancestor descendant로 검색된 엘리먼트 : parent > child로 검색된 엘리먼트 : $(‘셀렉터’).append(‘..

스팬입니다. onload이벤트를 스크립트에 넣어주면 더 깔끔하게 코드를 작성할 수 있음. 1.아래의 코드처럼 스크립트에 바로 적용할 경우에는 스크립트가 읽히면서 바로 로드되므로 스크립트를 뒤로 빼준다. 스팬입니다. 2.윈도우가 로드될 때 실행 되도록 만들어줄 수도 있다.(윈도우는 가장 나중에 로드됨) 스팬입니다. 3.객체명을 분리해주는게 올바른 방법 document : 도큐먼트가 갖고있는 수많은 태그들을 가진 보따리 4.스크립트 코드의 지역화 먼저 window.onload = function() 만들어주고 => 필요한 도구들을 준비해서 => 이벤트 코드를 작성한다. 5.같은 이름의 함수가 만들어 졌을 때 덮어씌워지는 것을 방지하기 위해 이벤트리스너를 사용해줌 (js코드를 따로 분리해서 이용하면서 팀원들과..

문서 객체 : 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것 DOM 요소에 접근하기 1개 선택 document.getElementByld('아이디') 아이디로 1개 선택 document.querySelector('선택자') 선택자로 1개 선택 여러 개 선택 document.getElementsByName('이름') name 속성으로 여러 개 선택 document.getElementsByTagName('태그명') 태그명으로 여러 개 선택 document.getElementsByClassName('클래스') class 속성으로 여러 개 선택 document.querySelectorAll('선택자') 선택자로 여러 개 선택 요소의 내용을 수정(지정하거나 가져올 수 있음 textContent 문서 객체..

1.객체 생성 a.객체 변수로 객체 생성 b.배열 객체 생성 c.연관 배열 d.2차원 배열 2.내장 객체 a.Array 객체 b.Date 객체 c.Math 객체 3.브라우저 관련 객체 객체 생성 객체 변수로 객체 생성 var car = { name : "Sonata",//속성 speed : 100, color : "white", door : 4, start : funtion() {//메소드 return this.speed+10; } }; var exam = new Object(); exam.kor = 30; exam.eng = 40; exam.math = 50; 접근 방법 객체명.속성명 객체명['속성명'] car.name car['speed'] 배열 객체 생성 //초깃값 있을 때 var 배열명 = [원소..

JavaScript : HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어 html->css->javascript 순서로 적용 변수 var : 값을 여러번 새로 넣을 수 있는 데이터(재선언, 재할당 가능) var 변수 호이스팅 : 변수를 뒤에서 선언하지만, 마치 미리 앞에서 선언한 것처럼 인식(선언한게 자동으로 맨위로 올라감) var x = 10; function displayNumber() { console.log("x is " + x); console.log("y is " + y); var y = 20; } displayNumber(); →x is 10 y is undefined//변수가 밑에서 선언됐는데도 오류가 나는게 아니라 할당값이 없다고 뜸 //아래와 같이 인식하기 때문에 var ..

반응형 웹 디자인 : 화면 크기에 ‘반응’해 화면 요소들을 자동으로 바꾸어 사이트를 구현 뷰포트 뷰포트 : 웹 페이지가 브라우저 화면상에서 실제로 표시되는 영역 속성 - width (뷰포트 너비) : device-width 또는 숫자값을 사용해 지정 - height (뷰포트 높이) : device-width 또는 숫자값을 사용해 지정 - user-scalable (사용자의 확대/축소 가능 여부) : yes(기본값) 또는 no - initial-scale (초기 확대/축소 값) : 1~10 단위 (viewport를 기준으로 한 상대적 사이즈) - vw(viewport width) : viewport 너비의 1/100 (1vw는 뷰포트 너비의 1%와 같다.) - vw(viewport width) : view..

transition-property 변형(transform) 변형 : 특정 요소의 크기나 형태 등 스타일이 바뀌는 것. 2차원 변형 : x,y 좌표로 이동 3차원 변형 : x,y,z 좌표로 이동(원근감 추가) translate 함수 : 지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킴 - translate(tx, ty) - translate3d(tx, ty, tz) - translateX(tx) - translateY(ty) - translateZ(tz) #movexy:hover { transform: translate(10px, 20px); /* x축으로(가로) 10px, y축으로(세로) 20px 이동 */ } scale 함수 : 지정한 크기만큼 요소를 확대/축소(넓어지고 좁아짐) - sca..

CSS 기본 선택자 종류 사용 방법 설명 전체 선택자 * {속성선언;} 모든 태그에 스타일을 적용한다. 타입 선택자 태그 {속성선언;} 지정한 태그에 스타일을 적용한다. 클래스 선택자 .클래스이름 {속성선언;} 지정한 클래스에 스타일을 적용한다. 아이디 선택자 #아이디 {속성선언;} 지정한 아이디에 스타일을 적용한다. 속성 선택자 [속성] {속성선언;} [속성=값] {속성선언;} 지정한 속성 또는 속성값이 있는 태그에 스타일을 적용한다. 그룹 선택자 : 쉼표로 여러 선택자를 한꺼번에 정의해줄 수도 있다. +클래스 그룹 선택자 .a, .b, .c{} : 콤마는 각각의 항목을 or로 적용한다. .a .b .c{} : 뒤에 나온 선택자가 하위 개체로 지정된다.(A요소 내부의 B요소 내부에 있는 C요소에만 적용..

블록 레벨 요소 : 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 (자신이 속한 영역의 너비를 100% 차지함) =>margin, width, height 속성을 정의하면 모두 적용됨. 인라인 레벨 요소 : 줄을 차지하지 않는 요소. 컨텐츠만큼 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. =>상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않음. 블록 레벨 , ~, , , , , , , , , 인라인 레벨 , , , , , , , , , , display : 레벨 요소를 변경시켜줌 -block : 인라인 레벨 요소 -> 블록 레벨 요소 -inline : 블록 레벨 요소 -> 인라인 레벨 요소 -inline-block : 인라인 레벨 요소로 배..

인라인 스타일 : 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것 외부 스타일 시트 : 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용 (같은 폴더에 있으면 그냥 파일명만 주고, 다른데에 나와있으면 폴더명까지 같이 적어서 경로(위치)를 표시해 준다.) CSS 기본 선택자 종류 사용 방법 설명 전체 선택자 * {속성선언;} 모든 태그에 스타일을 적용한다. 타입 선택자 태그 {속성선언;} 지정한 태그에 스타일을 적용한다. 클래스 선택자 .클래스이름 {속성선언;} 지정한 클래스에 스타일을 적용한다. 아이디 선택자 #아이디 {속성선언;} 지정한 아이디에 스타일을 적용한다. 속성 선택자 [속성] {속성선언;} [..