yubyeong

이벤트 핸들러 등록하기 HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록한다. Element.addEventListener('event', 'handler')를 통해서 이벤트 핸들러를 등록. //ex) 버튼 클릭시 이벤트 실행 btn.addEventListener('click', event1); btn.addEventListener('click', event2); 이벤트 핸들러 삭제하기 Element.removeEventListener('event', 'handler')를 통해서 이벤트 핸들러를 삭제. //ex) 등록한 이벤트 핸들러 삭제 btn.removeEventListener('click',event2); click 이벤트 외 다양한 이벤트 (더 보기 Click.) 더보기 마우스 이벤트 m..

인터랙티브 웹이란? - Interactive = 상호작용 - 다양한 기술을 통해 역동적이고 효과적인 웹사이트 - 프론트 영역에서 역동적이고 화려한 디자인, 애니메이션적의 부분이 강조된 웹사이트 id로 태그 선택하기 document.getElementById(); document 객체의 getElementById 메소드로 id속성의 태그를 선택할 수 있다. const myTag = document.getElementById('id'); console.log(myTag); class로 태그 선택하기 document.getElementsByClassName(); document 객체의 getElementByClassName 메소드로 class 속성의 여러 태그를 선택할 수 있다. const myTags = d..

JS란? JavaScript는 동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어이다. 즉 '웹 페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어이다. JS를 본격적으로 다루기 전에 알아야 할 꼭 지켜야 하는 룰이 있다. (1) JavaScript 식별자는 '문자 (a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 한다. 두 번째 글자부터는 '숫자 ( 0-9 )'도 가능하다. (2) '대문자'와 '소문자'는 구별. myname과 myName은 다른 이름이다. (3) '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 된다. 예를 들어서 if, for, let 같은 것 들이 있..

객체(object) 값 이름 : ‘값’ → 지정 값 이름을 key, 값을 value 라고 부른다. key와 value 한 쌍을 속성(Property)이라고 한다. key를 Property Name , value를 Property Value라고 한다. Property Name 첫 번째 글자는 반드시 문자, 밑줄_, 달러기호$ 중 하나로 시작. 띄어쓰기 금지. 하이픈(-) 금지. 이런 규칙을 지키지 않으면 “”따옴표로 감싸주면 된다. Property Value 모든 자료형 사용 가능. 객체 안에 있는 여러개의 property는 쉼표,로 구분해야 한다. 점 표기법 (objectName.propertyName) 따옴표를 생략할 수 없는 propertyName(띄어쓰기)은 사용 불가능하다. 대괄호 표기법 (obj..

if문 if (조건부분) { 동작부분1 ; } else { 동작부분2 ; } 조건이 맞으면 if문의 동작부분 1 실행 조건이 틀리면 else문의 동작부분2 실행 else if 문 여러가지 조건이 있을 때 if문 안에 else if 문을 활용함. if (조건부분1) { 동작부분1 ; } else if (조건부분2) { 동작부분2 ; } else { 동작부분3 ; } switch문 switch (비교할_값) { case 조건값_1: 동작부분; break; case 조건값_2: 동작부분; break; default: 동작부분; } break 문을 만나야 동작을 종료함. switch문을 if문으로 대체할 수 있음. 범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 효과적이고, 특정값을 만족하는 조건식을..

할당 연산자 = → 할당연산자 오른쪽의 피연산자를 왼쪽의 피연산자에 지정해주는 것. ex) let x = 5; x = x - 2; console.log(x); → 3 할당 연산자와 결합하여, 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 하는 연산자를 복합 할당 연산자 라고 한다. ex) x = x +1; x += 1; 두 개의 줄은 같다. ex) x = x * 2; x *= 2; 마찬가지로 두 줄은 같은 의미이다. 변수의 값을 1씩 증가 시키거나 감소 시킬 때는 증가, 감소 연산자를 사용한다. ex) x = x + 1; x += 1; x++; 3줄 모두 같은 의미이다. return문 어떤 값을 되돌려주는 아웃풋의 역할 함수 자체의 실행을 중단한다. return문이 실행되고 나서는 함수 실행이 중단되기에 ..

태그 : 페이지 이름 (화면에 보이지 않음) 제목 : … ~ … : 숫자가 낮아질수록 더 큰 제목. 단락 : … 단락과 단락 사이 여백이 생김. 줄 바꿈 : 영역 나누기 : … (박스를 친다고 생각.) 속성 : 시작 태그에 속성 이름="속성 값"형태로 사용하는 문법. 예시 1: 태그의 href 속성 (하이퍼링크) 링크 예시 2: 태그의 src 속성(이미지) CSS 속성 링크 링크의 상대 주소(Relative URL) 현재 폴더는 점 한 개(./)로 표시하고, 상위 폴더는 점 두 개(../)로 표시합니다. 최상위 폴더는 경로 맨 앞에 / 로 시작하면 됩니다. 특별히 index.html 파일은 이름을 생략하고 폴더 이름만 쓸 수 있습니다. URI 프래그먼트(URI Fragment) 페이지의 특정 부분을 가리..

블록(Block) 위에서 아래로 차례대로 배치되는 요소. 크기를 지정할 수 있다. 다음 태그들은 기본적으로 display 값이 block. , , …, 인라인(Inline) 글을 쓰는 방향으로 줄이 바뀌면서 배치. 블록과 달리 크기를 지정할 수 없다. 다음 태그들은 기본적으로 display 값이 inline. 참고로 이미지 같이 외부 데이터를 보여 주는 태그는 인라인이지만 크기를 지정할 수 있다. 인라인 블록 (Inline-block) 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성. float 속성 float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있다. 블록, 인라인 블록, 인라인 비교 블록 인라인 블록 인라..