CSS, HTML, C Style 코드를 정리해주는 사이트 Tabifier 2020. 6. 16. 태블레이터[Tabifier] 태블레이터는 컴퓨터 코드를 제대로 들여쓰기 위한 도구다. 그것이 만들어내는 스타일은 내 개인적인 들여쓰기 선호와 더러운 원천에서 프로그램을 만들 수 있는 것을 혼합한 것이다. 태블레이터는 현재 CSS, HTML, C Style 코드를 지원하고 있으며, 후자는 시작과 끝 블록에 곱슬브레이스를 사용하고, 문을 종료하기 위해 세미콜론을 사용한다. 자바스크립트와 PHP는 둘 다 후자의 범주에 속한다. (자바스크립트의 경우 세미콜론을 넣었을 때만 해당 세미콜론을 기술적으로 선택사항임에도 항상 넣어야 한다.) 만약 당신이 유효하지 않은/파손된 코드를 입력한다면, 아마도 출력이 상당히 잘못될 것이다. 쓰레기는 쓰레기통에 버려, 날 탓하지 마. 별도의 로그인은 필요 없으며, 온라인 도구에 ..

컬러 그라데이션(음영) 생성기(Color Shades Generator) 2020. 6. 12. 그라데이션 컬러를 생성해주는 사이트입니다. 이 사이트에는 세루리안 블루(cerulean-blue)를 메인 컬러로 사용하고 있습니다. 아무래도 컬러톤 자체가 쉽게 사용하기 어려운 색상인 만큼 풍부한 컬러감을 내기 위해서 온라인 도구 사이트를 통해 컬러값을 얻을 수 있었습니다. 보통 웹사이트 뿐만 아니라 디자인 작업을 할 때, 그라데이션 컬러를 사용하면 훨씬 깊이 있는 디자인을 할 수 있습니다. 메인 컬러를 정하고 메인 컬러를 기준으로 잘 어울릴 수 있는 컬러값을 찾습니다. 이렇게 100부터 900까지 그라데이션 컬러값을 얻을 수 있습니다. 아래는 테일윈드 컬러코드입니다. 'cerulean-blue': { 100: '#ECEEF8', 200: '#CFD4ED', 300: '#B2B9E1', 400: '#79..

Color Scripter : 프로그래밍을 더욱 보기좋게! 2020. 6. 12. Color Scripter(컬러 스크립터) 국내 개발자들이 만든 코드 하이라이팅 사이트입니다. 코드블럭이 불가능한 게시판에서도 HTML 편집 기능으로 다양한 스타일로 표현할 수 있게 해줍니다. 여러가지 스타일이 있고 편하게 사용이 가능하지만, 처음 접하시는 분들은 다소 복잡하게 느낄 수도 있습니다. 좋은 기능들도 많지만, 가끔 네이버블로그에서는 버그가 발생하기도 합니다. 컬러 스크립터는 일반적인 하이라이팅 코드블럭을 훨씬 가독성있고 멋지게 꾸며줍니다. 웹개발 관련 글을 보다보면 쉽게 볼 수 있는 컬러 스크립터 입니다. Color Scripter(컬러 스크립터) 스타일패키지 / 언어(JavaScript) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ..

HTML 태그 및 속정 정리 해주는 사이트 2020. 6. 12. 티스토리에서는 이미지를 업로드할 때, 불가피하게 P태그가 형성되는 현상이 있습니다. 때문에, 이미지를 여러개 올리게 되거나 그룹으로 묶게 되면 각 그룹 또는 이미지마다 P태그가 형성되어 여백이 생깁니다. 하나하나 태그를 지우는 것 보다 일괄적으로 HTML이나 스타일을 정리해주는 국내 온라인 웹도구가 있습니다 (주)케이시크와 한여름이라는 분께서 제작하신 사이트로 웹디자이너와 웹개발을 위한 프로젝트 사이트입니다. 이외에 SPAN태그나 ID, Style, Class 또는 등의 여백까지도 모두 일괄적으로 정리해주는 좋은 사이트로 웹표준에 맞는 HTML 구성을 위해서 좋은 사이트입니다. 별도로 설정할 것은 없고 정리하고자 하는 HTML 태그 소스를 복사하여 위 사이트에 붙여넣기 한 후 제거하고자 하는 속성을 선택..

배경있는 움짤(gif) 이미지를 투명하게 만드는 방법 2020. 6. 12. 움짤 이미지를 투명하게 만드는 방법(Add effects to animated gifs) 사용방법은 우리의 온라인 툴인 EZ(이지-)GIF에서 만들 수 있습니다. 아주 간단하면서도 효과적인 온라인 도구입니다. 여러 색상값이 포함되어 있거나 그라데이션이 포함된 움짤 이미지는 부분적으로만 가능합니다. 이미지를 첨부하고 배경에 포함된 색상값을 입력하고 업로드를 하면 배경을 투명하게 할 수 있습니다. 물론 움직이는 이미지에 효과를 주는 것은 다른 확장자를 포함하여 여러가지 기능을 지원하고 있습니다. 이 글에서 다룰 내용은 이미지를 투명하게 만드는 방법이므로, 잘 따라오세요! 먼저 투명하게 만들 이미지를 하나 준비합니다. 예를 들어 위와 같은 애니메이션 이미지가 있습니다. 보통 영어로는 Animated Image..

ttf → woff 변환 온라인 변환 도구 'convertio' 2020. 6. 8. 이전에도 소개했었던 온라인 웹툴 중에 Convertio 라는 온라인 변환 사이트가 있습니다. 이곳에는 이미지 뿐만 아니라 다양한 파일들을 쉽게 변환할 수 있습니다. 웹사이트에서 다운받은 폰트를 적용하기 위해서는 woff 확장자로 변환을 해주어야 합니다. 이를 위해서 간단하게 변환하는 과정을 살펴보겠습니다. ttf(True Type Font, 트루타입 글꼴) 1980년대 마이크로소프트와 애플이 어도비에 대항하기 위해 만든 글꼴 저장 형식. 한때 비트맵을 대체하여 Windows 글꼴이 대부분 이 형식이었으나 지금은 레거시 기술로 넘어가고 최신 Windows의 기본 글꼴은 대부분 OTF로 대체되었다. 제어점이 3개인 2차 베지어 곡선(Quadratic Bezier)을 사용한다. 비슷한 글꼴 형식으로 OTF가 ..

흙손도 금손으로 만들어주는 누끼 작업 웹툴 사이트 'remove.bg' 2020. 5. 18. remove.bg 리무브BG라는 사이트에서 단 5초만에 빠르게 누끼작업을 할 수 있습니다. 누끼작업이란 이미지의 배경을 삭제해주는 것인데, 생각보다 결과물이 좋아 포토샵 툴이 서툴거나 누끼 작업이 어려우신 분들은 포토샵을 쓰기보다는 이 사이트를 이용해서 누끼작업을 하는 것도 효과적이라고 생각됩니다. 예를 들어 쇼핑몰을 운영하시는 분들 중에서 직접 디자인 작업을 하는 경우에 빠른 디자인 작업은 운영 전반에 있어 매우 중요합니다. 예를 들어 위와 같이 립스틱 제품을 해당 사이트를 활용하여 쉽게 누끼를 따보겠습니다. 사진을 업로드만 하면 매우 쉽게 누끼 작업을 완료할 수 있습니다. 실제로 누끼를 따는 것 보다 세밀함이 조금 떨어진다고 할지라도 작업시간을 굉장히 많이 줄일 수 있ㅅ브니다. 만약 조금 어색한 부분..

PDF파일 이미지로 변환해주는 웹사이트 2020. 2. 14. iLovePDF | PDF를 즐겨 쓰시는 분들을 위한 온라인 PDF 툴 iLovePDF는 PDF 파일 작업을 위한 온라인 서비스로 완전히 무료이며 사용하기 쉽습니다. PDF 병합, PDF 분리, PDF 압축, 오피스 파일에서 PDF로, PDF에서 JPG로 변환 등! www.ilovepdf.com PDF를 JPG로 변환하거나 다른 확장자로 변환이 가능한 웹툴 사이트입니다. PDF 파일을 이미지로 변환해서 이미지 파일을 사용해야할 때 아주 유용한 웹사이트라고 할 수 있겠습니다. 사실 이런 사이트들 보면 부럽습니다. 저도 얼른 개발능력을 키워서 이런 유용한 웹사이트들을 하나하나 개발할 수 있었으면 좋겠다는 생각을 합니다. 무료로 사용이 가능하며, 매우 간편하게 사용할 수 있습니다. 가끔 다른 사이트들은 회원가..

귀여운 네이버 웨일 확장앱 :: 아, 맞다! 2020. 2. 1. 나와 같이 자주 해야할 일을 잊어버리는 사람에게 안성맞춤인 네이버 웨일의 확장앱 아, 맞다!라는 앱이다. 이름이 참 귀엽고 독특하다. 실제로 나는 아, 맞다!라면서 까먹었던 일정을 기억하면 동시에 이런 탄성이 나오기도 한다. 아, 맞다. 이거 했어야했는데 말이지 라며말이다. 일단 이 앱은 네이버 웨일브라우저를 사용하는 사람들 중에서 확장앱을 설치하면 이용할 수 있다. 나는 네이버 웨일을 꽤 오래 사용했고, 너무나 유용하게 사용하고 있다. 가끔 버그나 오류가 발생하기는 하지만, 그럼에도 불구하고 정말 편의성 측면에서 너무나 우수하다. 대체 불가능한 웹브라우저가 아닐까 싶다. (개발팀은 이렇게 잘하는데, 블로그팀은 도대체가…) 사용방법은 간단하다. 위와 같이 앱을 실행하면 일정알람을 바로 등록할 수 있다. ..