[CSS]웹페이지 웹문서 본문에 워터마크(watermark) 삽입하기

블로그를 운영하다 보면 불펌과의 전쟁이라고 해도 과언이 아닙다.

물론 나도.. 좋은 소스코드 같은 것은 항상.. 뺏기기 벤치마킹 하고 있긴 하다만... 흠흠 -_-

그래도!! 신경써서 직접찍은 이미지가 도용당한다면.. 정말.. 마음이 아픕니다. ㅠ_ㅠ

마우스 우클릭 막는 소스코드가 있긴해도...

크롬확장프로그램 또는 요소검사등으로 다 뚫리게 됩니다..

http://cocosoft.kr/371-마우스 우클릭 방지 및 자동 출처 표시에 대한 고찰

어느 블로그에 가보니 마우스 우클릭 방지 태그에 관한 고찰 중 소스코드 한줄 복사안해본 사람

돌을 던지라는 말을 보고는.. 마우스 우클릭 방지 태그를 삭제 한 적이 있기도 하죠...

암튼 서론은 이쯤하고...

소크코드 뿐만아니라 이미지를 도용 당했을 때는 정말 기분이 나쁩니다.

일일히 워터마크 삽입하기도 귀찮고.. (포토스케이프 같은 프로그램 사용하거나)

회사의 쇼핑몰 사이트에 상세설명 사진 부분이 있는데..

일일히 워터마크 삽입하면서 이미지 편집하기 귀찮아서 

워터마크 이미지를 블로그 본문이나 상세 설명페이지 위로 덮을 수 있지 않을까 생각을 해보았습니다.

그래서 한 번 블로그에 작업을 해보려고 합니다. 웹에 검색을 해보니 텍스트로 집어넣는 방식은 많이 있더군요.

쉽게 생각을 해서 해당영역에 박스를 주고, 이미지를 위로 올려버리는 방식으로 할 까 했습니다.

우선 준비물은!!

워터마크로 사용할 PNG 형식의 이미지 파일

이것을 [관리자]화면 → [HTML/CSS]편집 에서 파일업로드 에 업로드 해줍니다. 파일명을 기억해주세요.

저는 간편하게 wartermark.png 로 했습니다. 

자그리고 적용할 본문영역을 확인해야합니다.

제블로그의 본문영역은 div태그의 post-content 셀렉터로 감싸져있습니다.

티스토리 공식 반응형 웹 스킨은 .area_view로 안에 본문영역이 나타나죠.

쉽게 찾는 방법은 [관리자]화면 → [HTML/CSS]편집 →

블로그를 운영하다 보면 불펌과의 전쟁이라고 해도 과언이 아닙다.

물론 나도.. 좋은 소스코드 같은 것은 항상.. 뺏기기 벤치마킹 하고 있긴 하다만... 흠흠 -_-

그래도!! 신경써서 직접찍은 이미지가 도용당한다면.. 정말.. 마음이 아픕니다. ㅠ_ㅠ

마우스 우클릭 막는 소스코드가 있긴해도...

크롬확장프로그램 또는 요소검사등으로 다 뚫리게 됩니다..

http://cocosoft.kr/371-마우스 우클릭 방지 및 자동 출처 표시에 대한 고찰

어느 블로그에 가보니 마우스 우클릭 방지 태그에 관한 고찰 중 소스코드 한줄 복사안해본 사람

돌을 던지라는 말을 보고는.. 마우스 우클릭 방지 태그를 삭제 한 적이 있기도 하죠...

암튼 서론은 이쯤하고...

소크코드 뿐만아니라 이미지를 도용 당했을 때는 정말 기분이 나쁩니다.

일일히 워터마크 삽입하기도 귀찮고.. (포토스케이프 같은 프로그램 사용하거나)

회사의 쇼핑몰 사이트에 상세설명 사진 부분이 있는데..

일일히 워터마크 삽입하면서 이미지 편집하기 귀찮아서 

워터마크 이미지를 블로그 본문이나 상세 설명페이지 위로 덮을 수 있지 않을까 생각을 해보았습니다.

그래서 한 번 블로그에 작업을 해보려고 합니다. 웹에 검색을 해보니 텍스트로 집어넣는 방식은 많이 있더군요.

