본문 바로가기

Frontend136

[javascript] 문법 정리 - 데이터 제어하기 01 if문 { //true, false, 1, "1", "", 0, null, undefined, [], {} if(true){ document.write("조건문이 실행되었습니다.(true)"); } else { document.write("조건문이 실행되었습니다.(false)"); } } 02 if문 생략 { let num = 100; if(num == 100 ) document.write("true"); else document.write("false"); } 03 다중 if { let num = 100; if(num == 90){ document.write("조건문이 실행되었습니다.(num == 90)"); } else if (num == 100){ document.write("조건문이 실행되었.. 2021. 8. 12.
[javascript] 문법 - 데이터 실행하기 1 선언적 함수 { function func(){ document.write("함수가 실행되었습니다."); } func(); //함수가 실행되었습니다. } 2 익명 함수 { const func = function(){ document.write("함수가 실행되었습니다."); } func(); //함수가 실행되었습니다. } 3 매개변수 함수 { function func(str){ document.write(str); } func("함수가 실행되었습니다."); //함수가 실행되었습니다. function func1(str1, str2){ document.write(str1, str2); } func1("함수가", "실행되었습니다."); //함수가실행되었습니다. } 4 리턴값 함수 { function func(.. 2021. 8. 12.
[javascript] 문법정리 - 데이터 불러오기 01 변수 : 데이터 불러오기 { let x = 100, y = 200, z = "javscript"; document.write(x); //100 document.write(y); //200 document.write(z); //javscript } 02 상수 : 데이터 불러오기 { const x = 100, y = 200, z = "javascript"; document.write(x); document.write(y); document.write(z); } 03 배열 : 데이터 불러오기 { const arr = [100, 200, "javascript"]; document.write(arr[0]); //100 document.write(arr[1]); //200 document.write(arr[2.. 2021. 8. 12.
[JAVASCRIPT] 문법 정리 - 데이터 저장하기 데이터 저장하기 01 변수 : 데이터 저장 { var x = 100; var y = 200; var z = "javascript"; document.write(x); //100 document.write(y); //200 document.write(z); //javascript } 02 변수 : 데이터 저장 + 데이터 변경 { let x = 100; let y = 200; let z = "javascript"; x = 300; y = 400; z = "jquery"; document.write(x); //300 document.write(y); //400 document.write(z); //jquery } 03 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가 { let x = 100; let y .. 2021. 8. 11.
[JAVASCRIPT] clientX, offsetX, pageX, screenX 1. clientX, clientY 클라이언트 영역 내의 가로, 세로 좌표를 제공한다. 클라이언트 영역은 현재 보이는 브라우저 화면이 기준. clientX : 브라우저 페이지에서의 X좌표 위치를 반환. clientY : 브라우저 페이지에서의 Y좌표 위치를 반환. 2. offsetX, offsetY 이벤트 대상이 기준이 된다.(화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이 된다. 화면이 기준이 아니다) offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환. offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환. 3. pageX, pageY 전체 문서를 기준으로 x,y 좌표를 반환. 스크롤 화면을 포함해서 측정. pag.. 2021. 8. 11.
[CSS] box-sizing html의 모든 요소들은 margin, padding 등 각각의 여백들을 가지며 이 때 width나 height값을 주게 되면 여백값과 더해져서 화면에 나타나게 된다. 이때 요소의 너비와 높이를 계산하는 방법을 지정해주는 것이 box-sizing 속성이다. content-box 요소의 너비와 높이를 설정하면 테두리(border)와 안쪽 여백(padding)은 여기에 더해진다. border-box border와 padding의 크기도 요소의 크기로 고려된다. 2021. 7. 30.
반응형

티스토리툴바