전체 글
-
[JavaScript] ImageVScode/JavaScript 2022. 9. 8. 17:54
getElementById -자바스크립트에서 바디 안의 id 셀렉터 값을 지목하는 방법 -document.getElementById("아이디값") onmouseover -해당 태그에 마우스 포인터가 올라가면 일어나는 이벤트 onmouseout -해당 태그에서 마우스 포인터가 밖으로 벗어나면 일어나는 이벤트 1. 마우스로 이미지 변환 2. 이미지 이름 입력받아서 이미지 변환 3. 마우스 클릭으로 지정된 범위까지 이미지 변환 4. 지정된 범위까지 자동으로 이미지 변환 5. clearInterval() -함수를 종료시키는 명령어 // 창을 실행시킬 때부터 start() 함수가 시작됨 // 이미지에 마우스를 올리면 변화하던 이미지가 멈춤 6. 마우스로 함수 2개를 실행/정지 번갈아 시키기 css style을 이..
-
[JavaScript] BOMVScode/JavaScript 2022. 9. 8. 17:51
-브라우저 객체 모델(BOM: browser object model) -BOM이란 자바스크립 트내에 내장되어 있는 관련 객체들의 집합을 의미 -웹브라우저를 대상으로 하여 외관으로 보이는 외형이나 내부에 저장된 각종속성들을 조정하고 싶다면 자바스크립트가 제공하는 그에 관련된 객체들을 이용하여 조정하고 컨트롤함 -자바스크립트에서는 윈도우나 웹브라우저 등을 객체로 정의해서 그 안에 여러구성요소들을 멤버변수나 멤버메서드로 접근하고 조정할 수 있게 각종객체를 제공함 -window, screen, location, navigator, history, document등 1. window 객체 -브라우저 기반 자바스크립트 최상위 객체 -alert(), prompt(), confirm() 함수 모두 window 객체의 ..
-
[JavaScript] functionVScode/JavaScript 2022. 9. 8. 17:43
-자바의 메서드와 같은 뜻의 문법요소임 -반복되거나 단위로 구성될 명령을 하나의 이름으로 묶어놓고, 명령이 필요할 때 이름을 불러 실행하는 구조 -보통 head 태그 안의 스크립트 영역에서 함수를 정의해놓고, body의 이벤트에 연결하여 실행시킴: 벼튼이 클릭되면 실행되는 자바 스크립트 함수의 정의 -함수는 선언적 함수와 익명 함수가 있음 -선언적 함수는 생성당시 부를 이름을 부여해서 만드는 함수를 의미하고, -익명 함수는 이름을 지정하지 않은 상태로 만들어서, 함수자체를 변수에 저장하여 변수이름으로 사용하곤 함 선언적 함수 -함수는 익명 함수이든 선언적 함수이든 head 영역의 script 태그 안에서 또는 body 영역의 script 태그 안에서 어디서든 호출 가능 -move(); → head의 스크..
-
[JavaScript] if, loopVScode/JavaScript 2022. 9. 8. 17:38
if문 날짜 -자바스크립트에도 자바와 같이 활용할 주요 내장 클래스들이 존재함. -새로운 객체를 생성하기 위해 new는 명령과 함께 객체를 생성하여 사용함 -자바 스크립트의 if문의 사용은 자바에서의 사용과 똑같음 while 반복문 var value=0; var startTime=new Date().getTime(); // 오늘 날짜 현재시간의 밀리초 환산값 // document.write(""+startTime+""); endTime=startTime+1000; while(new Date().getTime() '포도 사과 바나나 망고' 출력 for in 반복문 var array=['포도','사과','바나나','망고']; for(var a in array){ // 배열의 값이 전달되지 않고, 배열의 인덱..
-
[JavaScript] BasicVScode/JavaScript 2022. 9. 8. 17:33
-Html5 언어로 마크업하며 만드는 웹페이지의 정적인 기능들을 확장하고 페이지를 조금 더 동적으로 만들기 위해 사용하는 프론트 개발 언어임 -주로 Html5에서 불가능한 사칙연산 및 관계 연산 등을 실행할때 사용하며 기능적인면이나 이벤트(클릭, 더블클릭 등)에 대한 동작을 처리하는데 사용됨 -브라우저 및 화면에 표시될 태그들을 대상으로 하는 객체들이 정의되어 있으며 자바의 객체지향 언어 형식의 프로그램이 작성됨 -브라우저 상에서 일어날 수 있는 사용자 입력, 해당 연산, 이벤트에 의한 출력의 기능을 구현함 *자바 스크립트의 주석문은 자바 주석문과 똑같이 사용됨(여러줄 주석처리: /* */, 한줄 주석처리: //) Head안의스크립트실행명령들 1. 출력관련명령 -alert명령은 자바스크립트 안에 내장된 ..
-
[CSS] transitionVScode/CSS 2022. 9. 8. 17:23
transition: 애니메이션을 적용할 때 사용하는 기능(변형 속성) 종류 -transition: 모든 transition 속성을 한 번에 적용 -transition-delay: 이벤트 발생 후 몇 초 후에 재생할지 지정 -transition-duration: 몇 초 동안 재생할 지 지정 -transition-property: 어떤 속성을 변형할 지 지정 -transition-timing-function: 수치 변형 함수를 지정 변형함수(2D) 1. translate(X,Y): 지정한 크기만큼 x축과 y축으로 이동 2. tranlateX(X): 지정한 크기만큼 x축으로 이동 3. tranlateY(X): 지정한 크기만큼 y축으로 이동 4. scale(X,Y): 지정한 크기만큼 x축과 y축으로 확대 축소..
-
[CSS] layoutVScode/CSS 2022. 9. 8. 16:51
layout Content Title 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. 빨간색 배경 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. Content02 Title 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. SegmentTitle 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. SegmentTitle 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. SegmentTitle 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. SegmentTitle 제3항의 승인을 얻지 못한 때에는 그 처분 또는..
-
[CSS] position, display, visibilty, shadowVScode/CSS 2022. 9. 8. 16:41
position 1. position: 웹 문서 안의 요소들을 자유자재로 배치해주는 속성(양/음수 모두 사용가능) -HTML 태그의 위치 설정 방법을 변경할 때 사용 -상대적 위치 좌표 사용시 키워드 1) static: 요소를 문서의 흐름에 맞추어 배치(top/right/bottom/left 이용 배치 변경 불가). float 속성을 이용해 좌우로 배치 가능 2) relative: 현재 위치를 기준으로 위치 지정. 자연스럽게 연결해 배치. (top/right/bottom/left)를 사용해 위치를 지정할 수 있음 -절대적 위치 좌표 사용시 키워드 1) absolute: body 또는 컨테이닝 박스를 기준으로 위치를 지정할 수 있음. 원하는 위치를 정해 배치. 요소를 감싸는 태그(컨테이닝 박스)를 만들고 ..