코드펜을 구경하다가 정말 마음에 드는 레퍼런스 작업물을 하나 발견했습니다. 저는 당연히 백그라운드 배경을 이미지로 작업했다고 생각했습니다. 근데 이게 왠걸?! 이미지가 아니었습니다. HTML로만 만든 작업물이었습니다. 세상에... HTML 태그만으로도 이렇게 다양한 도형을 제작할 수 있다니? 놀라웠습니다. 그래서 바로 태그 구성을 살펴봤습니다. 일단 라는 태그가 보였습니다. 그리고 그 안에는 태그가 있었으며 또 그 안에는 , 등의 요소들도 보였습니다. 문제는 해당 태그 안에 작성된 엄청난 숫자들...! 대체 이 숫자들이 무엇을 정의하는지는 모르겠습니다. 바로 구글 검색을 해봤는데 솔직히 뭔 소린지 봐도 모르겠습니다. 일단 대충 알아들을 수 있는건 다름 아닌 일러스트레이터에서 사용되는 핸들과 커버같은 개념..
구글 블로거 플랫폼은 티스토리 대비 너무나 인터페이스가 불편합니다. 가시성 떨어지는 UI / UX도 문제고요. 세계 제일 기업인데 너무 자사 플랫폼에 소홀한게 아닐까라는 생각이 듭니다. 너~무 구려요. 이것때문에 다른 플랫폼으로 환승할까도 고민을 했습니다. 하지만 무료 오픈 소스 형태의 블로그 플랫폼은 몇 개 되지 않습니다. 워드프레스는 초기 자본이 들어가고 이게 또 고정적으로 계속해서 지불하는 OTT같은 비용이라 아무래도 부담스러운건 사실입니다. 또한 워드프레스라고 해서 인터페이스가 훌륭하지도 않습니다. 티스토리가 최고에요. 간결하면서도 알아보기 쉬운 그런 사용자 환경! 아무튼 지금은 구글 블로거(Blogger) 플랫폼을 잘 육성하는 중이라 이런 저런 방법들을 적용하고 시도하고 있습니다. 구글 블로거 ..
티스토리에는 용량 제한이 있습니다. 과거에는 이미지나 파일 당 용량이 10MB이상은 업로드가 되지 않았지만 최근 티스토리는 성능이 향상되었기에 그 두 배인 20MB까지 가능해졌습니다. 하지만 이 또한 그렇게 넉넉한 용량은 아닙니다. 고화질 움짤의 경우는 꽤 용량이 큰데 이런 파일들은 20MB 이상의 용량을 자랑하는 경우가 꽤 많습니다. 그렇다면 이런 이미지들은 어떻게 올리면 좋을까요? 여기에서 우리는 이미지 호스팅이라는 플랫폼을 활용할 수 있습니다. 위의 비내리는 이미지는 애니메이션 날씨의 아이에서 움짤로 만들어본 것입니다. 용량은 약 17MB여서 보시는 것처럼 티스토리에 아무렇지않게 업로드가 가능합니다. 하지만 그 이상의 이미지는 티스토리에 업로드를 할 수 없기에 제목에도 언급한 imgbb라는 무료 호..
div같은 블록박스 요소안에 백그라운드 이미지를 꽉 차게 적용하는 방법이 두 가지가 있습니다. 이미 예전에 이 부분은 잘 정리를 해두었기 때문에 본문에서는 한번 더 부족한 설명 부분을 언급하는 정도로 진행하려고 합니다. 아래의 글을 먼저 정독해 주시기 바랍니다. CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여 CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여 CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 rgy0409..
스마트폰으로 인터넷 정보를 스크랩하는데 스크랩된 이미지 아래 부분에 웹사이트라는 문장이 표시가 되는것을 목격했습니다. 분명 캡쳐할때는 이런 글씨가 없었는데 싶었고 다시 한 번 해당 웹문서를 캡처 시도하며 체크했는데 역시 없습니다. 안드로이드에 추가된 기능인지는 모르겠으나 현재 사용중인 갤럭시노트20 울트라는 웹문서 캡쳐 시 URL 정보가 이미지에 남습니다. 그래서 캡쳐된 이미지를 갤러리에서 확인 시 북마크처럼 편리하게 해당 웹페이지를 방문하는 기능이 있습니다. 여기에서 힌트를 얻었습니다. 티스토리 본문에도 링크를 걸어서 마우스 오버 시 "바로가기" 표시가 되도록 만들고 싶었습니다. 왠지 가능해 보였습니다. 태그만 제어하면 될 것 같았습니다. 바로 시도해보았고 마침내 구현에 성공했습니다. 위의 이미지에 마..
현재 이 문제는 티스토리에서도 보여지는 문제입니다. 친효스킨에서도 문제입니다. 이것을 해결하기 위해서 한 달 전부터 머리를 끙끙 싸메고 노력중인데 별다른 뾰족한 방법이... 있긴 있습니다. 문제는 이게 기본 아이콘 이미지에도 영향을 준다는 부분입니다. 이게 문제인 것입니다. 현재 상황입니다. 댓글 리스트에서의 사용자 아이콘 부분입니다. 위는 기본 이미지죠. 기본 이미지의 경우는 문제 없습니다. 보시는 것처럼 정상 출력됩니다. 문제는 사용자가 프로필 이미지로 지정한 이미지의 경우입니다. 이게 친효스킨만 이러는건지 타스킨도 비슷한 상황인건지는 확실치 모르겠지만 (확인해보니 타스킨도 일부는 이미지가 흐림) 검색해보면 유독 크롬 브라우저에서 이런 현상이 발생한다는것을 알 수 있습니다. 해결은 어떻게 할까요? 아..
이미지 저장 플랫폼으로는 대표적으로 핀터레스트(Pinterest)가 있습니다. 정말 유용하게 잘 사용해오고 있는 서비스죠. 수집 뿐만 아니라 공유도 쉬워서 정말 지금도 잘 이용하는 플랫폼 중 하나입니다. 그러다가 오늘 매우 반가운 프로그램을 알게 되었습니다. 동아리 회원분으로부터 알게된 이 프로그램은 정말이지 놀랍지 않을 수 없었습니다. 그냥 원하는 이미지가 있다면 그저 드래그하여 수집하기만 하면 되는 요긴한 유틸리티였기 때문입니다. 핀터레스트만큼 간편합니다. 별도의 제약도 없습니다. 회원가입이 필요 없습니다. 프로그램은 기부 형식으로 유료화가 되어 있습니다. 한글화도 진행이 완료된 상태입니다. 프로그램의 이름은 제목에도 언급했듯 퓨어레프(PureRef)라고 합니다. 아마도 Pure와 Reference의..
지난 시간에는 아이콘 자체에 이미지가 있는 EXE 파일에 대한 아이콘 이미지 변경 방법을 설명했습니다. 이번에는 EXE 실행파일 자체에 이미지가 없는 경우, 비주얼 C++을 사용하여 실행파일을 편집하여 아이콘 이미지를 심어주는 과정입니다. MS Visual Studio C++ 설치하기 가장 먼저 할 일은 당연히 프로그램 설치입니다. 아래의 사이트를 방문합니다. visualstudio.microsoft.com/ko/downloads/ Windows 및 Mac용 Visual Studio 2019 다운로드 Visual Studio Community, Professional, Enterprise를 다운로드하세요. 지금 Visual Studio IDE, Code 또는 Mac을 무료로 사용해 보세요. visuals..
닌텐도 스위치에서 스크린샷으로 저장된 이미지를 SNS 공유 없이, 마이크로SD 메모리 분리 후 PC로 연결해서 저장하는 번거로움없이, 바로 스마트폰으로 가지고 오는 방법에 대해서 안내해 드리겠습니다. 생각보다 엄청 쉬웠군요. 이것도 모르고 그동안 두세단계에 거쳐 이미지를 가지고 오는 수고로움을 강행하고 있었습니다. 아시다시피 스위치의 TF메모리를 연결하거나 해제하면 안전을 위해 기기를 재부팅해야 하거든요. 엄청 오래 걸리는건 아니지만 재부팅 자체가 너무 번거로웠습니다. 이제 그럴 필요없이 스마트폰으로 바로 가지고 올 수 있어서 엄청 편리합니다. 먼저 닌텐도 스위치에서 스마트폰으로 가지고 올 이미지를 찾습니다. 최근 링피트 어드벤처의 마지막 보스인 드라고를 물리쳤습니다. 레벨은 210을 찍었구요. 기념으로..
지금까지 픽픽을 사용한 기간이 얼마인데 이 좋은 기능을 이제서야 발견하게 될 줄이야... 역시 사람은 배우고 끊임없이 탐구해야 하나 봅니다. 워터마크를 좀 더 기가막히게 적용시키는 최고의 방법이 없을까 늘 고심했는데 생각보다 그 노하우는 가까이에서 서식하고 있었습니다. 등잔밑이 어둡다더니 진짜 픽픽캡처에 이렇게 좋은 기능이 있을줄은 몰랐습니다. 캡쳐 시, 캡처된 이미지에 워터마크가 자동 적용되는 방법 입니다. 특히 가장 마음에 들었던건 캡쳐된 이미지가 제각기 달라도 정확한 좌표에 워터마크 낙인이 찍혀 캡쳐된다는 점 입니다. 티스토리 신형 글쓰기 에디터는 이미지가 바로 본문에 들어갑니다. 본문에 일단 저장된 후 이후에 이미지 편집이 가능 합니다. 워터마크 넣는게 얼마나 짜증스럽고 번거롭습니까? 한두장이면 ..
친효스킨에는 이미지 테두리가 적용되어 있습니다. 본문에 이미지를 삽입하면 자동으로 테두리가 적용됩니다. 제가 강좌글을 많이 작성하는데 스크린샷 이미지를 많이 사용합니다. 화면의 일부만을 캡쳐하는 일이 많다보니 흰색 배경의 경우는 본문의 영역과 구별이 잘 안 되는 부분이 있을때가 많습니다. 그래서 이미지에 #CCC 색상의 밝은 회색계열의 테두리가 얇게 들어갑니다. 이 스타일을 해제하는 방법은 다음과 같습니다. 친효스킨의 CSS에서 아래의 영역을 검색합니다. /* 티스토리 본문 이미지 (새로운 글쓰기 에디터) */ .tt_article_useless_p_margin > figure.imageblock { margin: 25px auto 20px !important; outline: 1px solid #ccc..
안녕하세요, 친절한효자손 입니다. 현재 새로운(신규) 글쓰기 에디터로 글을 작성할 때 이미지를 삽입하면 화면을 초과하여 잘리는 문제가 발생하고 있습니다. 확인해보니 이미지에 강제로 가로 사이즈가 적용되는 문제였습니다. max-width: 860px; 으로 860픽셀로 고정이 되기 때문에 모바일에서 볼 때는 화면이 잘려 보이게 되고 가로 스크롤바가 생깁니다. 따라서 해당 매소드만 제거하면 되지만, 문서를 일일히 다 수정 할 수는 없는 노릇이므로 CSS를 수정해야 합니다. 앞으로 배포될 친효스킨 1.17 버전에서는 이 문제가 해결되긴 했지만, 아직 배포는 멀었으니 다음의 방법대로 친효스킨의 CSS를 수정해 주시기 바랍니다. 먼저 아래의 영역을 찾습니다. "새로운 글쓰기" 라고 검색하면 빠르게 찾을 수 있을 ..
아시다시피 티스토리는 10MB 이상의 GIF 이미지를 업로드 못 하게 되어 있습니다. 결국 GIF 이미지를 10메가바이트 아래로 생성해야 하는데, 그러면 이미지를 무조건 줄여야하고 프레임수도 제한을 둘 수 밖에 없습니다. 정녕 이렇게밖에 할 수 없는 걸까요? 아닙니다. 우리에게는 무적의 구글드라이브가 있습니다. 구글 드라이브를 활용하여 티스토리에 대용량 움짤을 올리자! 안드로이드 스마트폰 유저분들이라면 당연히 구글 계정을 최소 하나씩은 가지고 계실 것 입니다. 꼭 안드로이드 유저 아니더라도 구글 계정은 아마 있을꺼에요. 구글 계정이 있으니 15GB를 기본으로 제공하는 구글 드라이브를 활용할 수 있습니다. 무료로 15기가바이트를 제공하는 구글 클라우드를 적극 이용해 봅시다. 먼저 업로드할 움짤 GIF 이미..
벌써 포토샵 관련 글만 3개를 작성 중 입니다. 까먹기 전에 미리 복습겸 백업을 해 둬야 합니다. 앞으로도 요긴하게 써먹을 내용들 입니다. 이번에는 레이어별로 모두 이미지 파일로 저장하는 방법입니다. 이 방법 또한 스크립트를 사용해서 진행합니다. 따로 스크립트를 설치할 필요는 없고 포토샵에 있는 기본 기능으로 가능합니다. 참고로 저는 포토샵 CS6 64비트 버전을 사용 중 입니다. 포토샵 스킬 관련으로 아래의 글도 같이 알아두시면 좋습니다. 포토샵 레이어 순서 뒤집기 (반전) 방법 포토샵 레이어 순서 뒤집기 (반전) 방법 레이어가 몇 개 안 될 때는 그냥 드래그해서 위치를 직접 변경해주면 되지만, 레이어가 엄청 많다면 이걸 하나하나 위치 변경하기가 힘듭니다. 그럴때는 포토샵에서 제공하는 기본 기능을 사용..
블로그를 하면 필수요소는 아니지만 거의 사용하게 되는게 바로 이미지 입니다. 자신이 직접 찍은 이미지를 사용하는건 전혀 문제될게 없지만, 검색해서 나오는 이미지들을 사용하는건 한번 생각해봐야 합니다. 제목에서도 언급했듯 무단 사용하면 저작권에 걸릴 수 있습니다. Q. 안녕하세요! 궁금한 게 있습니다. 네이버에 돌아다니는 이미지들 (ex. 연예인 사진, 풍경 사진) 이런 것들은 다 저작권에 걸리나요? 혹시 그렇다면 블로그에 글을 올릴 때 자기가 직접 찍은 사진이나 이미지만 활용해야 하는 것인지요...?? 이렇게 질문을 댓글로 남겨주셨는데, 이에 대한 답은 다음과 같습니다. A. 그냥 자신이 직접 찍거나 그리지 않은 2D 이미지, 사진들을 제외한 나머지 이미지들은 모두 저작권이 있다고 생각하시면 됩니다. 최..
아마도 블로그 플랫폼을 티스토리라는 것으로 처음 시작하시는 분들도 계실 것이고, 저처럼 네이버 블로그를 사용하다가 티스토리로 넘어오시는 분들도 계실 것 입니다. 혹은 타사 블로그를 이용하시다가 넘어오시는 분들도 계십니다. 이런 분들께서 공통적으로 남겨주셨던 질문 중 하나입니다. Q. 안녕하세요, 저는 네이버 블로그를 하다가 티스토리로 넘어온 블로거 입니다. 네이버에서 썼던 이미지를 그냥 재활용해도 상관 없는지 궁금합니다. 글은 다 수정해서 새로 작성하고 있는데 사진은 괜찮은거 같아서 그냥 그대로 올리고 있습니다. 다음에서 검색하니까 작성한 글이 잘 나오길래 별 문제 없겠지 싶습니다. 괜찮을까요? 사실 이 부분은 말이 많습니다. 저 역시 카더라 통신 시절부터 블로그를 해왔기에 이런 저런 뜬구름 소문을 많이..
반응형 웹을 배우고 있습니다. 오늘은 궁금했던 한 부분이 해결되었습니다. 백그라운드에 이미지를 넣는데, 이것을 브라우저의 크기에 따라 자연스럽게 변하는 것을 표현해보고 싶었습니다. 해결 방법은 생각보다 간단했습니다. 먼저 아래의 코딩 상태를 봐주시기 바랍니다. 백그라운드 반응형 본문의 body 안에는 아무것도 없는 상태 입니다. 스타일에서 body 영역에 백그라운드를 넣었습니다. 백그라운드 스타일의 마크업 상태를 봐주세요. height: 100vh;background-image: url("이미지경로");background-repeat: no-repeat;background-position: center;background-size: cover;background: url("이미지경로") no-repeat..
이번에는 HTML에서 백그라운드 (배경) 에 이미지를 넣는 방법입니다. 색을 부여하는 방법은 background : #원하는 16진수 색상코드 ; 를 CSS에서 부여하면 간단히 해결 됩니다. 이미지는 과연 어떻게 넣을까요? 알아보겠습니다. 먼저 백그라운드 색상을 지정하는 방법입니다. 보시는 것 처럼 원하는 선택자를 입력하시고, 속성 요소에 화살표가 가리키는대로 마크업 하시면 됩니다. 16진수로 색상을 입력하거나 이미 지정된 색 명칭으로 넣으시면 됩니다. 그러면 이렇게 백그라운드에 입력한 색상이 표현 됩니다. 이제 이미지를 넣어보겠습니다. 이미지 CSS 태그는 위에 나온대로 진행하시면 됩니다. 중요한건 경로를 꼭 제대로 입력하셔야 한다는 것 입니다. 또한 url 다음에 오는 괄호는 절대 붙여써야 한다는 것..
이번 시간에는 사소하지만 정말 중요한것을 알아보겠습니다. 이건 네이버 웹마스터에 있는 링크구조에 대한 오류와도 관련있는 문제일 수 있습니다. 더 나아가자면, 자신의 검색엔진에 노출되는 영향과도 관련이 있을 수 있습니다. 바로 이미지를 대처하는 alt 태그에 대한 내용 입니다. 일반적인 이미지 태그는 다음과 같습니다. 여기에서 저 alt 태그가 정말 정말 중요합니다. 꼭 이미지에는 alt 태그를 넣어주셔야 합니다. 왜 그런지 이유를 파악해 보겠습니다. 먼저 늘 하던대로 이미지 폴더를 html이 위치한 루트 폴더에 생성합니다. 저는 image 라고 이름을 적었습니다. image 폴더 안에 googlelogo.png 파일을 넣었습니다. 이것을 웹에 띄워보겠습니다. html 코딩을 구성합니다. width와 he..
이미지의 크기를 변경하는 방법은 두가지 입니다. 이미지 자체를 확대하거나 축소시키는 방법이 있고, 이미지는 그대로 두고 캔버스 크기를 변경하는 방법이 있습니다. 각각 쓰임새가 다른데요 보통 이미지 자체적으로 편집을 하는 경우는 축소시키는 경우 말고는 확대는 거의 사용하지 않습니다. 이유는 해상도가 깨지기 때문입니다. 캔버스는 이미지는 그대로 두고, 백그라운드 크기를 변경하는 방법입니다. 원본이 가로 세로 각각 100픽셀짜리 정사각형 이미지가 있다면, 캔버스를 각 두배씩 늘리면 가운데 100픽셀짜리 원본 이미지는 그대로 있고, 주변이 각각 50픽셀씩 더 늘어난 최종크기 200 X 200픽셀 짜리 이미지가 됩니다. 이때 늘어난만큼의 공간은 빈 공간으로 둘 수도 있고, 색을 채워넣거나 사용자의 임의대로 만들 ..
최근 새롭게 깨닫게 된 썸네일 올리는 방법이 있어서 여러분들과 공유를 하고자 합니다. 검색해보니 이미 이렇게 진행하시는 분들도 꽤 많더라구요. 진작에 이 방법으로 했으면 골치아픈 텍스트 정리며 이미지 크기 정리를 신경 안 쓰고 그냥 주구장창 글만 작성했을텐데 안타깝습니다. 이제라도 알았으니 적극적으로 사용해 보려고 합니다. 본문에 있는 이미지의 썸네일 등록 방법 이 방법은 가장 일반적인 방법으로, 그냥 본문에 이미지들을 잔뜩 넣었으면 그 중에서 대표 이미지로 사용할 파일을 선택해서 지정만 해주시면 되는 아주 간단한 방법입니다. 많은 티스토리 유저분들께서 아마 이 방법을 통해서 썸네일을 출력하고 계실 겁니다. 보시는 것 처럼 글을 쓰다보면 이미지를 여러장 넣는 경우가 있습니다. 그러면 오른쪽의 파일보관함에..
제목이 다소 장엄한데 사실별거 없고 그냥 티스토리의 기능 중 하나인 티에디션 상단에 임의로 이미지를 넣어서 멋진 배너를 만드는 방법 중 하나를 소개하고자 한다. 까먹기전에 얼른 써 놔야 나중에 혹시라도 잊어먹어도 이 글을 보고 복습할 수 있기 때문에 철저히 개인위주의 글로 작성해 보고자 한다. 하지만 꼼꼼하게 작성할 것이니, 방문해주신 분들도 똑같이 따라하실 수 있을 것이다. TIP 본 글은 티에디션 전용입니다. 하지만 현재의 티스토리는 티에디션을 지원하지 않습니다. 그냥 참고만 하시면 됩니다. 이걸 해보겠다고 3일을 연구했다. 구글에서 찾고, 또 찾고, 이거 적용시켜보고 저거 적용시켜가면서 정말 끈질긴 노력을 했다. 그 결과 결국 해냈다. 어딘가 조잡한 태그지만, 그래도 최대한 깔끔하게 정리하기 위해서..
가끔 나만의 배너 광고를 만들고 싶을 때가 있고, 이것을 실제로 티스토리 블로그에 적용을 시켜보고 싶기도 하다. 필자 또한 개인용도로 만들기도 하고, 가끔씩 타 업체로부터 제휴광고를 게시할때도 있다. 이럴때, 일반 고정형 이미지를 적용시킨 배너광고를 과연 반응형처럼 만들 수 있는 방법이 있을까? 알고보면 쉽다. 피가되고 살이되는 블로그, 친절한효자손 취미생활!글, 사진 및 이미지 ▶ CopyLeft(C) 유길용#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다##공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다##사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다##본 블로그는 크롬(Chrome Browser) 1920×1080 해상..
어느날부터 폴더 내의 사진들 썸네일 미리보기가 정상동작하지 않게 되었다. 이것은 십중팔구 레지스트리에 뭔가 변화가 있었을 것이라는 느낌을 받았다. 왜냐하면 최근 어떤 프로그램을 설치하다 오류가 좀 있었기 때문이다. 하여튼 윈도우10은 너무 예민한 것 같다. 폴더 설정으로 수정해봐도 증상은 똑같아서 결국 레지스트리를 손보게 되었다. 기존 윈도우 폴더설정으로 하는 방법에 대해서는 이미 많은 블로거 분들이 제공하고 있는 부분인지라, 여기에서는 대충 넘어가고 가장 핵심인 레지스트리를 수정해서 고치는 방법에 대해 집중 조명하려고 한다. 레지스트리는 초보분들도 어렵지 않게 수정할 수 있는 부분이므로 걱정하지 마시고 여기에 나와있는 방법대로만 따라하면 아무 문제 없다. 이 방법은 윈도우7 기준으로 설명되어 있어서 혹..
티스토리 블로그를 사용하시려는 분들을 위한 글 입니다. 티스토리에 이제 막 입문하셔서 이것저것 글도 써보시고 사진도 올려보는것까지 이제 성공했는데 도통 움직이는 이미지는 어떻게 올려야 하는지 잘 모르시는 분들이 계실 것입니다. 저도 처음 티스토리 입문 시절 GIF를 어떻게 올려야 하는지 몰랐을 때, 그냥 넣었다가 블로그가 트래픽초과에 걸려 어렵게 풀려났던 아픈 기억도 있습니다. 하지만 생각보다 움직이는 GIF 이미지는 쉽게 올릴 수 있습니다. 어떤식으로 올리는지 한번 그 방법을 알아보도록 하여 티스토리를 사용하시는데 크게 막힘이 없도록 해보겠습니다. 우선 올리고자 하는 GIF 파일을 준비합니다. 그리고 당연히 티스토리의 글쓰기로 들어가야 할 것입니다. 두가지 방법으로 올릴 수 있습니다. 첫번째 방법첫번째..