목차
개요
티스토리 플러그인 "마우스 오른쪽 클릭 방지"를 통해 작성한 글이 복사되는 것을 방지하고 있었죠.
저는 주로 Power BI DAX 관련 포스트를 쓰고 있는데, 간단한 DAX 식부터 복잡한 DAX 식까지 다양합니다.
특히 DAX 식을 직접 연습하고자 하신 분들은 글 복사가 안되니, 직접 보면서 코드를 직접 입력을 해야 하는데, 불편함이 있죠.
그래서 다른 것보다는 DAX 식이 복사 가능하도록 하는 방법을 찾아보게 되었고, 이에 대한 내용을 공유합니다.
목적
- DAX 식은 코드 블럭에서 지원하지 않는다. 따라서 코드 블럭과 상관없이 본문의 일부 영역에 복사 가능하도록 해야 한다.
이는 본문 중 특정 영역 복사 가능하도록 할 수 있는 방법을 찾는 것입니다.
특정 영역 복사 허용
스킨 편집 - CSS 코드 추가
스킨 편집을 통해 티스토리 사이트 모든 포스트에 적용할 수 있습니다.
꾸미기의 스킨 편집 그리고 html 편집을 선택합니다.
그리고 CSS를 선택합니다. 기존 CSS 코드는 전혀 건드리지 말고, 아래 파란색 박스를 CSS 맨 아래 (사실 어디에 넣어도 상관없지만, 관리를 위해서) 코드를 삽입니다.
html 태그 <code> ~ </code>로 감싼 곳은 복사를 허용한다는 뜻입니다. 나머지 본문 전체 <body>는 복사 금지 의미입니다.
<code> 영역을 제외하고 플러그인 "마우스 오른쪽 클릭 방지"를 CSS로 구현했죠.
"<> 코드 블록"으로 삽입했습니다. 코드 블럭 html 코드를 보면 <code> ~ </code>에서 구현되어 있습니다.
따라서 위 CSS 코드에 의해 복사 가능한 상태가 됩니다.
/*블로그 복사 방지 및 <code>영역</code> 복사 허용*/
code {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}
플러그인 - 마우스 오른쪽 클릭 방지 해제
CSS 코드로 <body> 부분 복사 방지 기능을 넣었기 때문에, 이제 티스토리 플러그인에서 "마우스 오른쪽 클릭 방지"를 해제해도 <code> 부분을 제외하고는 여전히 복사 방지 상태가 됩니다.
전혀 걱정할 필요 없으니, 아래 처럼 플러그인에서 해제합니다.
복사 가능 상태
아래 페이지를 예로 들어볼게요.
복사 후 결과
일부 텍스트는 문제가 없기도 하지만, 텍스트의 html 구성에 따라 아래처럼 두 줄로 구성된 코드가 한 줄로 나오는 현상이 있습니다.
노트패드에 복사 붙여 넣기 결과:
Sum of Amount =SUM ( SHOP[Amount] )
출처: https://brightsomuch.tistory.com/entry/Power-BI-DAX-기초-측정값-만들기 [Bright 데이터 분석:티스토리]
이는 플러그인 "저작권자 표시"가 사용중일 때 발생하는 현상입니다.
플러그인 - 저작권자 표시 해제
소스코드를 공유할 목적이라면 줄 구별이 유지되는 것은 상당히 중요합니다. 그래서 저작권자 표시보다는 정확한 코드를 공유할 목적이 크기 때문에 과감히 저작권자 표시를 해제합니다.
복사 후 결과
아래처럼 노트패드에 붙여 넣기를 하면 아래와 같이 결과를 볼 수 있습니다.
이런 결과는 제가 공유하고자 하는 목적에 정확히 부합하네요.
노트패드에 복사 붙여넣기 결과:
그리고 아래처럼 측정값 식을 입력합니다.
Sum of Amount =
SUM ( SHOP[Amount] )
포스트 <code> 사용 예시
https://brightsomuch.tistory.com/entry/Power-BI-DAX-기초-측정값-만들기에서 사용한 아래 부분을 포스트에서 어떻게 <code> ~ </code>를 사용했는지 알려드릴게요.
본문 텍스트
아래와 같이 복사가 가능한 텍스트 앞에 <code>를, 문장의 마지막에 </code>를 넣어 주었습니다.
DAX 식 (HTML 블럭)
DAX 식을 포스트에서 아래와 같은 방법으로 삽입합니다.
- 기본모드 --> HTML
- <> HTML 블럭
<code> ~ </code>와 같이 쓰기에는 <> HTML 블럭을 쓰는 것이 더 편합니다. HTML 모드에서 작업하면, 자동으로 <code> 위치가 바뀌는 경우가 있습니다.
DAX 식 스타일을 유지하면서 식 앞 뒤로 <code>, </code>를 사용했습니다.
마치며
CSS 수정을 통해 <code> 태그의 내용을 복사 가능하도록 할 수 있었습니다.
<code> 태그는 포스트의 일부 텍스트 또는 <> HTML 블럭에도 사용 가능하기 때문에, 원하는 목적에 따라 복사 허용하고 싶은 내용이 있을 때 유용하게 사용하시면 좋을 듯합니다.
'Home 티스토리 꾸미기' 카테고리의 다른 글
| 티스토리 포스트 제목 배경 단색으로 설정 (0) | 2024.07.27 |
|---|