웹 프론트엔드 JS 튜토리얼 JavaScript는 PC 웹 페이지에서 드래그 앤 드롭 효과를 구현합니다_javascript 기술

JavaScript는 PC 웹 페이지에서 드래그 앤 드롭 효과를 구현합니다_javascript 기술

May 16, 2016 pm 03:10 PM
javascript pc 견인

몇 년 전 저는 부동산 웹사이트 프로젝트의 디자인과 개발에 참여했는데, 프로젝트 매니저의 요구 사항이 상대적으로 높기 때문에 부동산의 우수한 기능을 많이 언급했습니다. 다른 사람들의 우수한 디자인과 아이디어를 수집하고 싶었고, 그 당시의 디자인 초안과 기능 구현은 단순히 변경만 반복되었습니다. 오늘 얻은 좋은 효과는 다음 날로 미루어야 할 수도 있습니다. 그 얘기는 하지말고 오늘 설명드릴 사건에 대해서 얘기해보겠습니다.(광고는 전혀 의심되지 않습니다.) 약간의 광고비?), 제품 관리자가 특히 좋아하는 기능이 하나 있는데, 바로 다음과 같습니다.

이것은 현재 효과이며, 약간의 변경이 있을 수 있습니다. 원래 효과는 내부의 그림을 상하좌우로 드래그할 수 있고, 그러면 집에 표시되는 건물 번호도 그림과 함께 이동한다는 것입니다. time,js 능력이 부족해서 프로젝트 매니저의 요구사항을 충족하지 못했는데 나중에 프로젝트 매니저가 이 효과를 거부하고 다른 효과로 교체했습니다

프로젝트 매니저가 이런 효과를 원하지 않았음에도 불구하고, 그 당시 제 마음에 뭉클하게 남아서 지금도 잊혀지지 않습니다.

좋아, 이것이 오늘 이 블로그를 쓰는 나의 원래 의도입니다. 이런 종류의 드래그 효과를 얻고 싶지만 그것을 달성하는 방법을 모르는 학생들에게 아이디어를 제공할 수 있기를 바랍니다. 물론 드래그 앤 드롭을 구현하는 방법은 다양합니다. 여기서는 JavaScript로 한 가지 방법만 소개하고 그 원리를 천천히 이해하겠습니다!

자, 농담은 끝났습니다. 우선 드래그가 무엇인지 이해해야 합니다. 여러분도 알고 있고 저도 알고 있지만 그래도 설명하고 싶습니다.

드래그 앤 드롭은 마우스를 사용하여 페이지에서 드래그할 수 있습니다. 정확한 설명은 마우스를 컨테이너로 이동한 다음 마우스를 놓지 않도록 주의하세요. 그런 다음 마우스를 놓으면 컨테이너가 마우스를 따라갈 수 있습니다. 실제 예는 테이블 위에 상자가 있는 경우입니다. 상자. 손이 멈추면 상자가 멈춥니다. 치우세요. 상자가 움직이지 않습니다. 헤헤, 이해해요!

위 내용이 너무 말도 안된다고 생각하지 마세요. 여기서 많은 정보를 얻을 수 있습니다. 요약은 다음과 같습니다.

드래그 = 마우스 다운 + 마우스 이동 + 마우스 업

이렇게 드래그 앤 드롭 작업이 완료되었습니다. 그런데 이것이 드래그 앤 드롭의 원리라는 것이 밝혀졌습니다. 드래그 앤 드롭을 구현하려면 위의 세 가지 동작을 자연스럽게 구현하여 드래그 앤 드롭 효과를 시뮬레이션할 수 있습니다. . 이는 JavaScript의 구문에 해당합니다.

다음 3가지 작업을 구현하면 됩니다.

onmousedown, onmousemove, onmouseup

구현된 코드는 다음과 같아야 합니다.

obj.onmousedown = function(ev){
   obj.onmousemove = function(ev){
 
   } ;
   obj.onmouseup = function(ev){
   
   };
   
}
로그인 후 복사

