이미지 검색 결과

해당 글 10건

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

블로그를 운영하다 보면 불펌과의 전쟁이라고 해도 과언이 아닙다. 물론 나도.. 좋은 소스코드 같은 것은 항상.. 뺏기기 벤치마킹 하고 있긴 하다만... 흠흠 -_- 그래도!! 신경써서 직접찍은 이미지가 도용당한다면.. 정말.. 마음이 아픕니다. ㅠ_ㅠ 마우스 우클릭 막는 소스코드가 있긴해도... 크롬확장프로그램 또는 요소검사등으로 다 뚫리게 됩니다.. http://cocosoft.kr/371-마우스 우클릭 방지 및 자동 출처 표시에 대한 고찰 어느 블로그에 가보니 마우스 우클릭 방지 태그에 관한 고찰 중 소스코드 한줄 복사안해본 사람 돌을 던지라는 말을 보고는.. 마우스 우클릭 방지 태그를 삭제 한 적이 있기도 하죠... 암튼 서론은 이쯤하고... 소크코드 뿐만아니라 이미지를 도용 당했을 때는 정말 기분..

Tistory Blog/Html,Css 편집 2016. 7. 3. 21:49

[HTML/CSS]웹디자인 이미지에 대한 고찰 및 블로그 로고 리뉴얼

인터넷 익스플로러 때문에 대충 임시방편으로 수정 해놓은 로고의 코드를 다시 리뉴얼 작업을 했습니다. 'ㅡ' 여기서 왜 로고의 코드라고 했는지 아래에서 다시 설명하고.. 로고이미지 리뉴얼 작업을 하면서, 이양 하는 김에.. 웹디자인 이미지 사용에 대해서 정리해보는 시간을 가지려고합니다.!! Intro:웹사이트 속도와 이미지 빠르고 쾌적하고 원할한 웹페이지를 만들기 위해서는 코드의 압축이나 정리, 서버등의 방법도 중요하지만 가장 크게 신경이 쓰이는 부분이 바로 이미지 입니다. 우선 우리가 아는 이미지들은 전부가 모두 코드로 되어있죠. JPG, PNG 들도 단순히 각각의 압축방식입니다. 그래서 이미지코드를 하나의 파일로 간단히 만들어 놓고, 뷰어프로그램이나 이미지편집프로그램(그림판,포토샵...등등) 으로 보거..

Tistory Blog/Html,Css 편집 2016. 6. 26. 22:29

[CSS]티스토리 사진 이미지 테두리 적용하기 ( 추가 또는 삭제 )

