월드스토리의 코딩 나라

addEventListener  1. 해당 DOM 요소에다 특정 조건에서 발동되는 함수를 추가시키는 메소드 addEventLister 이벤트의 종류click : 마우스를 클릭했을 떄 발동되는 이벤트Mouseover : 요소에 커서를 올렸을 떄 발생되는 이벤트Mouseout : 마우스가 요소를 벗어났을 떄 발생되는 이벤트Mousedown : 마우스가 버튼을 누르고 있는 상태Keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생 Keydown: 키를 누르는 순간에만 발생 Keyup: 키를 눌렀다가 떼는 순간 르고 있을 떄 발생되는 이벤트Focus : 포커스가 DOM 요소에 있을 떄.Blur : 포커스를 다른 요소로 이동시켰을 떄 발생Load : 웹페이지의 모든 파일(html, css, js등)..

# DOM란 무엇인가?1. Document Object Model의 약자.2. HTML 문서의 집합으로 포현하여 컴퓨터로 하여금 문서에 접근할 수 있도록함.3. HTML 문서는 각각의 node와 object의 집합으로 문서를 표현함.4. node 또는 object에 id, name 등을 통해 접근하여 문서 구조/스타일/ 내용을 변경할 수 있도록 도와줌.5. 각각의 object에 접근할 떄엔 트리 구조를 따라야함, 즉, 자식요소에서 부모의 부모요소로 바로 갈 수 없음. 1. Document 객체란?웹페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 떄 사용되는 객체  DOM 테그는 주로 어떻게 사용되는가?1. 새로운 HTML 요소나 속성의 추가2. 존재하는 속성의 제거3. HTML 문서의 모든 ..

#. Javascript 표준 객체1. 자바스크립트에서 기본적으로 제공하는 객체.2. 프로그래밍을 하는데 기본적으로 필요한 도구대표적인 사례 : String, Number, Array, Date, Math 등등 첫번쨰 : Date 객체1. 매 순간 바뀌는 시간과 날짜에 대한 정보를 얻기 위해 사용하는 객체. 대표적인 Date 객체 -함수Date.now() : 현재 시간을 출력함.Date. getFullYear() : 현재 년도를 출력함.Date.getDate() : 현재 일자를 출력함.Date.getDay() : 현재 날짜를 출력함 두번쨰 : Math 객체1. 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 표준 내장 객체2. 웹 브라우저마다 다른 결과를 얻을 가능성이 있기에 정확한 결과를 얻어..

1). JavaScript의 정의 - 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어.- 동적기능, 동적처리, 이벤트 처리, 슬라이드 메뉴 등 다양한 역할을 한다. 2). JavaScript의 작성 위치에 따른 차이.1. Script 테그가 head에 위치한 경우- Script 테그가 보이면 HTML 파싱을 멈추고 스크립트 파일을 실행한다.- 하지만 파일의 양이나, 크기가 커지면 급격히 느려진다. 또한 DOM 요소에 접근을 시도할 때 문제가 발생될 여지가 있다.2. Script 테그가 body 내 끝 부분에 위치한 경우- 패이지가 완성된 이후, 스크립트 파일을 읽어간다.- 장점 : HTML 컨텐츠에 접근하기 수월하다.- 단점 : JavaScript에 의존적인 페이지..

1. 반응형- 사용자가 이용하고 있는 디바이스의 해상도에 따라 웹 사이트의 모습이 달라지는 것을 뜻함.- 사용자에게 보여지는 화면은 하나이지만, 웹사이트의 해상도에 따라 최적화된 CSS 스타일시트가 적용되도록 하는 것. 2. 적응형 웹페이지에서 감지한 기기를 기반으로, 미리 만들어진 정적 레이아웃을 불러오는 방식.서버 또는 브라우저 기반의 기기 감지 방법을 사용함, 즉, 각 기기에 적합한  UI 템플릿을 따로 제공함. 3. 반응형 웹 VS 적응형 웹 : 성능 비교.3.1 속도와 편리성반응형은 하나의 템플릿 시트로 다양한 사용자의 기기에 대응할 수 있기에 웹 개발 과정이 단순하다.하지만 단 하나의 기기에만 접속함에도 모든 기기를 위한 CSS를 전부 넘겨 받아야 하기에 데이터 소모량이 높고, 로딩 속도가 느..

