코드의 섬, 코코섬

안녕하세요! 오늘은 블로그 디자인을 개선하기 위해 제목과 소제목을 수정하고, CSS를 조정하는 작업을 진행하려고 합니다. 제목은 블로그의 첫인상을 결정하는 중요한 부분이므로, 가독성을 높이고 시각적으로 눈에 띄게 만드는 것이 핵심입니다. 두꺼운 글꼴이나 색상 변경과 같은 방법을 고려할 것입니다. 소제목 또한 블로그 내용을 이해하기 쉽게 도와주는 역할을 합니다. 따라서 적절한 디자인과 크기를 선택하여 CSS를 수정하여 전체적인 디자인을 일관성 있게 유지하고, 블로그가 눈에 띄게 더 개선되도록 하려고 합니다. 제목 CSS 수정 제목은 아주 간단합니다. F12 또는 ctrl + shift + c 를 눌러 개발자 도구(DevTools)를 엽니다. 개발자툴의 좌측 상단에 아이콘을 클릭해주세요. 아이콘을 클릭하고 ..

안녕하세요! 오늘은 블로그의 코드 블록 폰트를 변경하는 과정을 소개해드리려고 합니다. 가시성 좋은 폰트를 선택함으로써 독자들에게 더 나은 가독성과 시각적 편안함을 제공하고, 전문성과 신뢰성을 높이며 다양한 기기 및 화면에 적합한 사용자 경험을 조성할 수 있습니다. 폰트 선택 먼저, 다양한 상업적 용도에 활용 가능한 무료 폰트를 제공하는 눈누에서 원하는 폰트를 찾아보겠습니다. 눈누홈페이지에서는 폰트를 한눈에 볼 수 있고, 웹폰트로 제공되어 편리합니다. 사진처럼 '코딩체'만 따로 모아 볼 수도 있습니다. 여기서 제가 개발에 특화된 D2Coding을 선택한 이유는, 네이버에서 개발자들을 위해 디자인한 이 폰트가 코딩 시 가독성이 뛰어나다는 특징이 있기 때문입니다. 원하시는 폰트를 골라보시길 바랍니다. 웹 폰트..

안녕하세요! 오늘은 티스토리 블로그에서 제공하는 기본 코드 블록 대신, 테마에 어울리는 코드 블록을 적용하는 방법에 대해 소개해보려고 합니다. 몇 번의 시행착오 끝에 테마 컬러와 어느 정도 일치하는 코드를 성공적으로 적용했습니다. 플러그인 설정 확인 먼저, 플러그인을 확인해 보겠습니다. [블로그 관리> 플러그인] 메뉴에 들어갑니다. 티스토리 블로그는 기본적으로 Syntax Highlight가 적용되어 있습니다. 해당 메뉴에서 Syntax Highlight 관련 플러그인을 찾아 확인합니다. 만약 활성화되어 있다면, 해당 플러그인을 해제합니다. 테마찾기 highlight.js 에서 원하는 디자인 찾습니다. https://highlightjs.org/demo : 이 링크에서는 직접 언어를 선택하고 코드를 작성..

블로그에서 이미지는 글을 더 풍성하게 만들어주고 독자들의 시선을 사로잡는 역할을 합니다. 그러나 때로는 이미지의 경계선이 모호하여 블로그 레이아웃이 조금 불분명해 보일 수 있습니다. 이럴 때 어떻게 하면 이미지를 더 선명하게, 그림 효과를 더해 가독성을 높이고 포스팅을 더욱 미려하게 꾸밀 수 있을까요? 저는 그림자를 통해 이미지를 강조하려고 합니다. 레이아웃 찾기 먼저, 이미지에 적용할 CSS를 찾기 위해 개발자 도구를 사용합니다. 이미지를 첨부한 포스팅을 열고 F12 또는 ctrl + shift + c 를 눌러 개발자 도구(DevTools)를 엽니다. 개발자툴의 좌측 상단에 아이콘을 클릭해주세요. 아이콘을 클릭하고 포스팅창에서 마우스를 움직이면 다음처럼 오브젝트에 파란색 박스가 생기고 개발자 도구에서 ..

안녕하세요! 오늘은 현재 사용 중인 오디세이(Odyssey) 스킨에서 발생하는 게시글 가로넓이의 불편함을 해소하기 위한 방법에 대해 알려드리려고 합니다. 스킨을 사용하면서 게시글을 작성할 때와 작성 후의 화면에서의 가로 사이즈 차이로 불편함을 느끼셨다면 이번 포스팅이 도움을 드릴 것입니다. 뿐만 아니라, 다른 스킨에서도 적용할 수 있도록 안내해 드리니 여러분의 블로그에 맞게 커스터마이징 해보세요. 레이아웃 찾기 먼저, 원하는 포스팅을 여세요. F12 또는 ctrl + shift + c를 눌러 개발자 도구(DevTools)를 열어주세요. 개발자 도구에서 "Elements"탭을 찾아 클릭합니다. 화면 하단에 위치한 "Layout" 탭을 선택하여 레이아웃 정보를 확인합니다. 일반적으로, 블로그의 스킨에서 콘텐..