다음 두 액션을 왜 작성해야 할까요? 잘 생각해 봅시다. 첫 번째 단계의 일반적인 아이디어는 다음 단계에서 마우스로 개체를 이동시키는 방법을 고려하는 것입니다. 아이디어는 아마도 다음과 같을 것입니다:

먼저 개체를 이동하려면 왼쪽 및 위쪽 값을 조작해야 하기 때문에 개체의 위치를 ​​지정해야 합니다. 그런 다음 마우스 변위 자체에 거리가 있어야 합니다. 마우스가 움직인 것을 알 수 있습니다. 그러면 개체에 이 거리가 부여됩니다. 개체가 마우스와 같은 거리로 이동합니까? ㅎㅎ 아이디어가 좀 있고 귀엽네요~ 이제 문제는 마우스의 거리를 어떻게 구하느냐 입니다. 더 알고 싶으시면 박스 모델을 검토해 보세요. 여기서는 다루지 않겠습니다. 많은 마스터들도 관련 블로그를 가지고 있습니다. 제가 사용하는 블로그는 다음과 같습니다.

설명: 파란색 상자는 화면의 너비와 높이, 두꺼운 검은색 상자는 브라우저의 가시 영역의 너비와 높이(브라우저 축소 효과), 얇은 검은색 상자는 마우스로 드래그할 개체입니다. , 그림과 같이 마우스 좌표를 얻으려면 event.clientX, event.clientY를 사용하여 얻을 수 있습니다.

일반적인 계산 원리는 아래 그림을 참조하세요.

설명: 왼쪽은 초기 위치, 오른쪽은 대상 위치, 원점은 마우스 위치, 큰 검은색 상자는 브라우저에 표시되는 너비, 작은 검은색 상자는 드래그 개체, 상태를 확인하세요. 개체를 대상 위치로 드래그하고 마우스의 최종 위치를 얻은 다음 마우스와 개체의 차이를 뺀 다음 개체의 위쪽 및 왼쪽 값에 할당합니다. 마우스의 위치 차이를 얻은 다음 초기 위쪽 및 왼쪽 값에 차이를 추가할 수도 있습니다. 두 번째 종류도 가능합니다. 직접 시도해 보세요.

 obj.onmousedown = function(ev){
  var ev = ev || event;
  var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop;
 
  document.onmousemove = function(ev){
    var ev = ev || event;
    obj.style.left = ev.clientX - disX + 'px';
    obj.style.top = ev.clientY - disY + 'px';
  };
  document.onmouseup = function(ev){
    var ev = ev || event;
    document.onmousemove = document.onmouseup = null;
  };
}
로그인 후 복사

这里说明一下:onmousemove和onmouseup之所以用document对象而不用obj对象,是因为如果用obj对象,鼠标在obj内部还好,如果在obj外面的话,拖拽会很怪异,你也可以改成obj体会一下,最后我们在鼠标弹起的时候将事件都清空;

上面的基本拖拽就算完成了,但是细心的同学一定会问,如果页面上有文字的话,拖拽物体会将文字选中,这效果岂不是怪怪的,没错,这是因为拖拽的时候触发了浏览器的默认选择事件,所以,在拖拽的时候,我们要清除这个默认事件,那怎么清除呢?

下面给一个兼容性写法:

if(ev.stopPropagation){
   ev.stopPropagation();
}else{
  ev.cancelBubble = true; //兼容IE
}
//简写成
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
로그인 후 복사

将上面的代码放在onmousedown下,鼠标按下就清除浏览器默认事件,文字就不会被选中了,好了,一个简单的拖拽效果就完成了,当然你现在是看不到效果,之所以不给demo链接是为了让你自己试着写一写,这样印象更深刻,

好了,那问题又来了,到这里就这样完了吗?。。。。。。按本人的风格,当然没有,干货还在后面!

