본문 바로가기

HTML

231012 (HTML) 테스트 11. onmousemove와 마우스 위치 및 버튼 이미지 위에서 마우스 움직임을 감지하는 것이 onmousemove onmousemove 이벤트에서 screenX,Y, clientX,Y, offsetX,Y, (X,Y)의 정보를 받을 수 있다. offset은 이벤트가 발생하는 곳의 좌상단을 0,0으로 좌표를 구해준다. client와 x,y는 동일하고, 웹 페이지를 기준으로 좌표를 표시해준다. screen은 모니터 화면을 기준으로 좌표를 표시해준다. 마우스 이벤트 객체의 프로퍼티와 onmousemove 이미지 위에 마우스를 움직일 때 onmousemove 리스너가 실행되고, 마우스의 위치를 보여줍니다. 테스트 12. oncontextmenu로 소스 보기나 이미지 다운로드 금지 oncontextmen.. 더보기
231011 (HTML) 테스트 6. 태그 이름으로 DOM 객체 찾기, getElementsByTagName() getElementsByTagName() : 괄호 내부의 이름을 가진 모든 태그의 요소를 가져온다. 배열의 형태로 가져온다. 내가 좋아하는 과일 누르세요 저는 빨간 사과를 좋아해서 아침마다 한 개씩 먹고 있어요. 운동할 때는 중간 중간에 바나나를 먹지요. 탄수화물 섭취가 빨라 힘이 납니다. 또한 달콤한 향기를 품은 체리와 여름 냄새 물씬 나는 자두를 좋아합니다. 테스트 7. class 속성으로 DOM 객체 찾기, getElementsByClassName() getElementsByClassName() : 태그에 class 정보를 주어 클래스 별로 정보를 호출할 수 있다. 클래스는 기본적으로 중복이라고 취급하여 elem.. 더보기
231010 (HTML) 테스트 9. new Object()로 계좌를 표현하는 account 객체 만들기 new Object를 이용하면 클래스처럼 객체를 생성할 수 있다. account.owner 처럼 클래스의 호출처럼 이용 가능. function으로 작성된 메소드를 객체에 넣을 수 있다. 함수형 변수라고 한다. new Object()로 사용자 객체 만들기 테스트 10. 리터럴 표기법으로 계좌를 표현하는 account 객체 만들기 let 변수를 이용하고 중괄호를 사용하여 클래스 형 객체를 만들 수 있다. 변수명 : 내용 형태로 작성할 수 있다. 리터럴 표기법으로 객체 만들기 테스트 11. 프로토타입으로 객체 만들기 자바의 메소드 생성과 같은 양식으로 설정 가능하다. this.변수명 을 이용하여 Account 내부의 변수를 선언할.. 더보기
231006 (HTML) 테스트 23. eval(), parseInt(), isNaN() 자바스크립트의 기본 함수가 있다. eval() : 문자열로 작성된 수식을 연산한다. parseInt : 문자열을 숫자로 변환한다. 10진수 형태로 저장하게 된다. parseInt에 주어진 문자열이 숫자가 아닌 경우 NaN으로 값이 저장된다.(오류코드) isNaN() : NaN 값을 가진 변수 적용시 true를 리턴하게 된다. eval(), parseInt(), isNaN() 테스트 24. 구구단 출력 함수 만들기 자바와 같은 방식으로 작동하게 된다. return만 따로 적는다면 void 형태로 리턴되고 함수가 종료된다. 자바에서 numberformat오류에 해당하는 경우 NaN 으로 저장되는 점을 이용하여 오류를 체크할 수 있다.(isNaN.. 더보기
231005 (HTML) 테스트 16. switch문 사용 자바의 switch문과 같은 형식으로 동작한다. switch 문으로 커피 주문 테스트 17. for문 사용 자바의 for문과 같은 형식으로 동작한다. for 문으로 10px~35px 크기 출력 테스트 18. while문 사용 자바의 while문과 같은 형식으로 동작한다. while 문으로 0에서 n까지 합 테스트 19. do-while문 사용 자바의 do-while문과 같은 형식으로 동작한다. do-while 문으로 0에서 n까지 합 테스트 20. break 문 자바와 같은 방식으로 동작한다. 1에서 얼마까지 더해야 3000을 넘는가? 테스트 21. continue 문 자바와 같은 방식으로 동작한다. 3으로 나눈 나머지가 1인 수만 더하기 테스트 22. adder() 함.. 더보기
231004 (HTML) 테스트 7. 리터럴 리터럴 : 특정 값이 변수에 할당 된 상태 숫자 머리에 0 사용시 8진수, 0x 사용시 16진수, 0b는 2진수 ‘’ 내부에 문자열 삽입시 문자열로 동작한다. 리터럴 테스트 8. 산술 연산 변수의 산술 연산은 일반적인 연산과 같다. 소수점도 계산 가능하다. 산술연산 테스트 9. 대입 연산 대입 연산도 자바와 같은 방식으로 동작한다. 대입 연산 테스트 10. 비교 연산 비교 연산도 자바와 같은 방식으로 동작한다. 결과가 true, false로 출력된다. < 비교 연산자는 오류 발생의 여지가 있다. 특수문자 더보기
230927 (HTML) 테스트 12. 애니메이션 만들기 연습 @keyframes : 애니메이션의 중간 상태를 지정한다. animation- 속성 : name-이름 지정, duration-지속 시간 지정, iteration-count-반복 회수 지정 꽝! 꽝! 글자가 3초 동안 500%에서 시작하여 100%로 바뀌는 애니메이션입니다. 무한 반복합니다. 테스트 13. font-size에 대한 전환 효과 만들기 Transition : 폰트 사이즈가 변화 시 5초 간 변화 적용 다른 조건에 폰트 사이즈의 변경이 있어야 한다. font-size에 대한 전환 꽝! 글자에 마우스를 올려보세요 테스트 14. 다양한 변환 사례 rotate : 개체를 회전한다. 양수는 시계 방향, 음수는 반시계 방향 skew : 개체를 기울인다. 기울이면서 내.. 더보기
230926 (HTML) 테스트 8. overflow 프로퍼티 활용 hidden은 박스 넘어가면 잘림 visible은 박스 넘어가도 출력 scroll은 박스 넘어가면 스크롤 바 생김 overflow 프로퍼티 overflow에 hidden 값을 적용하면 박스를 넘어가는 내용이 잘려 보이지 않습니다. overflow에 visible 값을 적용하면 콘텐츠가 박스를 넘어가서도 출력됩니다. overflow에 scroll 값을 적용하면 박스에 스크롤바를 붙여 출력합니다. 테스트 9. CSS3 스타일을 응용하여 리스트로 메뉴 만들기 inline-block : 새 줄로 넘어가지 않도록 하는 속성. Home Espresso Cappuccino Cafe Latte F.A.Q 테스트 10. 마우스가 올라오면 행의 배경 색이 변하는 표 만들기 nth.. 더보기

티스토리툴바