최근 블로그 글을 쓰다가 보니 집에 있는 모니터로는 확인을 못했는데.. 조금 밝은 모니터로 확인을 해보니 사진과 텍스트 경계선이 구분 되지 않아서 가독성이 많이 불편 하였습니다. 그래서 티스토리 블로그의 이미지, 사진 테두리 설정하는 방법에 대해서 알아보겠습니다. 티스토리 사진 이미지 테두리 적용하기 현재 블로그 이미지에 모든 테두리가 적용이 되어 있습니다. 테두리를 설정하는 방법은 간단합니다. 이미지 태그인 img에다가 border CSS 속성을 설정을 해주면 됩니다. border이 바로 테두리를 정하는 CSS속성이기 때문입니다. 각방향의 테두리 색상도 정할 수 있고 다양한 테두리 무늬도 표현할 수 있습니다. 현재 제블로그는 아래와 같이 설정이 되어 있습니다. img{border:2px outset r..

Tistory Blog/Html,Css 편집 2016. 5. 18. 20:20

블로그 이미지 로딩 빠르게하기(페이지속도) CSS Sprite Image

안녕하세요. 오늘은 블로그 이미지 로딩을 빠르게 하는 방법 중 하나인 블로그 이미지 로딩 빠르게하기 CSS Sprite Image 에 대해서 알아보겠습니다. 예전 포스팅을 통해서 몇 가지 페이지 로딩 속도 향상을 위해서 방법을 알려드린 적이 있습니다. 첫 번째가 이미지 압축해서 사용하기 https://compressor.io/ - 무손실에 가깝게 이미지 크기를 압축 시켜 주는 사이트입니다. 두 번째 데이타 URI 스킴(Data-URI scheme)Base64 이미지 넣기 http://cocosoft.kr/364 이미지를 따로 라이브러리에 저장하지 않고 HTML이나 CSS 문서에 바로 base64코딩으로 코드로 집어 넣는 방법 (이 방법의 단점은 브라우저 캐시가 안된다는 점이겠죠?) 그리고 마지막 세 번째..

Tistory Blog/Html,Css 편집 2016. 2. 28. 00:10

[티스토리]블로그 로고 만들기 사이트 및 마우스오버 효과(pure css)

블로그를 시작하고 드디어 3번째 이사(?) 블로그 스킨 작업이 마무리가 되어가네요. 스킨을 변경 할 때마다 새로운 마음으로 시작 하는 것 같아서 뭔가 뿌듯하고 기분이 좋습니다. 블로그 스킨의 가장 마무리를 장식할 부분이라고 한다면 저는 로고 작업이라고 생각하네요. 한 눈에 자신만의 블로그 개성을 표현할 수 있고 방문객들에게 오랫동안 블로그의 기억 할 수 있게? 기억하기 쉽고 아름다운 블로그의 이름과 로고는 매우 중요 한 것 같습니다! 블로그의 화룡점정!! (코코소프트는.. 제가 어릴 때 코코폰인가? 그거 갖고 싶어서 그냥 만들었던 기억이.. 너무 어릴 때라서..ㅋㅋ 암튼 네이버 다음 네이트 등등 웬만한 포털과 사이트들 게임 아이디나 전부 cocosoft 였네요. 최근 몇 년 전에는 게임앱 개발 회사 중에..

Tistory Blog/Html,Css 편집 2016. 2. 16. 01:33

[CSS]티스토리 하단 출처 이미지 넣기 및 위젯 순서 변경 정리!

안녕하세요. 오늘은 티스토리 하단 부분에 출처 이미지를 넣어 보겠습니다!! 요런식으로요!이게 간단해 보이지만 자그마치 3개의 코드 기술이 합쳐진 컴비네이션. 아니고.. 누구나 손쉽게 따라 할 수 있게 해보겠습니다! 크게 하단 부분에 이미지를 넣는 방식은 2개가 있습니다. 1). 직접 태그를 사용해서 넣는 방식2). 태그를 사용해서 박스를 만들고 backgroud CSS 속성으로 넣는 방식(jQuery를 사용하는 방식도 있긴한데 나중에 갤러리효과를 소개할 때 따로 설명하고) 두개의 방식이 비슷 하긴 하지만 아래와 같은 차이가 있습니다.하는 이미지로 인식을 하고 다른 하나는 그냥 페이지로 인식을 하고 하나는 이미지파일이 직접 노출되며 하나는 배경으로 들어가서 숨겨지게 되죠. 간혹 서식을 저장해놓고 글 작성할..

Tistory Blog/Html,Css 편집 2016. 2. 11. 00:07

[티스토리]CCZ-CROSS 스킨 로딩 이미지 CSS로 변경 #2편

안녕하세요. 오늘은 제가 사용하는 블로그 스킨 흉내내기 님이 제작하신 CCZ-CROSS 스킨의 preloader 기능의 로딩 이미지를 GIF 파일이 아닌 .CSS 로 변경하는 작업 2편을 해보겠습니다! 자세한 개념이나 내용 설명은 1편을 참고 해주시구요. 이번 편은 손쉽게 따라 할 수 있게 제작을 해보겠습니다. INFO [티스토리]CCZ-CROSS 스킨 preloader 로딩 이미지 CSS로 변경 1편 download CCZ-CROSS 스킨 배포 및 소개 사용 할 예제 See the Pen xbwVXJ by brunjo (@brunjo) on CodePen. 사용할 소스입니다. 구글의 로딩 바의 형식의 코드입니다. 준비물 download Notepad++(문서편집기) - Naver software 자료실..