如果我想实现这样一个效果,就是这一个大的容器里面(可以是box,也可以是document),怎么样能让我们的拖拽对象不跑出去呢,换句话说,拖到边缘就拖不动了,耶,是不是很多人想要实现的效果,哈哈,我们看看实现的原理是什么:

现实生活中,一个物体在一个盒子里跑不出去,是因为有堵墙,那我们只要能模拟出这堵墙,就可以把物体框起来,那这堵墙要怎么做呢?我们可以换个思路,当拖拽对象拖到边缘的时候,比如说拖到右边,我们将它的left固定住,是不是就不能再往右了,因为left值不能再加了,那么拖到底部,同理我们将top值固定住,就不能再往下拖了,理解吗?

最终的结果就是如下:

//左侧
if(obj.offsetLeft <=0){
  obj.style.left = 0;
};
//右侧
if(obj.offsetLeft >= pWidth - oWidth){
  obj.style.left = pWidth - oWidth + 'px'; 
};
//上面
if(obj.offsetTop <= 0){
  obj.style.top = 0; 
};
//下面
if(obj.offsetTop >= pHeight - oHeight){
  obj.style.top = pHeight - oHeight + 'px'; 
};
로그인 후 복사

说明:pWidth,pHeight 表示父级元素的宽高(这里是表示相对于父级的宽高限制),oWidth,oHeigt表示拖拽元素的宽高

最后,我将整个拖拽代码整理了一下:

/*
      参数说明:
      元素绝对定位,父级相对定位,如果父级为window,则可以不用
      传一个参数,表示父级为window,物体相对于window范围拖动
      传2个参数,则父级为第二个参数,物体相对于父级范围拖动
      参数为id值
    */
    function drag(obj,parentNode){
      var obj = document.getElementById(obj);
      if(arguments.length == 1){
        var parentNode = window.self; 
        var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight;  
      }else{
        var parentNode = document.getElementById(parentNode);
        var pWidth = parentNode.offsetWidth,pHeight = parentNode.offsetHeight;
      }
      obj.onmousedown = function(ev){
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop;
        var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight;
         
        //阻止冒泡时间
        ev.stopPropagation &#63; ev.stopPropagation() : ev.cancelBubble = true;
       
         
        document.onmousemove = function(ev){
          var ev = ev || event;
          obj.style.left = ev.clientX - disX + 'px';
          obj.style.top = ev.clientY - disY + 'px';
           
          //左侧
          if(obj.offsetLeft <=0){
            obj.style.left = 0;
          };
          //右侧
          if(obj.offsetLeft >= pWidth - oWidth){
            obj.style.left = pWidth - oWidth + 'px'; 
          };
          //上面
          if(obj.offsetTop <= 0){
            obj.style.top = 0; 
          };
          //下面
          if(obj.offsetTop >= pHeight - oHeight){
            obj.style.top = pHeight - oHeight + 'px'; 
          };
        };
        document.onmouseup = function(ev){
          var ev = ev || event;
          document.onmousemove = document.onmouseup = null;
        };
      }
         
    }
로그인 후 복사

说明:我这里处理的效果是,如果传一个参数,表示相对的对象是window对象,如果传2个参数,第一个是拖拽对象,第二个为相对父级

开篇就说了,搜房网的那个图片拖拽效果是我的一个心结,我写了一个类似的效果,供大家参考,因为自己没有买服务器,所以效果我就不展示了,直接把代码贴出来,供大家参考:

css:

<style>
.box{
  width:600px;
  height:400px;
  margin:50px auto;
  position:relative;
  overflow:hidden;
}
#box{
  width:1000px;
  height:800px;
  position:absolute;
  left:50%;
  top:50%;
  margin:-400px 0 0 -500px;
}
#pic{ width:800px; height:600px; background:url(images/pic1.jpg) no-repeat; position:absolute; left:100px; top:100px; }
#pic:hover{
  cursor:move;
}
</style>
로그인 후 복사

html:

<div class="box">
    <div id="box">
      <div id="pic"></div>
    </div>
  </div>
로그인 후 복사

javascript:

window.onload = function(){
     
    drag("pic","box");
    function drag(obj,parentNode){
      var obj = document.getElementById(obj);
      if(arguments.length == 1){
        var parentNode = window.self; 
        var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight;  
      }else{
        var parentNode = document.getElementById(parentNode);
        var pWidth = parentNode.offsetWidth,pHeight = parentNode.offsetHeight;
      }
      obj.onmousedown = function(ev){
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop;
        var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight;
         
        //阻止冒泡时间
        ev.stopPropagation &#63; ev.stopPropagation() : ev.cancelBubble = true;
       
         
        document.onmousemove = function(ev){
          var ev = ev || event;
          obj.style.left = ev.clientX - disX + 'px';
          obj.style.top = ev.clientY - disY + 'px';
           
          //左侧
          if(obj.offsetLeft <=0){
            obj.style.left = 0;
          };
          //右侧
          if(obj.offsetLeft >= pWidth - oWidth){
            obj.style.left = pWidth - oWidth + 'px'; 
          };
          //上面
          if(obj.offsetTop <= 0){
            obj.style.top = 0; 
          };
          //下面
          if(obj.offsetTop >= pHeight - oHeight){
            obj.style.top = pHeight - oHeight + 'px'; 
          };
        };
        document.onmouseup = function(ev){
          var ev = ev || event;
          document.onmousemove = document.onmouseup = null;
        };
      }
         
    }
     
     
  }
로그인 후 복사

效果完全是用的那个封装代码块,引用起来也挺方便,有人会问了,你这用的id获取DOM元素,一个页面只能用一次啊,如果页面多次使用呢,有道理,解决方案之一,那就命名不同的id呗,又不犯法,方案二,获取id的地方改成获取class,但是要注意的是,getElementsByClassName是获取的class集合,需要改写一下,这里我就不写了,有兴趣的同学自行改写一下,好了,到这里真的结束了!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Windows PC에서 액세스 포인트 일시적으로 전체 오류를 수정하는 방법 Windows PC에서 액세스 포인트 일시적으로 전체 오류를 수정하는 방법 Mar 16, 2024 pm 03:19 PM

Windows 11/10 PC에서 Wi-Fi 라우터 또는 모바일 핫스팟에 연결할 때 "액세스 포인트가 일시적으로 가득 찼습니다"라는 오류가 발생하는 경우 이는 일반적으로 네트워크 과부하 또는 연결된 장치가 너무 많기 때문에 발생합니다. 이 문제를 해결하고 인터넷에 성공적으로 연결하려면 다음 방법을 시도해 보십시오. 1. 다시 연결을 시도하기 전에 다른 장치의 연결이 끊어질 때까지 잠시 기다리십시오. 2. Wi-Fi 라우터 또는 모바일 핫스팟을 다시 시작하여 네트워크 캐시를 지우고 IP 주소를 다시 할당하세요. 3. PC의 Wi-Fi 어댑터 드라이버가 최신인지 확인하고, 장치 관리자를 통해 업데이트를 확인하세요. 4. 혼잡한 시간을 피하는 것이 더 나은 연결 기회를 제공할 수 있으므로 다른 시간에 연결해 보십시오. 5. AccessP 추가를 고려해보세요

Windows PC가 BIOS로 계속 부팅되는 문제 [수정] Windows PC가 BIOS로 계속 부팅되는 문제 [수정] Mar 11, 2024 am 09:40 AM

Windows PC가 BIOS 인터페이스에 자주 진입하는 경우 사용에 어려움이 발생할 수 있습니다. 컴퓨터를 켤 때마다 BIOS 화면이 나타나며 다시 시작해도 도움이 되지 않습니다. 이 문제에 직면한 경우 이 문서에서 제공하는 솔루션이 도움이 될 것입니다. 컴퓨터가 계속 BIOS로 부팅되는 이유는 무엇입니까? BIOS 모드에서 컴퓨터가 자주 다시 시작되는 현상은 부적절한 부팅 순서 설정, 손상된 SATA 케이블, 느슨한 연결, BIOS 구성 오류 또는 하드 드라이브 오류 등 다양한 이유로 인해 발생할 수 있습니다. Windows PC가 BIOS로 계속 부팅되는 문제 수정 Windows PC가 계속 BIOS로 부팅되는 경우 아래 수정 사항을 사용하세요. 부팅 순서를 확인하고 다시 연결하십시오.