쉽게 생각을 해서 해당영역에 박스를 주고, 이미지를 위로 올려버리는 방식으로 할 까 했습니다.

우선 준비물은!!

워터마크로 사용할 PNG 형식의 이미지 파일

이것을 [관리자]화면 → [HTML/CSS]편집 에서 파일업로드 에 업로드 해줍니다. 파일명을 기억해주세요.

저는 간편하게 wartermark.png 로 했습니다. 

자그리고 적용할 본문영역을 확인해야합니다.

제블로그의 본문영역은 div태그의 post-content 셀렉터로 감싸져있습니다.

티스토리 공식 반응형 웹 스킨은 .area_view로 안에 본문영역이 나타나죠.

쉽게 찾는 방법은 [관리자]화면 → [HTML/CSS]편집 → 치환자를 찾아주세요.

해당 치환자가 블로그 본문의 내용을 나타내는 치환자 입니다.

html 영역 편집

그리고는 div태그를 사용해서 한번 더 감싸줍니다.

저는 watermark 셀렉터로 임의로 만들어 주었습니다.

	<div class="area_view">
		<div class="watermark">
			
		</div>
	</div>

CSS 영역 편집

자 그리고는 CSS 영역 수정을 하러 가줍니다.

따로 코드를 정리하지 않는다면 그냥 CSS 편집 가장 마지막에 추가를 해줍니다.

.area_view .watermark{
	background: url(./images/watermark.png) repeat;
}

하지만.... 이미지 파일은 워터마크 위로 올라오게 됩니다. 

이미지파일과 배경과의 스택 콘텍스트 설정을 해줍니다. 요소 배치 순서 잡는 것이라고 

생각하면 쉽고, z-index 속성을 사용해서 설정합니다.

티스트로 블로그 본문의 삽입된 이미지들은 imageblock 셀렉터로 감싸져있습니다. 

해당 셀렉터의 속성값이 정해진 스킨도 있고 없는 스킨도 있습니다.

아래 코드를 CSS에 추가해줍니다.

.imageblock{
    z-index: -1;
    position: relative;
}

짜잔~~~ 완성입니다. +_+ 크크크.. 어려울 줄 알았는데 생각보다 쉽게 했네요.

다만... 워터마크 이미지는 다시 수정하고 교체를 해야할 것 같습니다. ㅋㅋㅋ 조금더 연하게요.. ㅎㅎ

5% 투명도의 워터마크를 밖긴했는데.. 좀더 지켜봐야겠네요 ㅎㅎ

일부 스킨이나 블로그 영역의 경우 상위 div 셀렉터에 z-index값을 0으로 줘야 정상적으로 스택콘텍스트 설정이 됩니다.
예) 본블로그의 경우는 본문내용영역의 상위 셀렉터인 .post-content 해당 값을 주었습니다.

해당 방식으로 워터마크를 삽입하니.. 클릭 하면 원본 볼 수 있는 light TT EX 사용을 할 수 가없네요. ㅠ_ㅠㅋㅋ

뭐 그래도 아예 오른쪽 버튼으로 이미지 다운로드 자체를 막았으니 좋다고 해야하나요? 음..

간혹 익플에서 light 스크립트가 충돌이 일어나서 로딩이 느려지는 현상이 있던데.. 몇 일간 빼고 테스트해봐야겠네요.

요즘.. ㅠ 진짜 블로그 본문 쓰는데 시간이 없네요 ㅠ_ㅠ

메인화면도 빨리 꾸며야하는데... 다음편에는 웹디자인을 할 때 더 재밌고 좋은 소스코드로 가져오겠습니다.

2016.07.07 내용추가

네이버 웹마스터 도구와 관련한...

이 방식으로 워터마크를 삽입시... 네이버 웹마스터 도구에서 봇이 포스팅을 수집을 못해갑니다...;;; 다른 방법을 찾아볼게용 ㅠ_ㅠ

치환자를 찾아주세요.

해당 치환자가 블로그 본문의 내용을 나타내는 치환자 입니다.

html 영역 편집

그리고는 div태그를 사용해서 한번 더 감싸줍니다.

저는 watermark 셀렉터로 임의로 만들어 주었습니다.

	<div class="area_view">
		<div class="watermark">
			





            



            