Tistory Blog/Html,Css 편집 2016. 2. 9. 18:35

[티스토리]이미지 썸네일 스킨치환자 소개(썸네일 사이즈 조절 가능)

안녕하세요. 오늘은 티스토리 블로그에 새롭게 추가된 썸네일 스킨 치환자에 대해서 알아보겠습니다. 기존에 티스토리는 썸네일 API를 공개하지 않았기 때문에포스팅 본문의 썸네일을 추출하기가 쉽지 않았습니다. 그래서 기존의 스킨 개발자 분들은 Ajax를 이용한 이미지 추출을 하였습니다.다만 이방식을 했을때는 바로 썸네일이 나타나지 않고 시간이 소요되며RSS를 전체공개 설정을 해야하는 단점이 있습니다. 그러던 중 티스토리에서 썸네일 이미지 주소의 스킨 치환자를 추가 합니다. 티스토리_스킨가이드_스킨치환자 기존의 썸네일 스킨 치환자 하지만 이 방식 또한 치명적인 단점이 있었습니다. 바로 썸네일의 크기를 조절하지 못하고썸네일의 이미지 사이즈 크기가 가로값이 750px인 썸네일로 제공된다는 점입니다. 제가 사용하는 ..

Tistory Blog/Html,Css 편집 2016. 2. 6. 05:17

티스토리 본문 하단 애드센스, 플러그인 위치 변경 방법

안녕하세요. 오늘은 티스토리 본문 하단 부분에 애드센스 광고나 플러그인이미지 등등의 위치를 변경하는 방법에 대해서 알아보겠습니다. 티스토리의 경우에는 효율적인 블로그 운영을 위해 다양한 기능의 플러그인을직접 제공하는 방식을 하고 있습니다. 플러그인에 대해선 할얘기가 많지만.. 아무튼 저렇게 직접적으로 제공하는 방식이약이 될 수도 독이 될 수도 있습니다. html 수정을 잘 모르는 초보자에게는 매우 손쉽게 플러그인 적용이 가능하다는 점이 있지만,새로운 신기능의 플러그인 적용이 어렵다는 점, 플러그인 수정이 힘들다는 점제공하는 플러그인의 업데이트가 매우 느리다는 점등이 있습니다. 아무튼 쉽게 적용하고 설치할 수 있는 장점도 있지만, 따로 html 수정이 불가능하고,설치된 플러그인들의 위 이미지 처럼 위치도 ..

Tistory Blog/Html,Css 편집 2015. 5. 31. 14:22

소니의 CEO가 실수로 아이폰의 5 비밀 세부 정보를 누설?

소니의 CEO인 하워드 스트링거는 애플의 아이폰5의 카메라 이미지센서에 대한 정보를 실수로 공개해 화제가 되고있다. 월스트리스 저널과의 공식 인터뷰에서 지난 15일 지진,해일의 피해에 대해 설명하던중 소니의 이미지센서 공장피해로 인해 아이폰5 센서 공급의 지연될 것이라고 말한 것으로 알려졌다. 이는 곧 아이폰5의 연기설로 이어져 국내외 네티즌들의 관심이 주목되고있다. 이 점에 따르면 OmniVision은 아이폰4용 이미지센서를 공급해 왔는데, 소니CEO의 발언에 따르면 아이폰5용 카메라부품 공급처를 소니로 전환한것으로 알 수있다. 즉, 애플은 엑스페리아 아크(Arc)와 네오(Neo)에 적용된 동일한 이면조사(backside-illuminated) 방식의 800만 화소급 엑스머 R 센서(Exmer R se..

IT Review/News 2011. 4. 4. 15:21