WEB개발이야기/VScode 2022. 2. 21.
[VScode 익스텐션] Visual Studio Code에서 클립보드에 저장된 Image 붙혀넣기 - Paste Image
마크다운(Markdown)으로 글쓰기를 할 때 이미지 붙여넣기에 대해 매우 유용한 익스텐션이 있어서 소개해 드릴게요. 캡처 프로그램으로 캡처를 하고 바로 마크다운 문서에 붙여넣기 하면 바로 이미지가 반영이 되고 이미지는 별도의 폴더에 저장이 되도록 구성되어 있어요.[Extension] Paste Image이미지를 클립보드에서 마크다운/asciidoc(또는 다른 파일)로 붙여넣기를 할 수 있어요.Paste Image 설정하기Paste Image를 몇 가지 설정하면 나에게 맞게 커스터 마이징 할 수 있어요. 모든 부분을 설명하기는 어렵고, 간단하게 몇 가지 설정하는 방법입니다. Base Path : 기본이 되는 폴더의 경로입니다. 입력값은 ${currentFileDir} 및 ${projectRoot} 입니다..
티스토리 스킨/T스킨 설명서 2020. 9. 1.
블로그 포스트의 태그 기능으로 전체화면이미지 적용하기
[대상 스킨 : T스킨BASIC V2 Version 2.3.0 이상]블로그 글에 대해서 태그에 특정태그를 입력하면 특별한 탬플릿이 적용됩니다. 이전에는 포스트 글의 태그에 [@게시판@]을 입력하면 게시판 탬플릿이 적용되게 구혔었는데요. 이번에는 [@전체화면이미지@]태그로 블로그 글의 상단에 전체화면크기의 랜덤이미지가 적용되게 하였습니다.구현된 화면블로그 글의 최상단에 전체화면 이미지가 적용된 탬플릿이 적용됩니다. 작성된 블로그 글에서 모든 이미지를 찾아 지정된 크기(기본크기는 가로 800px)이상의 이미지가 1개라도 있다면 그 이미지들에 대해서 최상단에 랜덤하게 보여줍니다. 만약 그런 이미지가 없다면 무슨일이 있었냐는 듯이 원래의 레이아웃으로 보여줍니다. 적용된 포스트 DEMO 구현방법 구현방법은 블로그..
IT이야기/무료프로그램 2019. 1. 20.
포토스케이프(PhotoScape X) 100% 활용 하기
사진이나 이미지를 다룰 때 포토샵을 뺴놓으면 섭하지만 이 포토샵의 가격이 후덜덜 하고 또한 클라우드로 변경되면서 가격은 좀 싸졌을지 모르지만 매년 또는 매달 비용을 지불해야 하는 부담감이 있습니다. 이걸 가지고 돈을 벌 수 있는 직업이 있다면 그런대로 투자할 만 한데 그렇지 않은 일반 개인이나 서민들은 해적판이나 대체 프로그램을 찾기 마련입니다. 여러가지 다양한 사진 다루는 툴이 있겠지만 그중에서도 높은 평점을 가지고 있으면서 간편하고 다양한 기능이 있고 무엇보다도 무료라는 메리트를 가지고 있는 포토스케이프를 소개해 볼까 합니다. 사실 포토샵 대용이라고는 하지만 어떤 면에서 보면 포토샵과는 좀 다른 용도라고 볼 수도 있습니다. 포토샵 보다 더 편한 기능이 많이 있습니다. 포토스케이프(PhotoScape)..
WEB개발이야기/웹퍼블리싱 2018. 8. 12.
원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기
이미지를 최적의 사이즈로 마추어서 표시해야 할 때가 있습니다. 저같은 경우는 Bootstrap 4의 card Component를 사용할 경우에 필요해서 개발을 해 봤습니다. 구현결과 구현하고자 하는 모양새는 아래와 같습니다. 이미지가 넓이로 긴 경우 높이값을 100%로 맞추고 넓이값을 중앙으로 맞춥니다. 이미지가 높이로 긴 경우 넓이값을 100%로 맞추고 높이값을 중앙으로 맞춥니다. HTML 구현 핵심은 class="js-imgSizeSame" 입니다. 이 클래스명을 기준으로 javascript로 사이즈를 조절합니다. javascript 구현 javascript는 jquery를 활용하였습니다. 이미지를 찾는 부분과 불러온 이미지의 크기를 조절하여 중앙으로 맞추는 Function으로 구분하여 작성하였습니다..
WEB디자인이야기/WEB디자인 2018. 7. 10.
더미 이미지를 무료로 제공해 주는 사이트를 소개합니다.
웹사이트 개발 시 더미 이미지가 필요한 경우가 있습니다. 레이아웃을 잡는 거라 특별히 의미가 없는 이미지만 필요한 경우 어디서 구하기도 힘들고 저작권도 신경쓰이고 할때 임시로 이미지를 제공해 주는 사이트가 있습니다. 사용법도 아주 쉽게 적용이 가능 합니다. 다만 인터넷이 연결이 되어 있어야 합니다. 더미 이미지 제공 placeimg.com placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 웹사이트 : http://placeimg.com 기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다. 특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다. 디폴트 카테고리는 any이고 카테고리 구분없이 모든 이미지에서 랜덤으로 ..
