HTML/Javascript 기초 (53) 썸네일형 리스트형 [Javascript] 전체 화면(스크린) 크기 구하기 우리가 사용하는 모니터 화면의 크기와 사용가능한 모니터 화면 크기를 구할 수 있다. 사용가능한 모니터 화면이라는 것은 아래와 사이드에 작업표시줄을 제외한 부분을 이야기한다. screen.width : 스크린 전체 가로 크기 screen.height : 스크린 전체 세로 크기 screen.availWidth : 스크린에서 사용가능한 가로 크기(작업표시줄 제외) screen.availHeight : 스크린에서 사용가능한 세로 크기(작업표시줄 제외) 스크린의 크기 출력 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 4.. [Javascript] HTML 문서의 크기 구하기 웹페이지를 띄우면 전체적인 화면이 모니터에 들어가지 않아서 스크롤이 생기는 경우가 많다. 그럴 때 웹페이지 전체적인 화면 크기를 구할 수 있다. $(document).width() : 화면의 가로 길이 $(document).height() : 화면의 세로 길이 문서의 크기 출력 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80.. [Javascript] HTML 요소의 크기 다루기 - 3 width()와 innerWidth를 활용하여 사각형 크기를 변경해보자. width()는 기본 크기를 변경하는 것이고 innerWidth()는 padding 포함 크기를 변경하는 것이다. [Javascript] HTML 요소의 크기 다루기 - 2 물고기를 이동시켜서 창 끝에 붙여보는 스크립트를 작성해보자. css() 로 물고기의 위치를 지정해주면된다. 창 끝에 붙이는 원리는 부모 노드의 크기에서 물고기의 크기만큼 빼주고 margin만큼 추가로 빼준다. parent_width(부모 노드의 크기)-$fish.outerWidth()(물고기 border 포함 크기)-margin_left(왼쪽 margin) (padding=30px, border=20px, margin=50px) [Javascript] HTML 요소의 크기 다루기 - 1 기본 크기 구하기 $대상.width() $대상.height() 기본 크기 + padding 구하기 $대상.innerWidth() $대상.innerHeight() 기본 크기 + padding + border 구하기 $대상.outerWidth() $대상.outerHeight() 기본 크기 + padding + border + margin 구하기 $대상.outerWidth(true) $대상.outerHeight(true) (padding=30px, border=20px, margin=50px) [Javascript] 물고기 전역좌표 구하기 전역좌표란? 최상위 노드인 문서(document)의 left:0, top:0 위치를 시작점으로 하는 위치 값을 의미 물고기들의 지역좌표와 전역좌표를 함께 표시하는 프로그램을 작성해본다. 전역 좌표는 해당 페이지 좌측 상단 끝을 기준으로 한다. 위치 값이 이 곳에 출력 1 2 3 4 5 [Javascript] 물고기들의 지역좌표 설정하기 버튼을 하나 만들어서 눌렀을 때 물고기가 정렬되는 프로그램을 작성해보자. 각각의 물고기들을 each()를 이용하여 css를 통해 정렬한다. 1 2 3 4 5 [Javascript] 물고기 지역좌표 구하기 여러군데로 흩어져있는 물고기의 지역좌표를 구해보자. 지역좌표는 물고기의 부모 노드 안에서 좌표를 이야기 한다. 위치 값이 이 곳에 출력 1 2 3 4 5 이전 1 2 3 4 5 6 7 다음