Windows PC에서 Samsung Flow를 사용하는 방법 Windows PC에서 Samsung Flow를 사용하는 방법 Feb 19, 2024 pm 07:54 PM

SamsungFlow는 Galaxy 휴대폰을 Windows PC에 쉽게 연결할 수 있는 편리하고 실용적인 도구입니다. SamsungFlow를 사용하면 기기 간 콘텐츠 공유, 알림 동기화, 스마트폰 미러링 등을 편리하게 수행할 수 있습니다. 이 글에서는 Windows 컴퓨터에서 SamsungFlow를 사용하는 방법을 소개합니다. Windows PC에서 스마트폰 스트리밍을 사용하는 방법 SamsungFlow를 사용하여 Windows PC와 Galaxy Phone을 연결하려면 Galaxy 스마트폰과 태블릿에서 Android 7.0 이상이 실행되고, Windows PC에서 Windows 10 이상이 실행되고 있는지 확인해야 합니다.

모든 OneDrive 파일을 PC에 한 번에 다운로드하는 방법 모든 OneDrive 파일을 PC에 한 번에 다운로드하는 방법 Feb 19, 2024 pm 06:51 PM

이 문서에서는 모든 OneDrive 파일을 PC에 한 번에 다운로드하는 방법을 설명합니다. OneDrive는 사용자가 언제 어디서나 파일에 액세스할 수 있는 강력한 클라우드 저장소 플랫폼입니다. 경우에 따라 사용자는 파일을 로컬로 백업하거나 오프라인으로 액세스해야 할 수도 있습니다. 이 작업을 쉽게 수행하는 방법을 알아보려면 계속 읽어보세요. 모든 OneDrive 파일을 PC에 한 번에 다운로드하는 방법은 무엇입니까? 모든 OneDrive 파일을 Windows PC에 한 번에 다운로드하려면 다음 단계를 따르세요. Onedrive를 실행하고 내 파일로 이동합니다. OneDrive에 업로드된 모든 파일은 여기에서 사용할 수 있습니다. Ctrl+A를 눌러 모든 파일을 선택하거나 확인란을 선택하여 모든 항목 선택을 전환합니다. 상단의 다운로드 옵션을 클릭하고,

저가형 Chrome 호스트의 모험: Black Apple을 설치할 수는 없지만 적격 PC로 간주될 수 있음 저가형 Chrome 호스트의 모험: Black Apple을 설치할 수는 없지만 적격 PC로 간주될 수 있음 Jul 11, 2024 pm 04:38 PM

그러고보니 해외 정크 시리즈를 많이 제작했는데, 그 전에는 휴대폰이나 조립식 PC가 대부분이었다. 전자는 평균적인 플레이성을 갖고 있는 반면, 후자는 불확실성이 가득했다. 예를 들어, 지난번 설치에 300달러를 들인 컴퓨터는 이제 논스톱 드라이버 제거 상태에 들어갔습니다. 그러나 '누더기 줍기'가 바로 그것이고, 위험과 이익이 공존하는 것이 표준이다. 예를 들어 이번에는 ASUS ChromeBox를 "수리"했습니다. 원래는 Macmini(가짜)로 만들고 싶었지만 그 과정에서 예상치 못한 문제가 많이 발생하여 의도한 목표를 달성하지 못했습니다. 결국 저는 차선책을 선택하고 거기에 Windows를 플래시하는 것을 선택해야 했습니다. 사과를 검게 만드는 시도는 마지막 단계로 떨어졌지만, 그 과정 내내 정말 즐거웠습니다. 그리고

