IT18 og(open graph) 메타태그를 활용해서 카카오톡 링크 미리보기 변경 카카오톡이나 페이스북에서 링크 주소를 보내다 보면 위에 이미지처럼 간단한 미리보기가 생성되는 것을 볼 수 있습니다. 티스토리에서는 아래와 같이 링크 주소를 붙여 넣고 엔터를 치면 자동으로 링크 아래에 이미지와 간단한 정보가 나타납니다. 원래는 기본 이미지인 티스토리 로고가 있지만 이미지도 바꾸고 텍스트도 변경할 수 있는 방법을 알아보겠습니다. 기본 메타 데이터 입니다. 티스토리에서는 블로그 관리 > 스킨 편집 > html 편집으로 들어가서 태그 부분에 아래 메타 데이터를 추가하면 됩니다. 데이터를 태그 사이에 추가하면 됩니다. 각 메타 데이터의 속성에 따라 값을 적어 주시면 됩니다. og:title - 웹사이트의 제목입니다. (ex : IT 노트) og:type - 개체유형은 website입니다. og:.. 2020. 2. 9. 티스토리 파비콘(favicon), 아이콘 만들기 웹서핑을 하면서 블로그를 여기저기 둘러보다 보면 왼쪽 상단에 유독 독특한 아이콘들이 눈에 띄는 경우가 있다. 바로 파비콘(favicon)인데 이것에 대해 정리해 보았다. 관리 모드에서 '관리' > '블로그'를 누르면 아래와 같이 나타난다. 사이즈를 미리 32*32, 64*64로 만들어놓고 불러오기로 저장하면 끝이다. 이렇게 하면 어디에도 없는 나만의 로고를 만들 수 있다. 일러스트나 기타 디자인 툴을 다루지 못해도 무료 이미지 사이트에서 적당한 이미지를 찾아 사이즈만 잘 맞추면 사용할 수 있다. 아래 이미지처럼 바로가기 아이콘을 만들면 저장해놨던 아이콘 이미지를 볼 수 있다. 추가로 ico 파일로 변환하기 위한 내용은 따로 정리해 두었다. https://ecoding.tistory.com/26 파일 변환.. 2020. 2. 5. 유사 색 조합 사이트(어도비 컬러) 유사색, 단색, 보색, 혼합 등 원하는 규칙을 지정하여 컬러를 생성해볼 수 있는 사이트입니다. 색상 모드로 RGB, CMYK, HSV, LAB 지정을 할 수 있으며 생성 후에는 16진수 컬러 코드를 바로 볼 수 있습니다. 웹디자인을 하거나 기타 디자인 작업을 할때 유용한 사이트 입니다. 상단 탭에는 특정 사진을 이용한 컬러 검색, 카테고리별 트렌드 색상을 볼 수 있습니다. https://color.adobe.com/ko/create Color wheel, a color palette generator | Adobe Color color.adobe.com 2020. 2. 4. 파일 변환 컨버터(png를 ico로 변환하기) 블로그를 운영하다 보니 '파비콘'이라는 것이 필요하게 되었습니다. 파비콘이란 (영어: favicon, 'favorites + icon') 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다. (출처 : 위키백과) 일러스트나 포토샵으로 만든 png, ai 등등 파일을 넣으면 손쉽게 파비콘 확장자인 ico로 변경할 수 있습니다. https://convertio.co/kr/png-ico/ PNG ICO 변환 (온라인 무료) — Convertio png 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요. convertio.co 파일을 넣고 원하는 종류를 선택해 변환하면 됩니다. 또한 파일들은 24시간 동.. 2020. 2. 2. 사파리(Safari)에서 부트스트랩(Bootstrap)4 그리드 오류 수정하기 사파리 브라우저에서 부트스트랩 4 그리드에 문제가 있을 때 수정하는 방법입니다. 이전에는 잘 작동했었는데 더 이상 보이지 않는다면 아래 방법으로 해결해 봅시다. 먼저 일반적으로 행 내에 3개의 열을 만드는 방법입니다. 1 2 3 4 5 Column 4 Column 4 Column 4 cs 그러나 사파리(Safari)에서는 나란히 배치되지 않고 모두 하나의 열에 속합니다. 아래 CSS로 쉽게 고칠 수 있습니다. 1 2 3 4 5 6 /** Fixing bootstrap columns for safari */ .row:before, .row:after{ display: inline-block !important; } Colored by Color Scripter cs 이것은 행 :before 및 :after.. 2020. 1. 31. 블로그에 html 소스코드 붙여넣기(codepen) 오늘은 블로그에 코드를 간단히 올릴 수 있는 방법을 알아보겠습니다. 제가 미리 샘플로 만들어놓은 코드를 이곳에 가져와 보도록 하겠습니다. https://codepen.io/ecoding/pen/MWYRBry grid test ... codepen.io 오른쪽 하단에 있는 Embed 누르면 아래와 같은 창이 나타납니다. 오른쪽 하단에 html 탭에 있는 소스 코드를 복사해서 필요한 곳에 붙여넣기 하시면 됩니다. 추가로 왼쪽 상단에 있는 theme를 변경하면 배경 스타일을 흰색 또는 검정색으로 변경할 수 있습니다. 기본모드를 html 방식으로 바꿔주고 원하는 부분에 복사해둔 소스 코드를 붙여넣기 합니다. 완성되었습니다. 오른쪽에 마우스를 올려보세요! See the Pen grid test by ecoding.. 2020. 1. 29. 윈도우10 부팅 USB 쉽게 만들어보자 컴퓨터를 사용하다 보면 여러 가지 이유로 윈도우를 재설치하거나 아예 포맷을 해야 경우도 생기는데요. 이럴 때를 대비해서 윈도우10 부팅 USB를 만드는 방법을 알아보도록 하겠습니다. 준비물 : 4GB 이상의 USB (다운로드할때 파일이 삭제되니 중요한 자료는 미리 백업을 해야 합니다.) 먼저 아래에 있는 마이크로소프트 공식 사이트 링크를 통해 설치 파일을 다운로드합니다. https://www.microsoft.com/ko-kr/software-download/windows10 Windows 10 다운로드 Windows 10용 ISO 파일을 다운로드한 경우, 해당 파일은 선택한 위치에 로컬로 저장됩니다.컴퓨터에 타사 DVD 굽기 프로그램이 설치되어 있으며 해당 프로그램을 사용하여 설치 DVD를 만들려는 경.. 2020. 1. 27. 이전 1 2 3 다음