블로그를 운영하다 보면 불펌과의 전쟁이라고 해도 과언이 아닙다.
물론 나도.. 좋은 소스코드 같은 것은 항상.. 뺏기기 벤치마킹 하고 있긴 하다만... 흠흠 -_-


그래도!! 신경써서 직접찍은 이미지가 도용당한다면.. 정말.. 마음이 아픕니다. ㅠ_ㅠ


마우스 우클릭 막는 소스코드가 있긴해도...
크롬확장프로그램 또는 요소검사등으로 다 뚫리게 됩니다..
http://cocosoft.kr/371-마우스 우클릭 방지 및 자동 출처 표시에 대한 고찰


어느 블로그에 가보니 마우스 우클릭 방지 태그에 관한 고찰 중 소스코드 한줄 복사안해본 사람
돌을 던지라는 말을 보고는.. 마우스 우클릭 방지 태그를 삭제 한 적이 있기도 하죠...


암튼 서론은 이쯤하고...
소크코드 뿐만아니라 이미지를 도용 당했을 때는 정말 기분이 나쁩니다.
일일히 워터마크 삽입하기도 귀찮고.. (포토스케이프 같은 프로그램 사용하거나)


회사의 쇼핑몰 사이트에 상세설명 사진 부분이 있는데..
일일히 워터마크 삽입하면서 이미지 편집하기 귀찮아서 
워터마크 이미지를 블로그 본문이나 상세 설명페이지 위로 덮을 수 있지 않을까 생각을 해보았습니다.


그래서 한 번 블로그에 작업을 해보려고 합니다. 웹에 검색을 해보니 텍스트로 집어넣는 방식은 많이 있더군요.


쉽게 생각을 해서 해당영역에 박스를 주고, 이미지를 위로 올려버리는 방식으로 할 까 했습니다.


우선 준비물은!!
워터마크로 사용할 PNG 형식의 이미지 파일



이것을 [관리자]화면 → [HTML/CSS]편집 에서 파일업로드 에 업로드 해줍니다. 파일명을 기억해주세요.
저는 간편하게 wartermark.png 로 했습니다. 




자그리고 적용할 본문영역을 확인해야합니다.


제블로그의 본문영역은 div태그의 post-content 셀렉터로 감싸져있습니다.



티스토리 공식 반응형 웹 스킨은 .area_view로 안에 본문영역이 나타나죠.
쉽게 찾는 방법은 [관리자]화면 → [HTML/CSS]편집 →  치환자를 찾아주세요.
해당 치환자가 블로그 본문의 내용을 나타내는 치환자 입니다. 



html 영역 편집
그리고는 div태그를 사용해서 한번 더 감싸줍니다.
저는 watermark 셀렉터로 임의로 만들어 주었습니다.

	<div class="area_view">
		<div class="watermark">
			
		</div>
	</div>



CSS 영역 편집
자 그리고는 CSS 영역 수정을 하러 가줍니다.
따로 코드를 정리하지 않는다면 그냥 CSS 편집 가장 마지막에 추가를 해줍니다.

.area_view .watermark{
	background: url(./images/watermark.png) repeat;
}



하지만.... 이미지 파일은 워터마크 위로 올라오게 됩니다. 





이미지파일과 배경과의 스택 콘텍스트 설정을 해줍니다. 요소 배치 순서 잡는 것이라고 
생각하면 쉽고, z-index 속성을 사용해서 설정합니다.


티스트로 블로그 본문의 삽입된 이미지들은 imageblock 셀렉터로 감싸져있습니다. 



해당 셀렉터의 속성값이 정해진 스킨도 있고 없는 스킨도 있습니다.
아래 코드를 CSS에 추가해줍니다.

.imageblock{
    z-index: -1;
    position: relative;
}


짜잔~~~ 완성입니다. +_+ 크크크.. 어려울 줄 알았는데 생각보다 쉽게 했네요.





다만... 워터마크 이미지는 다시 수정하고 교체를 해야할 것 같습니다. ㅋㅋㅋ 조금더 연하게요.. ㅎㅎ
5% 투명도의 워터마크를 밖긴했는데.. 좀더 지켜봐야겠네요 ㅎㅎ

