본문 바로가기

인터넷

컨텐츠 이미지 라운딩 컨텐츠 이미지에 라운드를 줘보자! 티스토리에 이미지를 올릴때 라운드를 주어 이미지를 좀더 부드럽게 보이게 하는 방법을 포스팅 해볼려고 합니다 ^-^; 어쩌면 "포토샵으로 하면 되는거 아니야?" 할 수 있는데 매번 번거롭고 CSS로 충분히 커버가 가능하며 효율적이므로 이제 이렇게 한번 사용해보시길 바랍니다! 내 블로그의 컨텐츠 담당영역을 알아보자! 컨텐츠 안에만 들어가는 이미지에 라운드를 주기 위해서 컨텐츠를 담당하는 클래스명을 찾아보도록 하죠. 여기선 크롬브라우저를 예로 알아보도록 합니다. CTRL + SHIFT + C 를 누르면 위의 이미지와 같이 나오는데 컨텐츠 영역으로 마우스 커서를 두다 보면 컨텐츠 영역으로 크게 범위가 잡히고 오른쪽에 DIV 클래스를 표시 해줍니다. 저는 entry-content..
무료이미지 & 텍스쳐 & 아이콘 무료이미지와 텍스쳐 그리고 아이콘까지! 최근에 알게된 그리고 자주 사용하고 있는 이미지 사이트들을 소개해 드리도록 하겠습니다. 기존에 블로깅한 사이트들도 이용할만하니 모두 참고하여 작업할때 도움이 되시길 바라며 혹시라도 링크가 깨져 있거나 할 경우 댓글로 남겨주시면 정말 감사할것 같습니다. : ) RAW PIXEL - 이미지 이미지의 양은 많지는 않은 편이지만 퀄리티는 꽤 준수한 사이트 입니다. 상단에 FREE, PREMIUM, DESIGN RESOURCES, THEMES, PUBLIC DOMAIN 카테고리 메뉴가 있으며 개인적으로는 검색을 통해서 이미지를 얻어내는 것이 좋다고 생각합니다. 물론 영어로… (디자이너의 덕목에는 검색 능력도 필수!) 다만 PREMIUM은 유료서비스이며 무료 서비스로는 하루 ..
마우스 클릭 효과 어느 곳을 클릭 할 때마다 효과를! 사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이다. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드리도록 하겠다. 생각보다 매우 쉬우니 가볍게 컨트롤 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..
해상도 낮은 이미지를 키우기 이미지의 해상도 우리는 보통 이미지를 가지고 일을 하다가 종종 난감할 때가 있다. 바로 작은 이미지를 크게 늘려야만 하는 상황이 있을때가 말이다. 보통은 비슷한 걸로 대체가능할 수 있다면 가장 좋은 방법이겠지만 그게 아니라면 여간 난감하지 않을 수 없다. 왜냐하면 억지로 늘릴 수록 이미지는 형채를 알아보기 힘들거나 그나마 정상이었던 이미지가 허접하게 변하기 때문이다. 완벽하진 않지만 아주 방법이 없는 것은 아니다. 아래 사이트를 통해 해상도 손실을 최소화하며 늘려보자! http://waifu2x.udp.jp/index.ko.html 2배까지는 괜찮아! 사이트 사용방법은 매우 쉽기 때문에 특별히 설명이 필요 없을것 같지만 간단히 글로 설명을 하자면 이미지를 첨부파일로 넣고 이 이미지가 그림인지 사진인지 선..
https도 막혔다면 이렇게! 인터넷에 자유는 없는것인가? 2019년 2월 11일 https가 차단되었다. 개인적으로 이번정부에서 가장 잘못된 방법으로 제재 하는 방식이라고 생각한다. 그것은 묻지도 따지지도 않고 https를 차단하였는데 벼룩잡겠다고 초가삼간 다 태우는 방법이라 생각한다. 국민청원(269,180명)까지 들어간 일이었을 정도로 분명히 많은 IT업계 및 일반사람들까지 우려를 표하고 있는 정책이 아닌가 생각한다. 조금 더 신중하게 IT업계 내외 사람들과 충분한 대화나 논의를 통해 대다수가 동의할만한 대책으로 했어야 하지 않았나 싶은데 서론은 여기까지 하고. 우린 답을 찾을것이다 늘 그랬듯이 아는 사람들은 알겠지만 우회하는 방식을 이용하여 접속이 가능하다. 우회하는 방식은 여러가지가 있는데 간단하게 프로그램을 실행시키기만 해..
포토샵 스타일 80가지 클릭한번으로 멋지게! 포토샵에서는 액션과 더불어 클릭한번으로 멋지게 만들어주는 것이 있는데 바로 스타일(Style) 되겠다. 스타일은 여러 옵션들을 저장해두고 있기 때문에 클릭한번에 나에게는 없던 패턴도 적용할 수 있다. 급하거나 어떻게 하면 더 멋지게 할 수 있을까 고민한다면 스타일을 통해서 적용해보는 것도 좋을 것이다. 스타일 적용후에 역시 블렌딩옵션에서 자신이 좀더 추가, 변경할 수 있으니 일단 고민하지 말고 다운받아서 바로 사용해보도록 하자. 이 모든게 클릭한번으로! 위 이미지는 필자가 사각형을 그리고 스타일을 한번씩 각각 클릭해주어서 나타난 결과다. 스타일이 60가지나 되기 때문에 사각형이 되는 컬러에 따라 결과가 다른 스타일도 있을 수 있다.(나무패턴 같은 패턴위주는 상관없다) 예를들면 우측 ..
SOFT GRUNGE 텍스쳐 SOFT GRUNGE 텍스쳐 필자가 최근에 작업을 하면서 찾은 괜찮은 그런지 텍스쳐를 소개해드리려고 한다. 좋은건 나누어야 더 좋은거 아니겠는가!? SOFT GRUNGE 텍스쳐는 다른 그런지 텍스쳐와 다른점이 있다면 SOFT 답게 균열 같은 부분이 심한편은 아니다. 그러기에 어디에나 무난하게 적용할만한 텍스쳐가 아닌가 싶다. 저번 10가지 그런지 텍스쳐와는 다른 느낌이니 꼭 받아두시길 추천드린다. 이번에도 역시 10가지가 준비되어 있다. Soft Grunge DOWNLOAD 위 테스트 용으로 만들어 본 이미지는 2가지 그런지 텍스쳐를 가지고 만들었으며 블렌드모드는 각각 Linear Dodge 그리고 Color Dodge를 이용해서 배경을 만들었다. 멋진 배경 만들어보시길 바라며 궁금하신 점이 있으시면 댓..
움짤 만들기 내가 직접 움짤을 만들어보자. 움짤이란 움직이는 이미지를 말하는데 보통 gif로 되어 있다. 마치 영상처럼 말이다. 그러나 당연하게도 영상처럼 소리가 나진 않는다. 그렇다면 이 움짤을 쓰는 이유는 무엇인가? 보통 상대방에게 구체적으로 글로 설명하기보다 이미지로 확실한 전달 방법으로도 사용하고 블로그를 꾸미는 사람에게도 유저에게 더 이해하기 쉽게 정보를 전달할 수 있다. 물론 카톡 등에서도 웃긴 짤로 많이 사용도 가능하다. 만드는 방법은 다양하게 있는 것으로 아는데 필자가 사용하는 2가지 방법을 알려드리도록 하겠다. 이런식으로 만들 수 있다. Gif Cam 프로그램을 통해서 만드는 방법이다. 프로그램 이름도 Gif Cam이다. 이 프로그램은 가벼우면서도 쉽게 움짤을 만들 수 있도록 해준다. 그럼 우선 프로..
TOP 스크롤링 클릭 한번에 위로 스르륵 올라가는 스크롤링 생각보다 늦게 업데이트를 하는거 같은 블로깅이다. 사실 책갈피 태그 또는 넷갈피 태그라고 해서 a name 태그를 통해서 자신의 원하는 위치로 바로 찾아가게 만드는 태그로 할 수 있다. 마치 순간이동 처럼 말이다. 그러나 이번에는 스크립트를 통해 "스르륵" 부드럽게 스크롤링 하여 상단으로 올려주는 방법을 소개하려 한다. (필자의 블로그의 우측하단의 화살표 버튼과 같은 효과를 소개한다) 역시 어렵지 않으니 도전해보시기를 권장한다. 우선 TOP으로 올릴 아이콘을 구하거나 직접 만들어보도록 하자. 보통은 자신의 사이트의 분위기에 맞게 직접 작업한 이미지를 추천하지만 어렵다면 무료이미지 사이트에서 쓸만한 것들을 찾으면 되겠다. 그것마저 귀찮으신 분들을 위해 필자가 작업..