웹코딩/CSS

CSS 마우스 드래그 금지

minjeong 2021. 10. 19. 16:08

사이트를 둘러보다가 드래그나 우클릭 금지를 걸어서 저작권 불펌 방지를 해놓은 곳을 쉽게 찾아볼 수 있을껍니다.

(그래서 난감할때가 간혹 있는데,,,ㅎㅎ)

 

드래그 금지, 우클릭 금지를 하는 방법과 적용했을 때의 모습을 확인해보겠습니다.

 

일단은 두가지로 나뉠 수 있는데,

HTML로 처리하는 방법과 CSS로 처리하는 방법 두가지가 있습니다.

 

먼저

 

HTML로 처리하는 방법

<!-- 마우스 드래그 금지 o -->
  <div oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
    (1절)
    동해물과 백두산이 마르고 닳도록
    하느님이 보우하사 우리나라만세
    (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
  </div>
  <br>
<!-- 마우스 드래그 금지 x -->
  <div>
    (2절)
    남산위에 저 소나무 철갑을 두른듯
    바람서리 불변함은 우리기상 일세
    (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
  </div>
  <br>
<!-- 마우스 드래그 금지 o -->
  <div oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
    (3절)
    가을하늘 공활한데 높고 구름없이 
    밝은달은 우리가슴 일편단심일세
    (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
  </div>
  <br>
<!-- 마우스 드래그 금지 x -->
  <div>
    (4절)
    이 기상과 이 맘으로 충성을 다하여
    괴로우나 즐거우나 나라사랑하세
    (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
  </div>

CSS로 처리하는 방법

<style>

div { 
  -webkit-touch-callout: none; 
  user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  -webkit-user-select: none; 
  }
  
</style>

<body>
  <div>
    (1절)
    동해물과 백두산이 마르고 닳도록
    하느님이 보우하사 우리나라만세
    (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
  </div>
  <br>
  <div>
    (2절)
    남산위에 저 소나무 철갑을 두른듯
    바람서리 불변함은 우리기상 일세
    (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
  </div>
  <br>
  <div>
    (3절)
    가을하늘 공활한데 높고 구름없이 
    밝은달은 우리가슴 일편단심일세
    (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
  </div>
  <br>
  <div>
    (4절)
    이 기상과 이 맘으로 충성을 다하여
    괴로우나 즐거우나 나라사랑하세
    (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
  </div>
  </body>

 

저작자표시