GoldenKey GoldenKey

티스토리에는 페이지라는 기능이 있다. 페이지는 일반적인 글쓰기 기능으로 발행되는 블로그 포스트와 조금 성격이 다르다. 개인적으로 웹페이지에서 페이지라함은 기본 홈화면에서 이동가능한 다른 공간을 부를때라고 이해하고 있었는데 티스토리에서는 글을 발행하는 형식으로 되어 있는거 같다. 티스토리의 페이지 페이지 기능은 고정으로 사용되는 페이지를 만든다. 예를 들어 블로그 소개, 글쓴이에 대한 소개 글을 작성해 메뉴에 링크시켜 사용할 수 있다. 페이지 작성에서 컨텐츠를 작성하고 발행하면 블로그 포스트와는 약간 다른 형태의 발행 메뉴 심플하게 기본(공개, 비공개 여부), URL과 대표이미지만 나온다. 페이지를 발행하면 포스트와 동일하게 발행하고 RSS에서도 찾아볼 수 있다.

웹사이트에는 새로운 방문자가 필요하고 게시물에서는 트래픽을 늘릴 수 있는 몇 가지 방법에 대해서 앙라보고자 한다. 먼저 트래픽은 그룹을 확장하는 것이 목표인지 판매를 해야 하는 것이 목표 인지 뭔가 정보 전달이 목표인지 물건을 판매하는 것이 목표인지에 따라서 여러 방법이 있을 수 있다. 사이트 트래픽이 어디로 가고 싶은지 알게 되면 거기에 도달하기 위한 계획을 세우는 것이 필요하다. 웹사이트의 프로모션 클릭당 지불 PPC 광고는 사용자가 금전적 보상을 받는 대가로 웹사이트 링크를 클릭하는 유로 프로모션의 형태다. 소유 판촉 형태의 한 가지 예는 자주 업데이트 및 스페셜을 보내는 이메일 구독자 목록을 유지 관리하는 것이 필요하다. 웹사이트를 언급하는 블로그 및 신문과 같은 다른 웹사이트의 링크는 획득 프로..

