티스토리툴바

본문 바로가기
Tistory

티스토리(Tistory) 특정 부분만 드래그 허용

by ljw 2023. 4. 10.
반응형

목차

    플러그인을 사용하여 전체 드래그 금지

    1. 티스토리의 관리자창으로 들어가서 왼쪽 사이드바에 플러그인 메뉴를 클릭한다.
    2. 검색 버튼을 누르고 마우스를 검색한다.
    3. 마우스 오른쪽 클릭 방지를 클릭하고, 적용 버튼을 누른다.
    마우스 오른쪽 클릭 방지 플러그인을 사용하면 간단하게 모든 이미지와 글을 복사할 수 없게 만들 수 있다.

    HTML, CSS를 편집하여 특정 부분만 드래그 허용

    이 방법을 사용하기 위해서는 먼저 마우스 오른쪽 클릭 방지 플러그인을 해제해야 한다.
    1. 전체 드래그를 금지
    2. 특정 부분(ex. 코드 블럭, HTML 블럭, 인용)만 드래그를 허용
    3. 마우스 우클릭 금지

    1. CSS를 편집하여 전체 드래그 금지

    1. 티스토리의 관리자창으로 들어가서 왼쪽 사이드바에 꾸미기의 스킨 편집 메뉴를 클릭한다.
    2. html 편집 버튼을 클릭한다.
    3. HTML | CSS | 파일업로드 중 CSS를 클릭한다.
    4. 가장 밑으로 내려가서 아래의 코드를 추가한다.
    /* 글 드래그 금지 */
body {
	/* Webkit 기반 브라우저(chrome, safari 등)에서 드래그를 금지한다. */
	-webkit-user-select: none !important;
	/* Gecko 엔진 기반의 브라우저(Firefox 등)에서 드래그를 금지한다. */
	-moz-user-select: none !important;
	/* Internet Explorer 브라우저에서 드래그를 금지한다. */
	-ms-user-select: none !important;
	/* 현재 대부분의 브라우저에서 드래그를 금지한다. */
	user-select: none !important;
    /* 모바일 브라우저에서 글자나 이미지를 길게 눌렀을 때 나타나는 메뉴가 나타나지 않도록 한다. */
	-webkit-touch-callout: none !important;
}

    2. CSS를 편집하여 특정 부분은 드래그 허용

    1. 티스토리의 관리자창으로 들어가서 왼쪽 사이드바에 꾸미기의 스킨 편집 메뉴를 클릭한다.
    2. html 편집 버튼을 클릭한다.
    3. HTML | CSS | 파일업로드 중 CSS를 클릭한다.
    4. 가장 밑으로 내려가서 아래의 코드를 추가한다.
    /* 코드블럭(code), HTML블럭(pre), 인용구(blockquote)에서만 드래그 허용 */
code, pre, blockquote {
	/* Webkit 기반 브라우저(chrome, safari 등)에서 드래그를 허용한다. */
	-webkit-user-select: text !important;
	/* Gecko 엔진 기반의 브라우저(Firefox 등)에서 드래그를 허용한다. */
	-moz-user-select: text !important;
	/* Internet Explorer 브라우저에서 드래그를 허용한다. */
	-ms-user-select: text !important;
	/* 현재 대부분의 브라우저에서 드래그를 허용한다. */
	user-select: text !important;
}

    3. HTML을 편집하여 마우스 우클릭 금지

    1. 티스토리의 관리자창으로 들어가서 왼쪽 사이드바에 꾸미기의 스킨 편집 메뉴를 클릭한다.
    2. html 편집 버튼을 클릭한다.
    3. HTML | CSS | 파일업로드 중 HTML를 클릭한다.
    4. 윈도우는 Control + F, 맥은 Command + F를 눌러 내부 검색 창을 띄운다.
    5. body id를 검색하여 찾는다.
    6. <body id=~~~> 줄 위에 아래의 코드를 추가한다.
    <body oncontextmenu="return false"></body>

    ※ CSS 코드 설명

    • body
      웹 페이지의 전체 내용을 뜻한다. body를 적절하게 설정하여 웹 페이지의 전체적인 디자인을 설정할 수 있다.
    • code
      코드 블럭의 디자인을 설정할 수 있다.
    • pre
      HTML 블럭의 디자인을 설정할 수 있다.
    • blockquote
      인용 블럭의 디자인을 설정할 수 있다.

    user-select이란?

    user-select 사용자가 웹페이지에서 선택 가능한 텍스트, 이미지 또는 요소를 지정하는 속성이다.
    -webkit-user-select 웹킷(Webkit) 기반 브라우저에서 사용되는 CSS 속성으로, 사용자가 웹 페이지에서 선택 가능한 텍스트, 이미지 또는 요소를 지정하는 속성이다.
    -moz-user-select Gecko 엔진 기반의 브라우저(예: Firefox)에서 사용되는 CSS 속성으로, 사용자가 웹 페이지에서 선택 가능한 텍스트, 이미지 또는 요소를 지정하는 속성이다.
    -ms-user-select Internet Explorer(IE) 브라우저에서 사용되는 CSS 속성으로, 사용자가 웹 페이지에서 선택 가능한 텍스트, 이미지 또는 요소를 지정하는 속성이다.
    -webkit-touch-callout 웹 페이지에서 글자나 이미지 등을 길게 누르면 나타나는 컨텍스트 메뉴를 컨트롤하는 CSS 속성이다.
    모바일 브라우저에서 글자나 이미지를 길게 눌렀을 때 나타나는 컨텍스트 메뉴를 제어하기 위해 사용한다.

    user-select 옵션들

    none 사용자가 선택할 수 없다.
    auto 사용자가 선택할 수 있다. 기본으로 설정되어 있다.
    text 텍스트 선택만 가능하다.
    contain 텍스트 및 이미지 선택이 가능하다.

    !important란?

    • 속성의 우선순위를 높이는 키워드이다.
    • !important를 속성 값 끝에 붙이면, 해당 속성 값은 다른 모든 스타일 규칙보다 우선 적용된다.
    • !important를 여러 번 사용하였을 경우, !important를 가장 나중에 사용한 속성 값이 적용된다.

    body oncontextmenu란?

    • HTML 문서의 <body> 요소에 이벤트 핸들러를 등록하여, 마우스 우클릭 이벤트가 발생할 때 실행할 코드를 정의하는 방법이다.
    • 마우스 우클릭 이벤트는 기본적으로 브라우저에서 컨텍스트 메뉴를 띄우는 동작을 수행하지만, <body oncontextmenu>를 사용하여 마우스를 우클릭하였을 때 사용자가 원하는 동작을 하도록 설정할 수 있다.
    • 여기서는 "return false"의 값을 주어 마우스를 우클릭하였을 때 아무 동작을 하지 않도록 설정하였다.
    반응형

    'Tistory' 카테고리의 다른 글

    티스토리(tistory) 북클럽 스킨 메뉴 숨기기  (0) 2023.04.19
    티스토리(Tistory) 코드블럭 테마 바꾸기  (0) 2023.04.08
    티스토리(Tistory) 헤더(header) 상단 고정하기  (0) 2023.04.08

    관련글

    댓글

    티스토리툴바