일부 스킨이나 블로그 영역의 경우 상위 div 셀렉터에 z-index값을 0으로 줘야 정상적으로 스택콘텍스트 설정이 됩니다.

 예) 본블로그의 경우는 본문내용영역의 상위 셀렉터인 .post-content 해당 값을 주었습니다.



해당 방식으로 워터마크를 삽입하니.. 클릭 하면 원본 볼 수 있는 light TT EX 사용을 할 수 가없네요. ㅠ_ㅠㅋㅋ
뭐 그래도 아예 오른쪽 버튼으로 이미지 다운로드 자체를 막았으니 좋다고 해야하나요? 음..


간혹 익플에서 light 스크립트가 충돌이 일어나서 로딩이 느려지는 현상이 있던데.. 몇 일간 빼고 테스트해봐야겠네요.


요즘.. ㅠ 진짜 블로그 본문 쓰는데 시간이 없네요 ㅠ_ㅠ


메인화면도 빨리 꾸며야하는데... 다음편에는 웹디자인을 할 때 더 재밌고 좋은 소스코드로 가져오겠습니다.
2016.07.07 내용추가

    
네이버 웹마스터 도구와 관련한...
    
이 방식으로 워터마크를 삽입시... 네이버 웹마스터 도구에서 봇이 포스팅을 수집을 못해갑니다...;;; 다른 방법을 찾아볼게용 ㅠ_ㅠ



            




		</div>
	</div>

CSS 영역 편집

자 그리고는 CSS 영역 수정을 하러 가줍니다.

따로 코드를 정리하지 않는다면 그냥 CSS 편집 가장 마지막에 추가를 해줍니다.

.area_view .watermark{
	background: url(./images/watermark.png) repeat;
}

하지만.... 이미지 파일은 워터마크 위로 올라오게 됩니다. 

이미지파일과 배경과의 스택 콘텍스트 설정을 해줍니다. 요소 배치 순서 잡는 것이라고 

생각하면 쉽고, z-index 속성을 사용해서 설정합니다.

티스트로 블로그 본문의 삽입된 이미지들은 imageblock 셀렉터로 감싸져있습니다. 

해당 셀렉터의 속성값이 정해진 스킨도 있고 없는 스킨도 있습니다.

아래 코드를 CSS에 추가해줍니다.

.imageblock{
    z-index: -1;
    position: relative;
}

짜잔~~~ 완성입니다. +_+ 크크크.. 어려울 줄 알았는데 생각보다 쉽게 했네요.

다만... 워터마크 이미지는 다시 수정하고 교체를 해야할 것 같습니다. ㅋㅋㅋ 조금더 연하게요.. ㅎㅎ

5% 투명도의 워터마크를 밖긴했는데.. 좀더 지켜봐야겠네요 ㅎㅎ

일부 스킨이나 블로그 영역의 경우 상위 div 셀렉터에 z-index값을 0으로 줘야 정상적으로 스택콘텍스트 설정이 됩니다.
예) 본블로그의 경우는 본문내용영역의 상위 셀렉터인 .post-content 해당 값을 주었습니다.

해당 방식으로 워터마크를 삽입하니.. 클릭 하면 원본 볼 수 있는 light TT EX 사용을 할 수 가없네요. ㅠ_ㅠㅋㅋ

뭐 그래도 아예 오른쪽 버튼으로 이미지 다운로드 자체를 막았으니 좋다고 해야하나요? 음..

간혹 익플에서 light 스크립트가 충돌이 일어나서 로딩이 느려지는 현상이 있던데.. 몇 일간 빼고 테스트해봐야겠네요.

요즘.. ㅠ 진짜 블로그 본문 쓰는데 시간이 없네요 ㅠ_ㅠ

메인화면도 빨리 꾸며야하는데... 다음편에는 웹디자인을 할 때 더 재밌고 좋은 소스코드로 가져오겠습니다.

2016.07.07 내용추가

네이버 웹마스터 도구와 관련한...

이 방식으로 워터마크를 삽입시... 네이버 웹마스터 도구에서 봇이 포스팅을 수집을 못해갑니다...;;; 다른 방법을 찾아볼게용 ㅠ_ㅠ