안녕하세요! 이번에는 블로그 썸네일 이미지를 게시글의 최상단에 놓는 방법에 대해 자세히 알아보겠습니다. 썸네일은 블로그 포스트를 대표하는 이미지로, 컨텐츠의 첫 번째에 위치함으로써 포스팅의 첫인상을 높이고 시각적으로 컨텐츠의 내용을 사용자에게 전달할 수 있습니다. 썸네일을 지정함으로써 얻을 수 있는 이득은 5가지 정도로 정리할 수 있습니다. 주목성 향상을 통한 사용자 유도: 썸네일은 시각적으로 눈에 띄기 때문에 사용자의 주목을 끄는 데 큰 도움이 됩니다. 강렬하고 흥미로운 썸네일은 사용자가 해당 콘텐츠를 클릭하고 읽을 확률을 높일 수 있습니다. 콘텐츠 식별 및 기억: 특정 콘텐츠를 식별하고 기억하는 데 썸네일은 필수적입니다. 특히 블로그가 다양한 주제를 다루는 경우, 각 주제에 대한 대표 이미지로서의 역..

안녕하세요! 오늘은 블로그 포스팅을 더욱 효율적으로 작성할 수 있는 목차 자동화에 대해 소개해드리려고 합니다. 목차 작성은 귀찮고 시간이 많이 들어갑니다. 하지만, 우리에겐 이미 해결책이 있습니다! 바로 `jquery.toc` 플러그인입니다. 이 플러그인을 활용하면 페이지의 제목을 기반으로 목차를 자동으로 생성할 수 있어, 블로그 포스팅 작성이 훨씬 수월해집니다. 더불어 자동으로 제목 태그에 ID를 생성하고 목차 리스트에 `` 태그를 생성하여 화면 이동까지 지원합니다. 이를 통해 사용자는 더욱 편리하게 글을 읽고 내비게이션할 수 있습니다. jquery.toc 플러그인 다운로드 먼저, 다운로드 페이지에서 소스 코드를 다운받아주세요. 만약에 링크에 접속이 안되실 경우 zip 파일을 다운로드 받아주세요. 압축..

안녕하세요! 오늘은 티스토리 블로그에 구글 애드센스를 등록하는 방법을 알아보려고 합니다. 2023년 현재, 티스토리는 카카오 애드핏, 구글 애드센스, 데이블, 텐핑과 같은 다양한 광고 플랫폼을 제공하고 있습니다. 이 중에서 구글 애드센스는 세계적으로 가장 널리 사용되는 광고 플랫폼 중 하나로, 다양한 광고 형식과 안정적인 수익을 제공합니다. kakaoAdFit Google AdSense Dable Tenping 조건 블로그 개설일: 30일 이상 3개월 내 공개 발행글: 20개 이상 중복되지 않고 SEO 노출 높은 게시글 최근 7일 평균 방문수 1500 이상 충족공개 발행 글 100개 이상 없음 장점 CPM 광고 방식: 방문자에게 노출만 되어도 수익 발생 CPC 광고방식으로 가장 높은 단가 제공 방문자와 ..

안녕하세요! 티스토리 블로그를 빙과 줌 검색 엔진에 등록하는 방법에 대해 알아보려고 합니다. 티스토리 블로그는 다음엔진에서는 잘 노출되지만 다른 검색 엔진에서는 직접 등록해 주어야 합니다. INTERNET TREND 사이트에 따르면, 2023년 정보통신/IT 카테고리의 점유율에서 네이버가 50.95%, 구글이 46.36%를 차지하여 대부분을 점유하고 있습니다. 그 뒤를 이어 다음, 빙, 줌이 따르고 있습니다. 통계에 따르면 네이버, 구글, 다음, 빙, 줌 이렇게 5개 사이트에서만 꾸준한 검색이 이뤄지고 있습니다. 블로그를 운영하는데 파이가 적지만 하나라도 아쉬운 부분이 있어 노출을 높이기 위해 노력하고 싶습니다. 따라서 이 포스팅에서는 티스토리 블로그를 빙과 줌 검색에 등록하는 방법에 대해 자세히 다뤄보..

안녕하세요! 티스토리 블로그를 네이버 검색 엔진에 등록하는 방법에 대해 알아보려고 합니다. 티스토리 블로그는 다음에서는 잘 노출되지만, 다른 검색 엔진에서는 그렇지 않습니다. INTERNET TREND 사이트에 따르면, 2023년 정보통신/IT 카테고리의 점유율에서 네이버가 50.89%, 구글이 46.42%를 차지하여 대부분을 점유하고 있습니다. 저는 주로 구글을 사용하고 있지만, 최근에는 Whale 브라우저를 사용하면서 네이버에서 검색하는 경우도 많이 늘어났습니다. 블로그를 운영하는데 있어서 네이버 검색에서 노출되는 것은 중요한 요소 중 하나입니다. 따라서 이 포스팅에서는 티스토리 블로그를 네이버 검색에 등록하는 방법에 대해 자세히 다뤄보겠습니다. 네이버 검색 엔진 등록 방법 naver Search A..