인터넷
-
크롬 & 엣지브라우저 연동가능! 크롬에서 사용하는 확장프로그램이 엣지브라우저(버전 83.0.478.45)에서도 동기화를 시키면 사용가능합니다. 물론 크롬 테마는 적용이 안되지만 다른 것들은 됩니다. 되는 이유는 엣지가 크롬 오픈소스를 사용한 브라우저기 때문이죠.:) 크롬 테마(Chrome Theme) 오리지널의 크롬도 좋지만 테마를 통해 "오 디자이너는 뭔가 다르네?" 라는 느낌을 주자(…) 크롬팀에서 제공하는 다양한 테마가 있으니 살펴보고 설치하세요 :) 왠만하면 다 좋긴 하더라구요! 저는 참고로 Sea Foam을 사용하고 있습니다. :) ※ 그런데 엣지는 당연히 적용이 안되기 때문에 엣지에서 유저 테마를 사용하셔야 합니다. (엣지팀 일해라) 엣지팀 일하라고 했더니 이제는 자체적으로 테마 컬러 설정이 ..
디자이너 필수 확장프로그램크롬 & 엣지브라우저 연동가능! 크롬에서 사용하는 확장프로그램이 엣지브라우저(버전 83.0.478.45)에서도 동기화를 시키면 사용가능합니다. 물론 크롬 테마는 적용이 안되지만 다른 것들은 됩니다. 되는 이유는 엣지가 크롬 오픈소스를 사용한 브라우저기 때문이죠.:) 크롬 테마(Chrome Theme) 오리지널의 크롬도 좋지만 테마를 통해 "오 디자이너는 뭔가 다르네?" 라는 느낌을 주자(…) 크롬팀에서 제공하는 다양한 테마가 있으니 살펴보고 설치하세요 :) 왠만하면 다 좋긴 하더라구요! 저는 참고로 Sea Foam을 사용하고 있습니다. :) ※ 그런데 엣지는 당연히 적용이 안되기 때문에 엣지에서 유저 테마를 사용하셔야 합니다. (엣지팀 일해라) 엣지팀 일하라고 했더니 이제는 자체적으로 테마 컬러 설정이 ..
2020.06.09 -
이미지를 통통 튕겨봅시다! 제 블로그에 보면 좌측 하단에 캐릭터가 통통 튕기는 모습을 보실수 있죠!? 이번에는 요고를 한번 알려드리도록 하겠습니다. 늘 말씀드리지만 최소의 노력을 최대의 효과를 올리는 팁이기 때문에 어려워 하실필요 없습니다! 지금까지의 저의 팁들을 따라하셨다면 이건 뭐 눈감고도 하실거에요! :) [ 플로팅 이미지 코드와 비슷한 효과입니다 ] CSS CODE .tongtong_img {position:fixed; bottom:-20px; left:0px; animation: bounce 1s infinite alternate; -webkit-animation: bounce 1s infinite alternate;} @keyframes bounce { from { transform: tran..
이미지 바운스 & 랜덤 이미지이미지를 통통 튕겨봅시다! 제 블로그에 보면 좌측 하단에 캐릭터가 통통 튕기는 모습을 보실수 있죠!? 이번에는 요고를 한번 알려드리도록 하겠습니다. 늘 말씀드리지만 최소의 노력을 최대의 효과를 올리는 팁이기 때문에 어려워 하실필요 없습니다! 지금까지의 저의 팁들을 따라하셨다면 이건 뭐 눈감고도 하실거에요! :) [ 플로팅 이미지 코드와 비슷한 효과입니다 ] CSS CODE .tongtong_img {position:fixed; bottom:-20px; left:0px; animation: bounce 1s infinite alternate; -webkit-animation: bounce 1s infinite alternate;} @keyframes bounce { from { transform: tran..
2020.05.26 -
제목과 같이 크롬(Chrome)브라우저에서만 가능합니다. 저는 크롬 유저입니다 :) - TMI 불펌방지를 클릭으로 해제 지금까지 마우스 우클릭을 막음으로 해서 불펌을 막곤 했습니다. 불펌을 말그대로 마음대로 퍼가지 말라는 건데… 네 정확히 말하면 주인의 허락없이 마음대로 공유하지 말라 입니다. 하지만 공유없이 나만(개인소장) 사용하고 싶다!? 이 프로그램을 한번 써보세요 :) 마우스 우클릭 해제 확장프로그램 사용방법 링크를 타고 들어가셔서 이 프로그램을 받아주세요. 프로그램 명 이름이 참 정직하죠? 크롬에 설치가 되었다면 이제 실행시켜 봅시다! 크롬 우측상단에 점 3개를 누르시면 아래 방금설치한 마우스 아이콘이 나옵니다. 클릭하신 후 이미지대로 클릭 클릭 한번씩 해주시면 Not Enabled가 Enabl..
크롬 마우스 우클릭 해제제목과 같이 크롬(Chrome)브라우저에서만 가능합니다. 저는 크롬 유저입니다 :) - TMI 불펌방지를 클릭으로 해제 지금까지 마우스 우클릭을 막음으로 해서 불펌을 막곤 했습니다. 불펌을 말그대로 마음대로 퍼가지 말라는 건데… 네 정확히 말하면 주인의 허락없이 마음대로 공유하지 말라 입니다. 하지만 공유없이 나만(개인소장) 사용하고 싶다!? 이 프로그램을 한번 써보세요 :) 마우스 우클릭 해제 확장프로그램 사용방법 링크를 타고 들어가셔서 이 프로그램을 받아주세요. 프로그램 명 이름이 참 정직하죠? 크롬에 설치가 되었다면 이제 실행시켜 봅시다! 크롬 우측상단에 점 3개를 누르시면 아래 방금설치한 마우스 아이콘이 나옵니다. 클릭하신 후 이미지대로 클릭 클릭 한번씩 해주시면 Not Enabled가 Enabl..
2020.02.25 -
최근에 블로그 스킨을 바꾸면서 또 저만의 스타일로 조금씩 바꿔보고 있는데요. 저도 스킨을 사실상 나눔을 받아 사용하는데 나도 나눠야 겠다! 싶어서 블로그에 보통 특정한 점을 강조하거나 할때 사용하는 라벨을 공유해볼려고 합니다 :) 라벨은 CSS로 되어 있어서 자신이 원하는 컬러코드를 입력해서 사용하셔도 됩니다! 여기에 사용된 아이콘 같은 경우 28x32 사이즈이므로 개별 작업하셔서 넣으시면 제대로 작동할겁니다 :) 라벨 예제 풍부하게 새가 천지는 뼈 심장의 그들은 충분히 얼음이 피다. 생의 능히 그림자는 그들의 귀는 같으며, 청춘을 이상은 원대하고, 있는가? GWD / WEWEB.TISTORY.COM CSS CODE custom_box check CSS CODE custom_box no CSS CODE ..
컨텐츠 라벨 4종 CSS최근에 블로그 스킨을 바꾸면서 또 저만의 스타일로 조금씩 바꿔보고 있는데요. 저도 스킨을 사실상 나눔을 받아 사용하는데 나도 나눠야 겠다! 싶어서 블로그에 보통 특정한 점을 강조하거나 할때 사용하는 라벨을 공유해볼려고 합니다 :) 라벨은 CSS로 되어 있어서 자신이 원하는 컬러코드를 입력해서 사용하셔도 됩니다! 여기에 사용된 아이콘 같은 경우 28x32 사이즈이므로 개별 작업하셔서 넣으시면 제대로 작동할겁니다 :) 라벨 예제 풍부하게 새가 천지는 뼈 심장의 그들은 충분히 얼음이 피다. 생의 능히 그림자는 그들의 귀는 같으며, 청춘을 이상은 원대하고, 있는가? GWD / WEWEB.TISTORY.COM CSS CODE custom_box check CSS CODE custom_box no CSS CODE ..
2020.02.11 -
멀웨어 제로 우리는 인터넷을 하다 무슨 일인지 나도 모르게 무언가가 설치되고 어느순간부터 이상한 곳으로 링크가 뜨는 현상을 볼 수 있습니다. (하아…) 지금까지 한 두번 정도 그런 적이 있는데 물론 그런 현상을 많이 겪은 건 아니지만 이게 한번 멀웨어에 감염되면 바이러스 마냥 일반적인 방법으로 삭제되지 않습니다. 혹시라도 프로그램 추가 삭제 등으로 악성코드를 제거하려한다면 포기하는게 편합니다. 그런 방법으로는 전혀 고쳐지지 않기 때문에 굉장히 스트레스죠. 뭘 할려고하면 이상한 (19금은 아니지만 전혀 뭔지도 모를… 물론 그런 쪽으로 유도하는 팝업 링크도 뜨는것도 있죠.) 사이트로 링크를 유도하는 팝업이 뜨기도 합니다. 멀웨어(Malware) : 악성코드를 통칭하는 말로 간단하게는 사이트 링크부터 사용자의..
멀웨어, 악성코드 제거멀웨어 제로 우리는 인터넷을 하다 무슨 일인지 나도 모르게 무언가가 설치되고 어느순간부터 이상한 곳으로 링크가 뜨는 현상을 볼 수 있습니다. (하아…) 지금까지 한 두번 정도 그런 적이 있는데 물론 그런 현상을 많이 겪은 건 아니지만 이게 한번 멀웨어에 감염되면 바이러스 마냥 일반적인 방법으로 삭제되지 않습니다. 혹시라도 프로그램 추가 삭제 등으로 악성코드를 제거하려한다면 포기하는게 편합니다. 그런 방법으로는 전혀 고쳐지지 않기 때문에 굉장히 스트레스죠. 뭘 할려고하면 이상한 (19금은 아니지만 전혀 뭔지도 모를… 물론 그런 쪽으로 유도하는 팝업 링크도 뜨는것도 있죠.) 사이트로 링크를 유도하는 팝업이 뜨기도 합니다. 멀웨어(Malware) : 악성코드를 통칭하는 말로 간단하게는 사이트 링크부터 사용자의..
2019.10.28 -
컨텐츠 이미지에 라운드를 줘보자! 티스토리에 이미지를 올릴때 라운드를 주어 이미지를 좀더 부드럽게 보이게 하는 방법을 포스팅 해볼려고 합니다 ^-^; 어쩌면 "포토샵으로 하면 되는거 아니야?" 할 수 있는데 매번 번거롭고 CSS로 충분히 커버가 가능하며 효율적이므로 이제 이렇게 한번 사용해보시길 바랍니다! CSS 입력 .imageblock img {border-radius:15px;} 라운딩의 크기는 border-radius의 수치를 변경해 가며 원하는 라운딩 사이즈를 찾으시면 될 것 같아요. 참. 쉽죠? ^-^ 궁금하신 점이 있으시면 댓글 남겨주시면 답변해드리도록 하겠습니다! 조금 더 참고 할만한 CSS
컨텐츠 이미지 라운딩컨텐츠 이미지에 라운드를 줘보자! 티스토리에 이미지를 올릴때 라운드를 주어 이미지를 좀더 부드럽게 보이게 하는 방법을 포스팅 해볼려고 합니다 ^-^; 어쩌면 "포토샵으로 하면 되는거 아니야?" 할 수 있는데 매번 번거롭고 CSS로 충분히 커버가 가능하며 효율적이므로 이제 이렇게 한번 사용해보시길 바랍니다! CSS 입력 .imageblock img {border-radius:15px;} 라운딩의 크기는 border-radius의 수치를 변경해 가며 원하는 라운딩 사이즈를 찾으시면 될 것 같아요. 참. 쉽죠? ^-^ 궁금하신 점이 있으시면 댓글 남겨주시면 답변해드리도록 하겠습니다! 조금 더 참고 할만한 CSS
2019.09.17 -
어느 곳을 클릭 할 때마다 효과를! 사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이다. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드리도록 하겠다. 생각보다 매우 쉬우니 가볍게 컨트롤 C 컨트롤 V로 효과를 만들어보도록 하자. 출처 사이트 : https://fdossena.com/?p=html5cool/clickfx/i.frag CSS 코드 HTML 편집 - CSS 탭 - 아래 코드를 복붙 하면 끝. div.clickEffect{ position:fixed; box-sizing:border-box; border-style:solid; border-color:#000000; bo..
마우스 클릭 효과어느 곳을 클릭 할 때마다 효과를! 사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이다. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드리도록 하겠다. 생각보다 매우 쉬우니 가볍게 컨트롤 C 컨트롤 V로 효과를 만들어보도록 하자. 출처 사이트 : https://fdossena.com/?p=html5cool/clickfx/i.frag CSS 코드 HTML 편집 - CSS 탭 - 아래 코드를 복붙 하면 끝. div.clickEffect{ position:fixed; box-sizing:border-box; border-style:solid; border-color:#000000; bo..
2019.05.16 -
이미지의 해상도 보통 외부에서 받은 이미지로 작업을 하다가 사이즈 때문에 난감할 때가 있는데요. 작은 이미지를 크게 늘려야만 하는 상황이 있을때가 참 난감해 집니다. 왜냐하면 억지로 늘릴 수록 이미지는 형채를 알아보기 힘들거나 그나마 정상이었던 이미지가 허접하게 변하기 때문이죠. 하지만 완벽하진 않지만 아주 방법이 없는 것은 아니다. 아래 사이트를 통해 해상도 손실을 최소화하며 늘려보세요! http://waifu2x.udp.jp/index.ko.html 막혔다면 이쪽으로 https://waifu2x.booru.pics/ 2배 까지는 괜찮아! 사이트 사용방법은 매우 쉽기 때문에 특별히 설명이 필요 없을 것 같지만 간단히 글로 설명을 하자면 이미지를 첨부파일로 넣고 이 이미지가 그림인지 사진인지 선택해주고 ..
해상도 낮은 이미지를 키우기이미지의 해상도 보통 외부에서 받은 이미지로 작업을 하다가 사이즈 때문에 난감할 때가 있는데요. 작은 이미지를 크게 늘려야만 하는 상황이 있을때가 참 난감해 집니다. 왜냐하면 억지로 늘릴 수록 이미지는 형채를 알아보기 힘들거나 그나마 정상이었던 이미지가 허접하게 변하기 때문이죠. 하지만 완벽하진 않지만 아주 방법이 없는 것은 아니다. 아래 사이트를 통해 해상도 손실을 최소화하며 늘려보세요! http://waifu2x.udp.jp/index.ko.html 막혔다면 이쪽으로 https://waifu2x.booru.pics/ 2배 까지는 괜찮아! 사이트 사용방법은 매우 쉽기 때문에 특별히 설명이 필요 없을 것 같지만 간단히 글로 설명을 하자면 이미지를 첨부파일로 넣고 이 이미지가 그림인지 사진인지 선택해주고 ..
2019.04.24 -
내가 직접 움짤을 만들어보자. 움짤이란 움직이는 이미지를 말하는데 보통 gif로 되어 있다. 마치 영상처럼 말이다. 그러나 당연하게도 영상처럼 소리가 나진 않는다. 그렇다면 이 움짤을 쓰는 이유는 무엇인가? 보통 상대방에게 구체적으로 글로 설명하기보다 이미지로 확실한 전달 방법으로도 사용하고 블로그를 꾸미는 사람에게도 유저에게 더 이해하기 쉽게 정보를 전달할 수 있고 영상을 올리고 연결시키고 하는데 너무 큰 사이즈만 아니라면 간단한 정도는 움짤로 가능하다. 카톡 등에서도 웃긴 짤로 많이 사용도 가능하다. 만드는 방법은 다양하게 있는 것으로 아는데 필자가 사용하는 2가지 방법을 알려드리도록 하겠다. 이런식으로 만들 수 있다. Gif Cam 프로그램을 통해서 만드는 방법이다. 프로그램 이름도 Gif Cam이..
움짤 만들기내가 직접 움짤을 만들어보자. 움짤이란 움직이는 이미지를 말하는데 보통 gif로 되어 있다. 마치 영상처럼 말이다. 그러나 당연하게도 영상처럼 소리가 나진 않는다. 그렇다면 이 움짤을 쓰는 이유는 무엇인가? 보통 상대방에게 구체적으로 글로 설명하기보다 이미지로 확실한 전달 방법으로도 사용하고 블로그를 꾸미는 사람에게도 유저에게 더 이해하기 쉽게 정보를 전달할 수 있고 영상을 올리고 연결시키고 하는데 너무 큰 사이즈만 아니라면 간단한 정도는 움짤로 가능하다. 카톡 등에서도 웃긴 짤로 많이 사용도 가능하다. 만드는 방법은 다양하게 있는 것으로 아는데 필자가 사용하는 2가지 방법을 알려드리도록 하겠다. 이런식으로 만들 수 있다. Gif Cam 프로그램을 통해서 만드는 방법이다. 프로그램 이름도 Gif Cam이..
2018.12.14 -
클릭 한번에 위로 스르륵 올라가는 스크롤링 생각보다 늦게 업데이트를 하는거 같은 블로깅이다. 사실 책갈피 태그 또는 넷갈피 태그라고 해서 a name 태그를 통해서 자신의 원하는 위치로 바로 찾아가게 만드는 태그로 할 수 있다. 마치 순간이동 처럼 말이다. 그러나 이번에는 스크립트를 통해 "스르륵" 부드럽게 스크롤링 하여 상단으로 올려주는 방법을 소개하려 한다. (필자의 블로그의 우측하단의 화살표 버튼과 같은 효과를 소개한다) 역시 어렵지 않으니 도전해보시기를 권장한다. 우선 TOP으로 올릴 아이콘을 구하거나 직접 만들어보도록 하자. 보통은 자신의 사이트의 분위기에 맞게 직접 작업한 이미지를 추천하지만 어렵다면 무료이미지 사이트에서 쓸만한 것들을 찾으면 되겠다. 그것마저 귀찮으신 분들을 위해 필자가 작업..
TOP 스크롤링클릭 한번에 위로 스르륵 올라가는 스크롤링 생각보다 늦게 업데이트를 하는거 같은 블로깅이다. 사실 책갈피 태그 또는 넷갈피 태그라고 해서 a name 태그를 통해서 자신의 원하는 위치로 바로 찾아가게 만드는 태그로 할 수 있다. 마치 순간이동 처럼 말이다. 그러나 이번에는 스크립트를 통해 "스르륵" 부드럽게 스크롤링 하여 상단으로 올려주는 방법을 소개하려 한다. (필자의 블로그의 우측하단의 화살표 버튼과 같은 효과를 소개한다) 역시 어렵지 않으니 도전해보시기를 권장한다. 우선 TOP으로 올릴 아이콘을 구하거나 직접 만들어보도록 하자. 보통은 자신의 사이트의 분위기에 맞게 직접 작업한 이미지를 추천하지만 어렵다면 무료이미지 사이트에서 쓸만한 것들을 찾으면 되겠다. 그것마저 귀찮으신 분들을 위해 필자가 작업..
2018.12.01 -
고민되는 스킨선택 블로그를 시작할때 기본적으로 어떤 것을 블로깅을 하고 가꿔나갈지 충분히 고민하고 시작하는 것이 좋다. 그냥 아무거나 해보자 라는 식의 블로그는 오래가지도 못하고 스스로 지쳐 금방 접기 마련이다. 그리고 자신의 주제에 맞는 블로그 스킨을 고르는 것 또한 아주 중요하다. 내가 쓴 정보들을 잘 전달해주는 역활을 하는 스킨! 이번에는 많은 분들이 고민하고 있는 스킨 선택에 대해서 웹디자이너가 보는 적절한 선택에 대해서 정리하고자 한다. 블로그를 시작하는 분들에게 조금이나마 참고가 되길 바라며 블로깅을 시작한다. 참고로 이번 블로깅은 온전히 티스토리에서만 제공하는 스킨으로만 추천해드리며 추후 기회가 된다면 유저무료배포, 유료배포 등으로 나눠서도 한번 추천해보도록 하겠다. 브랜드 사이트 & 전문(..
티스토리 스킨 뭐쓸까? (공식편)고민되는 스킨선택 블로그를 시작할때 기본적으로 어떤 것을 블로깅을 하고 가꿔나갈지 충분히 고민하고 시작하는 것이 좋다. 그냥 아무거나 해보자 라는 식의 블로그는 오래가지도 못하고 스스로 지쳐 금방 접기 마련이다. 그리고 자신의 주제에 맞는 블로그 스킨을 고르는 것 또한 아주 중요하다. 내가 쓴 정보들을 잘 전달해주는 역활을 하는 스킨! 이번에는 많은 분들이 고민하고 있는 스킨 선택에 대해서 웹디자이너가 보는 적절한 선택에 대해서 정리하고자 한다. 블로그를 시작하는 분들에게 조금이나마 참고가 되길 바라며 블로깅을 시작한다. 참고로 이번 블로깅은 온전히 티스토리에서만 제공하는 스킨으로만 추천해드리며 추후 기회가 된다면 유저무료배포, 유료배포 등으로 나눠서도 한번 추천해보도록 하겠다. 브랜드 사이트 & 전문(..
2018.11.16 -
스크롤바를 최상단 고정하기 인디케이터(Indicator)? 인디케이터가 무엇이냐? 하면 사전으로는 이렇다. (일의 현황·사정 변화 등을 나타내는) 지표. 그렇다 지금 필자의 블로그에 적용된 상단에 스크롤을 하면 상단에 게이지가 쌓이며 어느정도 스크롤링이 됬는지 보여지는 것이다.(물론 메뉴에도 쓰이고 다양하게 쓰인다) 스크롤바가 있는데 이게 굳이 왜 필요하느냐? 그렇다 굳이는 필요 없다. 그러나 꾸미기에 관심이 있는 분들에게 혹(?)할만한 아이템이라고 생각해서 블로깅을 하는 것이다. 따지고 보면 꾸미기 상관없이 그냥 블로깅을 해도 된다. 이것은 자기만족이라고 할 수 있다. 좀 깊이 들어가면 UX나 UI적으로는 충분히 쓸만한 아이템이라 생각한다. 과하지만 않는다면 말이다. 최근 사이트들이 많이 사용중이기도(..
스크롤 인디케이터 만들기스크롤바를 최상단 고정하기 인디케이터(Indicator)? 인디케이터가 무엇이냐? 하면 사전으로는 이렇다. (일의 현황·사정 변화 등을 나타내는) 지표. 그렇다 지금 필자의 블로그에 적용된 상단에 스크롤을 하면 상단에 게이지가 쌓이며 어느정도 스크롤링이 됬는지 보여지는 것이다.(물론 메뉴에도 쓰이고 다양하게 쓰인다) 스크롤바가 있는데 이게 굳이 왜 필요하느냐? 그렇다 굳이는 필요 없다. 그러나 꾸미기에 관심이 있는 분들에게 혹(?)할만한 아이템이라고 생각해서 블로깅을 하는 것이다. 따지고 보면 꾸미기 상관없이 그냥 블로깅을 해도 된다. 이것은 자기만족이라고 할 수 있다. 좀 깊이 들어가면 UX나 UI적으로는 충분히 쓸만한 아이템이라 생각한다. 과하지만 않는다면 말이다. 최근 사이트들이 많이 사용중이기도(..
2018.10.26