JavaScript / Object / Screen / 화면 정보 가져오는 객체

Screen

Screen은 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다.

  • screen.width
    화면의 가로 크기를 가져옵니다.
  • screen.height
    화면의 세로 크기를 가져옵니다.
  • screen.availWidth
    작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다.
  • screen.availHeight
    작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다.
  • screen.colorDepth
  • screen.pixelDepth
    IE는 버전 10 이상에서 사용할 수 있습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
		<style>
			body {
				font-family: Consolas, monospace;
			}
		</style>
  </head>
  <body>
		<script>
			document.write( "<p>screen.width : " + screen.width + "</p>" );
			document.write( "<p>screen.height : " + screen.height + "</p>" );
			document.write( "<p>screen.availWidth : " + screen.availWidth + "</p>" );
			document.write( "<p>screen.availHeight : " + screen.availHeight + "</p>" );
			document.write( "<p>screen.colorDepth : " + screen.colorDepth + "</p>" );
			document.write( "<p>screen.pixelDepth : " + screen.pixelDepth + "</p>" );
		</script>
  </body>
</html>

화면 아래의 작업 표시줄 높이가 30px이어서 screen.availHeight가 screen.height보다 30 작습니다.

Related Posts

JavaScript / Object / String.length / 문자열의 길이 반환하는 속성

JavaScript / Object / String.length / 문자열의 길이 반환하는 속성

.length .length는 문자열의 길이를 반환하는 속성입니다. 문법 string.length 예를 들어 'abcd'.length 는 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>"1234".length : ' + '1234'.length + '</p>' ); document.write( '<p>"".length : ' + ''.length + '</p>' ); document.write( '<p>"한글".length : ' + '한글'.length + '</p>' ...

JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()

JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()

encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent() encodeURI() : 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수입니다. encodeURIComponent() : 모든 문자를 인코딩하는 함수입니다. decodeURI() : encodeURI()로 인코딩한 문자열을 디코딩하는 함수입니다. decodeURIComponent() : encodeURIComponent()로 인코딩한 문자열을 디코딩하는 함수입니다. 문법 encodeURI( uri ) encodeURIComponent( uri ) decodeURI( uri ) decodeURIComponent( uri ) uri : 인코딩하려는 인터넷 주소를 입력합니다. 예제 특수문자와 한글을 포함한 URI를 인코팅, ...

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

.removeAttribute() .removeAttribute()는 요소의 속성을 제거하는 메서드입니다. 문법 element.removeAttribute( attributename ) 예를 들어 document.getElementsByTagName( 'h1' ).removeAttribute( 'class' ); 는 문서의 첫번째 h1 요소의 class 속성을 제거합니다. 예제 첫번째 h1 요소의 class 속성을 제거해서 글자색이 검정색이 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } .abc { color: red; } </style> </head> <body> <h1 class="abc">Lorem ...

JavaScript / Object / document.characterSet / 문자 인코딩 반환하는 속성

JavaScript / Object / document.characterSet / 문자 인코딩 반환하는 속성

.characterSet .characterSet은 문서의 문자 인코딩을 반환하는 속성입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.characterSet : " + document.characterSet + "</p>" ); </script> </body> </html>

JavaScript / Object / Screen / 화면 정보 가져오는 객체

JavaScript / Object / Screen / 화면 정보 가져오는 객체

Screen Screen은 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다. screen.width 화면의 가로 크기를 가져옵니다. screen.height 화면의 세로 크기를 가져옵니다. screen.availWidth 작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다. screen.availHeight 작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다. screen.colorDepth screen.pixelDepth IE는 버전 10 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

.startsWith() .startsWith()는 문자열이 특정 문자열로 시작하는지 확인하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.startsWith( searchString, length ) searchString : 검색할 문자열로 필수 요소입니다. 대소문자를 구분합니다. length : 문자열 중 어디까지 검색할지 정합니다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 합니다. 예제 'abcde'.startsWith( 'a' ) 는 abcde가 a로 시작하는지 검사합니다. a로 시작하므로 true를 반환합니다. 'abcde'.startsWith( 'a', 1 ) bcde가 a로 시작하는지 검사합니다. ...

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

.repeat() .repeat() – 문자열을 반복한 값을 반환하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.repeat( count ) 예제 'abc'.repeat( 2 ) abc를 두 번 반복한 abcabc를 반환합니다.

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

window.matchMedia() CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다. 문법 window.matchMedia( mediaQueryString ) mediaQueryString : CSS 미디어쿼리를 입력합니다. window는 생략할 수 있습니다. 예를 들어 window.matchMedia( '( min-width: 500px )' ) 는 500px 이상을 뜻합니다. 속성 .media : mediaQueryString을 ...

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

.concat()  .concat()은 문자열을 이어 붙이는 메서드입니다. 문법 string1.concat( ) string1은 필수 요소, string2 등은 선택 요소입니다. 인수가 문자열이 아닌 경우 먼저 문자열로 변환한 다음 string1에 연결합니다. 예를 들어 'ab'.concat( 'cd', 'ef' ) 는 abcdef입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript 강좌