300위안을 들여 조립한 컴퓨터가 국산 대형 모델을 뚫고 성공적으로 돌아갔습니다. 300위안을 들여 조립한 컴퓨터가 국산 대형 모델을 뚫고 성공적으로 돌아갔습니다. Apr 12, 2024 am 08:07 AM

2023년을 AI 원년으로 인정한다면 2024년은 AI 대형 모델 대중화의 핵심 해가 될 가능성이 높다. 지난해에는 수많은 대형 AI 모델과 AI 애플리케이션이 대거 등장했고, 메타, 구글 등 제조사들도 'AI 인공지능'과 유사한 자체 온라인/로컬 대형 모델을 대중에게 선보이기 시작했다. "라는 개념은 갑자기 사람들에게 다가왔습니다. 요즘 사람들은 생활 속에서 인공지능에 점점 더 많이 노출되고 있습니다. 주의 깊게 살펴보면 액세스할 수 있는 다양한 AI 애플리케이션이 거의 모두 "클라우드"에 배포되어 있음을 알 수 있습니다. 대형 모델을 로컬에서 실행할 수 있는 장치를 구축하려는 경우 하드웨어는 일반 사람들에게 5,000위안이 넘는 새로운 AIPC입니다.

PC가 켜졌다 꺼졌다를 반복하는데 화면이 표시되지 않습니다. PC가 켜졌다 꺼졌다를 반복하는데 화면이 표시되지 않습니다. Mar 04, 2024 am 09:47 AM

Windows PC가 켜지고 꺼지고 화면이 표시되지 않는 경우 하드웨어 오류로 인해 발생할 수 있습니다. 이 문제는 일반적으로 전원 문제와 관련이 있습니다. 이 상황을 해결하는 데 도움이 되는 몇 가지 해결 방법은 다음과 같습니다. 컴퓨터가 반복적으로 켜졌다 꺼졌다는 것은 무엇을 의미합니까? 컴퓨터를 자주 켜고 끄는 것은 하드웨어 오류의 징후일 수도 있고, 전원 공급 장치 문제로 인해 이러한 현상이 발생할 수도 있습니다. CPU와 RAM은 이 문제를 일으키는 가장 일반적인 하드웨어 구성 요소입니다. PC가 반복적으로 켜지고 꺼지지만 디스플레이가 나타나지 않습니다. 컴퓨터를 켰다가 꺼도 디스플레이가 나타나지 않는 경우 다음 제안 사항이 도움이 될 것입니다. 전원 코드를 뽑았다가 다시 연결하십시오. 배터리 없이 노트북을 다시 연결하십시오.

IDC: 글로벌 PC 모니터 출하량은 2023년에 8.6% 감소하고 2024년에는 완만하게 회복될 것입니다. IDC: 글로벌 PC 모니터 출하량은 2023년에 8.6% 감소하고 2024년에는 완만하게 회복될 것입니다. Mar 23, 2024 pm 04:06 PM

3월 22일 이 사이트에서 전한 소식에 따르면, 시장조사기관 IDC가 최근 발표한 보고서에 따르면, 2023년 4분기 글로벌 PC 모니터 출하량은 3,190만대로 전년 동기 대비 3.8% 증가해 IDC보다 소폭 높았다. 3.2%의 이전 예측. 4분기에는 모든 주요 시장 부문이 성장을 경험했으며, 소비자 시장은 상업 시장보다 빠르게 성장했습니다. 성장은 저가형 시장이 아닌 주류 및 고급 가격대 부문에서 이루어집니다. PC 모니터 출하량은 2023년 상반기 17.4% 감소해 2023년 연간 출하량은 8.6% 감소했다. IDC는 2023년에는 게이밍 모니터가 전체 모니터 출하량의 약 16%를 차지할 것이라고 밝혔습니다. 게임용 PC 출하량 감소로 예산이 더 확보되고 중급형 모니터 부문 경쟁이 치열해졌습니다.

See all articles