ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML5] 기본 기능과 벤더 프리픽스 제거
      프로그래밍/HTML5 Web 2016. 7. 9. 22:43
      반응형


      기존의 웹페이지는 document.getElementById() 메서드로 문서 객체를 선택하였으나 HTML5 부터는 document.querySelector로 문서 객체를 선택할수 있습니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <!DOCTYPE html>
       
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>querySelector() Method</title>
          <script>
              window.addEventListener('load', function () {
                  // Set Variable
                  var header = document.querySelector('h1');
       
                  // Change style Properties
                  header.style.color = 'white';
                  header.style.backgroundColor = 'black';
              });
          </script>
      </head>
      <body>
          <h1>Header</h1>
          <h1>Header</h1>
      </body>
      </html>
      		cs


      첫 번째 태그에 스타일이 적용. document 객체의 getElementById() 메서드와 매개변수만 차이가 있으며 활용은 같다.


      여러개의 태그를 선택하고 싶으면 querySelectorAll() 메서드를 사용하면되는데 이는 문서 객체의 배열을 리턴한다.




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      <!DOCTYPE html>
       
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>querySelector() Method</title>
          <script>
              window.addEventListener('load', function () {
                  //Set Variable
                  var header = document.querySelectorAll('h1');
       
                  //Change Style Properties
                  header[0].style.fontFamily = 'Helvetica';
                  header[0].style.color = 'white';
                  header[0].style.backgroundColor = 'black';
       
                  header[1].style.color = 'white';
                  header[1].style.backgroundColor = 'black';
              });
          </script>
      </head>
      <body>
          <h1>Header</h1>
          <h1>Header</h1>
      </body>
      </html>
      		cs


      참고로 jQuery 1.X 버전에서는 문서 객체를 선택하고자 Sizzle 엔진을 사용하는데 2.0버전 부터는 Sizzle 엔진을 사용하지 않아도됩니다. 다만 구버전의 인터넷 익스플로러를 지원하려면 jQuery 1.X버전을 사용하여야합니다.


      Zepto라이브러리를 활용하여 HTML5에서 jQuery를 모방할수도 있습니다. (링크 : http://zeptojs.com/ )


      HTML5에서의 전체화면 구현

      여기서 F11을 눌렀을때 나오는 전체화면은 웹브라우저 화면만 커진것입니다. HTML5에서 지원하는 전체화면은 특정요소를 전체 화면으로 만들수 있다는것인데요. 웹브라우저에서 작은 화면으로 게임을 즐길수도있지만 전체화명 기능을 사용하여 canvas 태그를 전체화면으로 전환해서 큰화면으로 변경이 가능합니다.


      특정요소를 전체화면으로 만들때에는 element.requestFullscreen() 메서드가 사용됩니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      <!DOCTYPE html>
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>element.requestFullscreen() Method</title>
          <style>
          </style>
      </head>
      <body>
          <!-- Element -->
          <img class="fullscreen" src="http://i.imgur.com/tgeaZjF.jpg" />
          <div class="fullscreen">
              <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</h1>
              <p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
          </div>
          <!-- Script -->
          <script>
              var elements = document.querySelectorAll('.fullscreen');
              for (var i = 0; i < elements.length; i++) {
                  elements[i].onclick = function () {
                      this.requestFullscreen();
                  };
              }
          </script>
      </body>
      </html>
      		cs


      위의 코드를 작성후 실행 후 각자 태그들을 클릭하면 오류를 출력하는것을 확인 가능합니다.



      위와 같은 문제가 발생하는 이유는 아직까지도 HTML5이 개발중이므로 확정난 표준이 정해져있지않아 브라우저별로 정식기능을 넣지 못하였기 때문입니다. 이를 위해서 벤더 프리픽스를 사용하여 실험적으로 전체화면의 기능을 제공하고있습니다. 웹브라우저별로 벤더 프리픽스를 아래와 같습니다.





      이를 활용하여 예제를 보완하여봅시다. 저의 경우에는 크롬을 사용하고 있지만 범용성을 위해 브라우저 별로 벤더 프리픽스를 모두 사용하여 보겠습니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      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
      <!DOCTYPE html>
       
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>element.requestFullscreen() Method</title>
          <style>
       
          </style>
      </head>
      <body>
          <!-- Element -->
          <img class="fullscreen" src="http://i.imgur.com/tgeaZjF.jpg" />
          <div class="fullscreen">
              <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</h1>
              <p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
          </div>
       
          <!-- Script -->
          <script>
              var elements = document.querySelectorAll('.fullscreen');
              for (var i = 0; i < elements.length; i++) {
                  elements[i].onclick = function () {
                      if (this.requestFullscreen) {
                          // requestFullscreen() Exist
                          this.requestFullscreen();
                      } else if (this.msRequestFullscreen) {
                          // msRequestFullscreen() Exist
                          this.msRequestFullscreen();
                      } else if (this.webkitRequestFullscreen) {
                          // webkitRequestFullscreen() Exist
                          this.webkitRequestFullscreen();
                      } else if (this.mozRequestFullscreen) {
                          // mozRequestFullscreen() Exist
                          this.mozRequestFullscreen();
                      } else if (this.oRequestFullscreen) {
                          // oRequestFullscreen() Exist
                          this.oRequestFullscreen();
                      }
                  };
              }
          </script>
      </body>
      </html>
      		cs


      각 브라우저별로 벤더 프리픽스를 활용하여 작동되도록 예제를 수정한 모습입니다. 각자 태그별로 클릭하여보면 전체화면이 되는것을 확인가능합니다.


      추가로 전체화면에서의 스타일 적용하는 방법을 알아보겠습니다. 마찬가지로 실험적인 기능으로 벤더 프리픽스를 활용하여야합니다.

      선택자는 :fullscreen 을 사용합니다.


      마지막으로 정리된 태그별로 스타일을 조절하고 클릭시 FullScreen 모드로 작동하게 한 코드입니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      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
      <!DOCTYPE html>
       
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>element.requestFullscreen() Method</title>
          <style>
              /* HTML5 Fullscreen Mode */
              div.fullscreen:fullscreen {
                  width: 60%;
                  border-radius: 10px;
              }
              /* Bender Prefix Fullscreen Mode */
              div.fullscreen:full-screen {
                  width: 60%;
                  border-radius: 10px;
              }
              div.fullscreen:-ms-full-screen {
                  width: 60%;
                  border-radius: 10px;
              }
              div.fullscreen:-webkit-full-screen {
                  width: 60%;
                  border-radius: 10px;
              }
              div.fullscreen:-moz-full-screen {
                  width: 60%;
                  border-radius: 10px;
              }
              div.fullscreen:-o-full-screen {
                  width: 60%;
                  border-radius: 10px;
              }
          </style>
      </head>
      <body>
          <!-- Element -->
          <img class="fullscreen" src="http://i.imgur.com/tgeaZjF.jpg" />
          <div class="fullscreen">
              <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</h1>
              <p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
          </div>
       
          <!-- Script -->
          <script>
              var elements = document.querySelectorAll('.fullscreen');
              for (var i = 0; i < elements.length; i++) {
                  elements[i].onclick = function () {
                      if (this.requestFullscreen) {
                          // requestFullscreen() Exist
                          this.requestFullscreen();
                      } else if (this.msRequestFullscreen) {
                          // msRequestFullscreen() Exist
                          this.msRequestFullscreen();
                      } else if (this.webkitRequestFullscreen) {
                          // webkitRequestFullscreen() Exist
                          this.webkitRequestFullscreen();
                      } else if (this.mozRequestFullscreen) {
                          // mozRequestFullscreen() Exist
                          this.mozRequestFullscreen();
                      } else if (this.oRequestFullscreen) {
                          // oRequestFullscreen() Exist
                          this.oRequestFullscreen();
                      }
                  };
              }
          </script>
      </body>
      </html>
      		cs


      반응형
      저작자표시 비영리 변경금지

      '프로그래밍 > HTML5 Web' 카테고리의 다른 글

      [HTML5] Sammy.js 라이브러리로 히스토리 기능 사용 및 페이지 라우트  (0) 2016.07.10
      [HTML5] 벤더 프리픽스 제거 메서드 removePrefix() Method  (0) 2016.07.10
      MongoDB 데이터 검색, 정렬, 수정, 삭제기능으로 CRUD 앱 구현  (0) 2016.07.07
      MongoDB 기본 명령어와 조작법  (0) 2016.07.06
      Windows 운영체제에서 MongoDB 설치 및 세팅  (0) 2016.07.06

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바