요소의 변환효과를 주는 함수 #. transform 2차원 변환함수1. translate(x,y) : 이동(x축, y축), translateX(x), translateY(y) : 한 축으로만 이동2. scale(x,y) : 크기를 늘리는 함수, scaleX(x), scaleY(y) : 한 축으로만 키움(배수)3. relate(degree) : 특정 각도로 테그를 회전시킴  예) 30deg4. skew(x,y): x,y 축으로 값만큼 기울임, skewX(x),skewY(y) : 특정 축으로만 기울임5. matrix(n,n,n,n,n,n) : 2차원 변환 효과 3차원 변환 함수.  transform 함수를 보충하는 속성  1. backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여..

다양한 배경 속성들#background 1. background-color 요소의 배경 색상을 결정함(transparent,색상 등이 속성으로 들어감) 2. background배경을 넣을 수 있는 속성으로 뒤에는 주로 함수가 들어감. #. linear-gradient()색상이 두가지 일때 : 상하로 색 2개 지정방향과 색상 두가지 : 해당 방향으로 그라데이션을 만듬 방향|색상|색상1의 비중|색상2 : 색상1의 비중이 지정값인 그라데이션방향|색상1|색상2|색상3 : 색상을 3개 사용한 그라데이션 3. background-image  이미지가 없는 게 default url("경로") -> 이미지 경로 단, 이미지 설정값이 테그의 크기보다 작을 경우 반복출력 4. background-repeatrepeat(이..

Position1. static : 정적 위치 지정 방식(기본값)2. relative:상대 위치 지정방식3. absolute: 절대 위치 지정방 식 ->static이 아닌 조상이 기준4. fixed : 고정 위치 지정방식 => 뷰포트(브라우저)를 기준으로 배치 요소 쌓임 순서1. 어떤 요소가 사용자와 더 가깝게 있는지를 결정2. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static)3. 2번 조건이 같은 경우, z-index 속성의 숫자값이 높을 수록 위에 쌓임.4. 2~3번 조건까지 같은 경우, html의 다음 구조일 수록 위에 쌓임.#. z-index : 요소의 쌓임 정도를 지정함(position이 static이 아닐때만 반영됨)#. position 속성의 값으로 absolut..

목차   font 관련 속성들font-weight : 글자의 두깨와 관련된 속성 (대표적인 값 : (normal,400), (bold,700), bolder, lighter,100~900)#. border, lighter는 상위 요소인 부모와 비교해서 어느정도인가를 나타냄.font-size : 글자의 크기와 관련된 속성대표적인 값 : px, em, rem, %,smaller,larger, xx-small~xx-largeline-height : 한 줄의 높이, 행간과 유사대표적인 값 : 숫자, px,em, rem, %(height와 동일한 값을 넣었을 때, 가운데 정렬)font-family : 글꼴을 변경하는 속성  #lorem은 의미없는 문장을 출력해줌. 문자에 대한 속성color : 글자의 색상text..

목차 CSS 작성법  선택자 : 각각의 정의 요소들이 어떤 html 태그에 css를 적용시키는지 알려주는 지시자.속성 : 실제로 적용되는 속성의 종류이며, 여러개의 프로터피를 연속해서 지정할 수 있고, 사용자가 임의로 정의하여 사용용할 수 없다는 특징이 있다.값 : 실제로 해당 속성들에 대하여 적용되는 값을 말하며, 키워드나 크기 단위 또는 색상 등의 단위로 나타낸다.CSS 선택자#. 기본 선택자 전체 선택자 : *{color : red;}테그 선택자 : li {color: red;}c클래스 선택자 : .orange { color : red;}                          오랜지 아이디 선택자 : #orange {color : orange;}                         ..