재유's

Toggle : 하나의 설정 값으로부터 다른 값을 전환하는 것.0 또는 1을 toggle 할때 1-xtrue, false 면 부정 키워드를 사용하면 됨 예시1234567891011121314151617181920212223242526272829303132333435 bin page function Toggle(x){ return 1-x; } var input1 = 1; var output1 = Toggle(input1); console.log("input1="+input1+", output1= "+output1); var input2 = 0; var output2 = Toggle(input2); console.log("input2="+input2+", output2= "+output2);

이벤트 이벤트랑 사용자가 웹페이지에서 행하는 어떠한 행위나 웹페이지가 겪는 일련의 사건을 의미- 행위 : 클릭, 마우스 이동, 드래그 등- 사건 : 로딩완료, 다른 페이지 이동이벤트가 발생했을 때, 호출될 함수를 정의하고 연결하는 과정을 이벤트 처리라고 한다. 대표적인 이벤트 종류이벤트 이름 설명 onClick 어떤 요소를 클릭한 경우 onMouseOver 어떤 요소 위에 마우스 커서가 올라가 있는 경우 onMouseOut 어떤 요소 위에 마우스 커서가 벗어난 경우 onLoad (body태그에 적용하여) 페이지의 로딩이 완료된 직후 이벤트 사용 방법javascript 함수를 미리 정의해 두고 HTML태그의 속성형태로 이벤트 이름을 명시한 다음 함수의 호출구문을 속성에 대한 값으로 지정한다.1. JavaS..

함수 재사용 가능한 프로그램 명령어의 집합 1234function 함수이름(파라미터1, 파라미터2, ... 파라미터n) { 명령어... [return [값]];} ▶파라미터는 함수가 실행되기 위해 주어지는 조건값.파라미터를 명시할 경우 필요한 만큼 콤마로 구분하여 변수를 선언.▶return은 함수가 호출된 위치에 결과값을 돌려주기 위한 키워드값(변수)을 명시하지 않을 경우 undefined가 리턴됨.함수의 실행 도중, 특정 조건이 충족되어 return을 중간에서 만날 경우 함수는 그 즉시 실행을 중단한다. 하나의 함수 안에서는 다른 함수를 호출할 수 있다.12345678function foo() { 명령어.. return 1;}function bar() { var a = foo(); return a + ..

프로그램의 흐름제어(1) 조건문 if문괄호 안에 주어진 조건이 참인 경우 블록{}안을 수행.12345if(조건){ // ... 조건이 참인 경우 실행할 명령 ... } 조건에 명시할 수 있는 형식1. 비교식 ( ==, !=, >, >=,

변수데이터를 저장하기 위한 키워드.변수를 사용하기 위해서는 선언과 할당의 과정이 필요하다. var 변수 이름; // 변수 선언 변수이름 = 값; // 선언된 변수에 값 할당 선언과 할당을 결합한 형태 var 변수이름 = 값; * 변수의 이름은 영어+숫자+언더바의 조합으로 구성한다.* 띄어쓰기가 필요한 경우 언더바를 사용하거나 첫 글자를 대문자로 표현.* 값의 할당은 오른쪽에서 왼쪽으로만 가능 저장 가능한 값의 종류데이터 타입 설명 비고 boolean 논리값 true/ false Number 정수(integer) 실수(float) String 문자열(문장) 쌍따옴표나 홑따옴표로 감싸서 표현 Null 값이 확정되기 이전에 임의로 비워둔 상태 undefined 값이 할당되지 않은 상태 자바에서 Null 상태 ..

Javascript란? "JavaScript란 HTML과 WEB의 프로그래밍 언어이며 배우기 싶다." 라고 기술되어있다.CSS와 함께 웹을 구성하는 요소로 웹페이지에서 동작하는 기능을 코딩한다. Javascript는 HTML 소스코드에 포함되는 형태로 작성된다. HTML 소스코드에 포함시키기다음의 코드를 HTML소스코드 안에 명시, 일반적으로 에 위치한다. 둘다 영어이므로 참고! 아래 사이트 둘다 튜토리얼을 진행할수 있다. 웹쪽 공부한사람이라면 한번이라도 들어가봤을 w3schools.com이다.https://www.w3schools.com/js/ 아래는 자바스크립트 라고 치면 나오는 사이트인데 내 취향이며(...)기본적인 javascript를 배울수 있다.https://www.javascript.com/..

배경관련 기본 속성 (background) 속성 설명 background-color 배경색상 지정 background-image 배경이미지 url("파일경로"); 외부 css파일에서 명시할 경우 파일 경로는 html기준이 아닌 css 파일 기준이 된다. background-repeat 배경이미지 반복 설정 repeat, repeat-x, repeat-y, no-repeat background-attachment 스크롤에 따른 배경 이미지 처리 scroll, fixed background-position 배경이미지 위치. left, right, top, bottom, center, px값 background 위의 다섯가지 속성을 공백으로 구분하여 일괄 명시. 불필요한 요소는 생략 가능 배경관련 속성 활용 ..

레이아웃 구성하기 사이트의 전체 넓이와 정렬을 구성하기 위한 태그 안에 각 영역을 구성하기 위한 태그를 배치하고, float 속성을 사용하여 각 영역을 배치하는 처리 3단 레이아웃 상단영역 내용영역 하단영역 또는 상단영역 내용영역 하단영역 - #container에 넓이와 margin속성을 사용하여 정렬을 구성- #header, #footer에 각 영역에 대한 height지정 (고정높이)- #content 영역은 내용에 따라 높이가 변경되어야 하므로 min-height지정(가변 높이) 사이드바 구성 상단영역 사이드바 내용영역 하단영역 - 3단 레이아웃 상태에서 #content에 사이드바와 본문영역을 위한

float 속성박스를 부모의 왼쪽이나 오른쪽에 고정시키고 문장을 그 옆으로 흐르도록 하기 위한 속성 적용 가능한 값속성 설명 left 왼쪽 right 오른쪽 none 해제 inherit 부모값 상속 제약 사항- 새로운 문단을 시작하기 위해서는 이전 float를 off 시켜야 한다.- 부모요소가 float가 적용된 자식요소를 감싸지 못한다. 해결책- 이전 float 속성을 해제부모요소가 끝나기 전( 혹은 새로운 문단이 시작하기 전)float:none; clear: both;가 적용된 block-level요소를 배치 방법1 : 빈 이용 방법2 : 부모의 :after 가상 클래스를 사용해서 아래코드 적용 ... 내용 ...

박스의 위치 margin: px, %;- 바깥 여백을 의미- 벽을 밀어서 자신이 이동하거나 주변의 다른 요소를 밀어내는 효과- 서로 마주보고 작용하는 margin은 겹침 현상 발생- 음수 값을 지정할 경우 반대 방향으로 힘이 작용(끌어당김)- 값을 하나만 지정할 경우 : 상, 하, 좌, 우 모두 동일- 값을 두 개 지정할 경우 : 상/하, 좌/우- 값을 네 개 지정할 경우 : 상단부터 시계 방향 회전 ( 상, 우, 하, 좌 ) margin: auto부모 요소의 width에서 현재 자신의 크기를 뺀 나머지를 자동으로 계산하여 margin에 부여한다.속성 설명 margin-left: auto 박스가 부모의 오른쪽에 배치된다. margin-right: auto 박스가 부모의 왼쪽에 배치된다. left와 rig..