IT-Information/Blog-operation
-
웹페이지 링크에 화살표 아이콘 표시IT-Information/Blog-operation 2022. 8. 2. 13:32
포스팅을 하다보면 글이나 구문등을 강조하기 위해 밑줄이나 글자색을 수정하게 된다. 그리고 넣다보면 링크가 있는지 없는지 확인하기 위해 마우스 포인터를 올려보게 된다. 이런 사소하지만 안해도 되는 작업을 줄이기 위해 링크가 있다는 것을 알려주고 보기편한 작업이다. 링크가 있다는 표시인 아이코을 표시하는 CSS 수정을 통해 자동으로 되게하는 방법을 알아보고자 한다. 설치형 블로그는 어디든 적용할 수 있다. 링크 아이콘을 블로그에 업로드 먼저 링크 오른쪽이나 왼쪽에 아이콘을 넣기 위해서 해당 아이콘을 티스토리 같은 경우 업로드 한다. 이번에 사용할 아이콘은 이 아이콘 이다. CSS 적용 .content-article a[href^="http"]:not([href*="codepen.io"])::after { c..
-
블로그 하단에 버튼 만들기 (플로팅 버튼)IT-Information/Blog-operation 2022. 7. 28. 05:00
블로그 하단에 원하는 기능을 포함하는 버튼을 생성하는 방법을 알아봅니다. 이 버튼은 최하단에 고정되며 이곳에 홈버튼, 최상단 이동, 카카오톡 1:1 채팅 바로가기 등등 기능을 넣을 수 있다. 이 기능을 사용하기 위해서는 스킨 변경의 지식이 있어야 한다. HTML 사전 작업 FontAwesome5 pro 설치하기 가장 중요한 FontAwsome 폰트를 설치해줘야 한다. 설치법은 간단한데 아래의 코드를 스킨 편집에서 사이에 넣어주면 된다. 네이밍 설정과 HTML 코드 작성 HTML에 사전작업을 하기 전에, 본인이 어떤 기능을 넣을지 먼저 생각해야 한다. 예로 홈버튼이나 방명록 버튼이라면 이름을 move-home, move-guestBook 등 정해주는 작업이 네이밍이다. 먼저, Floating-button ..
-
Adding CSS icons to web pagesIT-Information/Blog-operation 2022. 7. 27. 20:42
웹페이지에 아이콘을 넣는 방법은 여러가지가 있는데, 주로 Font Awesome 이라는 라이브러리를 사용하기도 한다. 폰트 어썸이 아닌 Icomoon 을 사용해 직접 아이콘을 만들어서 넣어보는 것을 해보고자 한다. 아이콘을 만들어서 넣기 위해서는 SVG 확장자의 이미지 파일이 필요하다. SVG 확장자 아이콘 만들기 아이콘을 만들기 위해서는 Adobe Illustration이 필요하다. 아이콘을 만드는 방법을 진행하고자 하면 아래 포스팅을 보고 생성해서 오면 된다. 원하는 이미지를 아이콘 SVG파일로 만드는 방법 (Illustration) Adobe Illustration으로 원하는 아이콘을 가져와서 SVG 파일로 만드는 방법에 대해서 알아보려고 한다. SVG 파일은 그림파일을 웹에서 원래그대로 보여질 수..
-
웹에 영상 게시와 자동 재생되도록 하는 방법IT-Information/Blog-operation 2022. 7. 23. 15:38
유튜브 영상을 워드프레스, 블로그, 웹페이지에 게시할때 자동 재생되도록 하기 위해서 는 영상 임베드 코드를 삽입할 수 있다. 모바일 기기에서는 자동 재생이 안 되도록 제한되지만, 아래에서 소개하는 자바스크립트를 사용해 모바일 기기에서 재생이 가능하도록 할 수 있다. 또한 테마와 엘리먼터 페이지 빌더에서는 유튜브/비메오 동영상을 자동 재생되는 동영상 배경으로 설정하는 기능도 제공한다. HTML 동영상 재생 MP4 파일을 서버에 업로드해 재생되도록하는 경우 아래의 코드를 사용할 수 있다. 커뮤니티에 움직이는 GIF 파일이 많이 사용되지만 오래된 규격이고 비효율적으로 mp4로 대체되고 있다. 유튜브 영상 자동 재생되도록 하기 동영상 파일은 서버에 직접 업로드하는 대신 유튜브 채널에 업드로해 공유하는 방법은 클..
-
White Hat SEO 기법 10가지IT-Information/Blog-operation 2022. 7. 12. 18:20
검색엔진 최적화 SEO는 인터넷 초창기부터 있었지만 정확히 어떻게 작동하는지는 일부 관심을 가지는 사람들에 의해서 관련 검색엔진 사이트를 정독하고 추적하는 사람들이 주로 알고 있다. 웹사이트의 트래픽을 늘려주고 Google, Bing, Yahoo와 같은 검색 엔진에서 순위를 높이는데는 화이트 햇 SEO기술이 적용되어 있다고 한다. 검색 엔진 최적화가 만능은 아니다. 일부 방법은 여러 번 효과적인 것으로 입증되었지만 다른 방법은 스팸 사이트와 부자연스러운 겨로가를 줄이기 위해 항상 알고리즘을 변경하는 검색 엔진 정책에 의해서 적용되지 않는 것들도 있다. White Hat SEO는 구글 가이드라인을 따르고 사이트가 검색 엔진 결과 페이지 SERP에서 금지되지 않는 것을 말한다. 화이트햇 기법은 웹사이트에 트..
-
깃 허브 페이지 구성하기IT-Information/Blog-operation 2022. 6. 21. 10:59
페이지를 만들기는 했는데 아직 아무것도 없다. 그래서 어떻게 구성해볼까 고민하며 이것저것 알아보았지만 아직 원리나 생성파일 등 모르는 것들이 많아서 만들어져 있는 것을 써보면서 알아나가보기로 결정했다. 그래서 기존에 제공해주는 템플릿 파일 들을 적용하면서 원리가 위치 파일 들을 알아나가볼까 한다. 그래서 오늘 적용해볼 템플은 hydejack 에서 만들고 제공하고 유료버전도 가지고 있는 생각보다 알찬 테마를 적용해보고자 한다. 주요 장점 1) 코드블록 , 요즘 포스팅하며 늘어난 코드를 표기하기에 굉장히 유용해보임 2) Katex Kramdown 수학표시 지원 , 특히 블랙숄즈옵션모델은 공부하다보면 굉장히 필요하게 느껴지는 기능임 적용하기 깃허브의 장점은 설치방법이 상세히 설명되어 있다는점이다. 그리고 단점..
-
깃허브 페이지 재도전IT-Information/Blog-operation 2022. 6. 19. 15:35
개발자들이 주로 활동하고 개인 페이지를 활용하고 있는 깃허브에 페이지를 만들어보기 위해 시도를 해보았지만 이것저것 손이가는 부분이 많아서 미뤄두었었다. 그런데 이번에 다시 의지가 생겨서 페이지를 만저보고 한번 구축해볼까하는 생각에 시도해보려고한다. 깃 허브 페이지의 장점으로 꼽자면 1)무료 도메인 2)ssl 걱정없는점 티스토리와 동일함 3)여러 라이브러리와 기능들 테스팅 4)페이지 커스텀 등이 있을 수 있고 개인마다 다를것이지만 개인적 커스텀이 가장 끌리며 그다음 라이브러리다. 1. 리파지토리 만들기 먼저 github pages를 이용하기 위해서 github repository를 만든다 기본적으로 도메인 주소는 https://USERNAME.github.io/REPOSITORY의 포멧으로 만들어진다. 예..
-
웹페이지를 위한 사진 최적화기IT-Information/Blog-operation 2022. 6. 18. 20:02
웹페이지는 넘처나는 이미지와 그 이미지를 전시하기위해서 최적의 용량과 소정의 양식에 담겨 전시되기를 선호하도록 유도되고 있다. 방대한 데이터를 어느정도 가이드를 하지 않는다면 그 데이터를 따라가기 벅찰수도 있을 것이기 때문이다. 그리고 웹페이지를 운영하면서 타 플랫폼 처럼 글을 쓰는 것은 최적화에 도움이 되지 않는다. 그것은 플랫폼에 대한 이해가 선행되지 않았다는 것으로 풀이될 수 있다. 하지만 알고리즘이나 원리를 이해하기란 쉽지 않다. 그리고 항상 변화하기 때문에 이를 따라가기도 쉽지 않은 것이 현실이다. 사진 용량을 줄여야 하는 요인 웹페이지에 사진을 올려서 용량이 커도 빠르게 볼 수 있는 인터넷 속도를 가진 곳은 그렇지 않은 곳보다 적다. 인터넷 속도는 여러 곳에서 다른 속도를 나타내기 때문에 이를..