포스팅을 하다보면 글이나 구문등을 강조하기 위해 밑줄이나 글자색을 수정하게 된다. 그리고 넣다보면 링크가 있는지 없는지 확인하기 위해 마우스 포인터를 올려보게 된다. 이런 사소하지만 안해도 되는 작업을 줄이기 위해 링크가 있다는 것을 알려주고 보기편한 작업이다. 링크가 있다는 표시인 아이코을 표시하는 CSS 수정을 통해 자동으로 되게하는 방법을 알아보고자 한다. 설치형 블로그는 어디든 적용할 수 있다. 링크 아이콘을 블로그에 업로드 먼저 링크 오른쪽이나 왼쪽에 아이콘을 넣기 위해서 해당 아이콘을 티스토리 같은 경우 업로드 한다. 이번에 사용할 아이콘은 이 아이콘 이다. CSS 적용 .content-article a[href^="http"]:not([href*="codepen.io"])::after { c..

블로그 하단에 원하는 기능을 포함하는 버튼을 생성하는 방법을 알아봅니다. 이 버튼은 최하단에 고정되며 이곳에 홈버튼, 최상단 이동, 카카오톡 1:1 채팅 바로가기 등등 기능을 넣을 수 있다. 이 기능을 사용하기 위해서는 스킨 변경의 지식이 있어야 한다. HTML 사전 작업 FontAwesome5 pro 설치하기 가장 중요한 FontAwsome 폰트를 설치해줘야 한다. 설치법은 간단한데 아래의 코드를 스킨 편집에서 사이에 넣어주면 된다. 네이밍 설정과 HTML 코드 작성 HTML에 사전작업을 하기 전에, 본인이 어떤 기능을 넣을지 먼저 생각해야 한다. 예로 홈버튼이나 방명록 버튼이라면 이름을 move-home, move-guestBook 등 정해주는 작업이 네이밍이다. 먼저, Floating-button ..

웹페이지에 아이콘을 넣는 방법은 여러가지가 있는데, 주로 Font Awesome 이라는 라이브러리를 사용하기도 한다. 폰트 어썸이 아닌 Icomoon 을 사용해 직접 아이콘을 만들어서 넣어보는 것을 해보고자 한다. 아이콘을 만들어서 넣기 위해서는 SVG 확장자의 이미지 파일이 필요하다. SVG 확장자 아이콘 만들기 아이콘을 만들기 위해서는 Adobe Illustration이 필요하다. 아이콘을 만드는 방법을 진행하고자 하면 아래 포스팅을 보고 생성해서 오면 된다. 원하는 이미지를 아이콘 SVG파일로 만드는 방법 (Illustration) Adobe Illustration으로 원하는 아이콘을 가져와서 SVG 파일로 만드는 방법에 대해서 알아보려고 한다. SVG 파일은 그림파일을 웹에서 원래그대로 보여질 수..

유튜브 영상을 워드프레스, 블로그, 웹페이지에 게시할때 자동 재생되도록 하기 위해서 는 영상 임베드 코드를 삽입할 수 있다. 모바일 기기에서는 자동 재생이 안 되도록 제한되지만, 아래에서 소개하는 자바스크립트를 사용해 모바일 기기에서 재생이 가능하도록 할 수 있다. 또한 테마와 엘리먼터 페이지 빌더에서는 유튜브/비메오 동영상을 자동 재생되는 동영상 배경으로 설정하는 기능도 제공한다. HTML 동영상 재생 MP4 파일을 서버에 업로드해 재생되도록하는 경우 아래의 코드를 사용할 수 있다. 커뮤니티에 움직이는 GIF 파일이 많이 사용되지만 오래된 규격이고 비효율적으로 mp4로 대체되고 있다. 유튜브 영상 자동 재생되도록 하기 동영상 파일은 서버에 직접 업로드하는 대신 유튜브 채널에 업드로해 공유하는 방법은 클..

검색엔진 최적화 SEO는 인터넷 초창기부터 있었지만 정확히 어떻게 작동하는지는 일부 관심을 가지는 사람들에 의해서 관련 검색엔진 사이트를 정독하고 추적하는 사람들이 주로 알고 있다. 웹사이트의 트래픽을 늘려주고 Google, Bing, Yahoo와 같은 검색 엔진에서 순위를 높이는데는 화이트 햇 SEO기술이 적용되어 있다고 한다. 검색 엔진 최적화가 만능은 아니다. 일부 방법은 여러 번 효과적인 것으로 입증되었지만 다른 방법은 스팸 사이트와 부자연스러운 겨로가를 줄이기 위해 항상 알고리즘을 변경하는 검색 엔진 정책에 의해서 적용되지 않는 것들도 있다. White Hat SEO는 구글 가이드라인을 따르고 사이트가 검색 엔진 결과 페이지 SERP에서 금지되지 않는 것을 말한다. 화이트햇 기법은 웹사이트에 트..

페이지를 만들기는 했는데 아직 아무것도 없다. 그래서 어떻게 구성해볼까 고민하며 이것저것 알아보았지만 아직 원리나 생성파일 등 모르는 것들이 많아서 만들어져 있는 것을 써보면서 알아나가보기로 결정했다. 그래서 기존에 제공해주는 템플릿 파일 들을 적용하면서 원리가 위치 파일 들을 알아나가볼까 한다. 그래서 오늘 적용해볼 템플은 hydejack 에서 만들고 제공하고 유료버전도 가지고 있는 생각보다 알찬 테마를 적용해보고자 한다. 주요 장점 1) 코드블록 , 요즘 포스팅하며 늘어난 코드를 표기하기에 굉장히 유용해보임 2) Katex Kramdown 수학표시 지원 , 특히 블랙숄즈옵션모델은 공부하다보면 굉장히 필요하게 느껴지는 기능임 적용하기 깃허브의 장점은 설치방법이 상세히 설명되어 있다는점이다. 그리고 단점..