보호되어 있는 글입니다.

광고와 경제적 이해관계 표시 의무2024년 12월 1일부터 시행되는 공정거래위원회의 개정된 「추천 보증 등에 관한 표시 및 광고 심사지침」에 대해 안내드립니다. 블로거 및 콘텐츠 제작자분들은 아래 내용을 숙지하여 준수해 주시기 바랍니다.PDF # 바로보기 주요 내용 요약경제적 이해관계 표시 의무블로그, 인터넷 카페 등 문자 중심 매체에서 추천 및 보증을 하는 경우, 게시물의 제목 또는 첫 부분에 경제적 이해관계 표시 문구를 명확히 공개해야 합니다. 이를 통해 소비자들이 해당 콘텐츠가 광고임을 쉽게 인지할 수 있도록 해야 합니다.경제적 대가 수령 시 명확한 표시광고주로부터 현금, 상품, 상품권, 적립 포인트, 할인 혜택 등 경제적 대가를 받거나 광고주에게 고용된 상태에서 추천 또는 후기 글을 작성하는 경우..

웹 개발에서 긴 텍스트를 다룰 때, 특히 첫 번째 줄이 너무 길어 두 번째 줄로 넘어가는 경우가 종종 있습니다. 이럴 때 두 번째 줄부터 말줄임 표시를 적용하고 싶다면 CSS만으로는 해결하기 어렵습니다. 대신, JavaScript를 활용하여 조건에 따라 스타일을 조정하는 방법이 있습니다. 이 글에서는 간단한 예시를 통해 이를 구현하는 방법을 설명하겠습니다.HTML 구조먼저, 텍스트를 담을 HTML 구조를 만듭니다. 아래와 같이 text-container와 text 클래스를 가진 두 개의 div 요소를 사용합니다. 여기에 너무 긴 텍스트가 들어갑니다. 이 텍스트가 너무 길어서 두 번째 줄로 넘어가면, 두 번째 줄부터 말줄임 처리가 되어야 합니다.CSS 스타일다음으로, CSS를 사용하여 텍스트 컨테이너..

티스토리 블로그를 운영하면서 댓글 기능은 독자와의 소통을 위한 중요한 요소입니다. 그러나 때때로 사용자가 버튼을 실수로 여러 번 클릭하게 되어 중복 댓글이 남는 경우가 발생할 수 있습니다. 이러한 중복 댓글은 블로그의 품질을 저하시킬 뿐만 아니라, 독자에게 혼란을 줄 수 있습니다. 이번 글에서는 jQuery를 활용하여 티스토리에서 중복 댓글을 방지하는 방법에 대해 알아보겠습니다.중복 댓글의 문제중복 댓글은 여러 가지 문제를 야기할 수 있습니다. 첫째, 블로그의 댓글 섹션이 어수선해져 독자들이 원하는 정보를 찾기 어렵게 만듭니다. 둘째, 댓글 관리가 복잡해져 블로그 운영자가 불필요한 시간을 소모하게 됩니다. 마지막으로, 중복 댓글은 독자에게 부정적인 인상을 줄 수 있으며, 이는 블로그의 신뢰도에 영향을 미..

티도리 템플릿 설치 및 실행 방법티도리 프레임워크를 사용하여 티스토리 스킨을 개발하기 위한 설치 및 설정 과정에 대해 자세히 알아보겠습니다. 성능 좋은 티스토리 스킨을 제작하기 위해, Git과 Node.js가 필수적으로 필요합니다. 아래 단계를 따라 해 보세요.1. 환경 준비Git 및 Node.js 확인:먼저, 시스템에 Git과 Node.js가 설치되어 있는지 확인합니다. 그러지 않으면, Git 다운로드 및 Node.js 다운로드 페이지에서 설치할 수 있습니다.2. 티도리 프레임워크 템플릿 다운로드프로젝트 클론:git clone https://github.com/tidory/tidory tistory-skincd tistory-skin3. NPM 패키지 설치필수 패키지 설치:아래 명령어를 입력하여 프로젝..

티스토리 스킨 커스텀티스토리 스킨을 제작 중이시거나 스킨을 커스텀 하려고 정보를 찾는 분들이 참고하면 좋을만한 디자인을 모아 보았습니다. 저는 Windows xp 로딩 페이지를 한번 구현해 봐야겠습니다.로딩 페이지Windows xp loading page 다들 알만한 로딩 화면See the Pen Windows XP loading by dhondup (@duptitung) on CodePen.아래는 스킨을 제작하시는 분들이 참고하면 재미있는 스킨이 나올것 같은 디자인 입니다.See the Pen Pure CSS Windows 10 Desktop by Guillaume (@gcazin) on CodePen.원 페이지 네비게이션페이지를 멋지게 이동할 수 있는 디자인 입니다.See the Pen Stic..

하이퍼링크 호버 효과 적용웹사이트의 사용자 경험은 방문자가 사이트에 머무는 시간과 깊은 관련이 있습니다. 이때 하이퍼링크에 적용되는 다양한 마우스 호버 효과는 단순한 링크를 시각적으로 더욱 매력적으로 변모시켜, 방문자의 관심을 끌고 클릭을 유도하는 중요한 역할을 합니다. 이러한 CSS 효과들은 웹사이트 디자인의 품질을 높일 뿐만 아니라, 사용자와의 상호작용을 더욱 풍부하게 만들어 줍니다.특히, 매력적인 호버 효과는 사용자가 링크에 마우스를 올렸을 때 즉각적인 반응을 제공하여, 시각적 즐거움을 더하고, 탐색의 재미를 높이는 데 기여합니다. 이 글에서는 하이퍼링크 마우스 호버 CSS 코드 7가지를 제공합니다.CSS 효과 적용 모습 확인See the Pen Untitled by HYUNBUM CHO (@HY..

티스토리 블로그를 운영하면서 콘텐츠의 시각적 효과를 높이는 것은 독자의 관심을 끌고, 블로그의 전반적인 품질을 향상하는 데 중요한 요소입니다. 이번 글에서는 스크롤에 따라 이미지와 같은 콘텐츠가 서서히 등장하는 Fade-in 기능을 추가하는 방법에 대해 설명하겠습니다. 이 기능은 블로그의 사용자 경험을 개선하고, 방문자에게 더 매력적인 콘텐츠를 제공할 수 있습니다.Fade-in 효과란?Fade-in 효과는 콘텐츠가 화면에 나타날 때 서서히 불투명해지는 시각적 효과입니다. 이 효과는 사용자가 스크롤할 때 콘텐츠가 자연스럽게 등장하도록 하여, 블로그의 디자인을 더욱 세련되게 만들어 줍니다. 특히 이미지나 텍스트 블록에 적용하면, 독자의 시선을 끌고 콘텐츠에 대한 흥미를 유도할 수 있습니다.Fade-in 효과..

블로그의 방문자가 콘텐츠를 얼마나 읽었는지를 시각적으로 나타내는 방법 중 하나가 바로 상단 진행바입니다. 이를 통해 방문자는 페이지가 얼마나 스크롤되었는지를 한눈에 알 수 있으며, 독서 경험을 더욱 향상할 수 있습니다. 이번 글에서는 티스토리 블로그에 상단 진행바를 추가하는 방법과 코드를 정확한 위치에 입력하는 방법을 설명하겠습니다. 별도의 스크립트도 제공할 것이며, 이를 사용하여 손쉽게 진행바를 설치할 수 있습니다.진행바(Progress Indicator)란?정의: 페이지 상단에 위치한 진행바는 사용자가 페이지에서 얼마나 스크롤했는지를 표시하는 UI 요소입니다.목적:사용자가 페이지의 길이를 인지하고, 어디까지 읽었는지를 시각적으로 확인할 수 있도록 돕습니다.독서 흐름을 끊김 없이 유지하게 하여 사용자 ..

각주란 무엇인가?각주는 본문에서 언급된 내용에 대한 추가 설명이나 출처를 제공하기 위해 사용됩니다. 독자가 본문의 내용을 이해하는 데 도움을 주며, 정보의 신뢰성을 높이는 역할을 합니다. 각주는 주로 글의 하단에 위치하며, 독자가 쉽게 참고할 수 있도록 번호로 구분됩니다.각주 설정 방법티스토리에서 각주를 설정하는 방법은 다음과 같습니다.1. 글 작성 화면에서 각주 삽입하기글 작성 시작: 티스토리 관리자 페이지에서 '글쓰기'를 클릭하여 새 글을 작성합니다.각주 번호 입력: 본문에서 각주를 삽입하고 싶은 위치에 각주 코드(footnote)를 입력합니다. 일반적으로 티스토리에서 제공하는 형태는 대괄호를 사용하여 [각주내용] 입력합니다.각주 내용 작성: 각주를 삽입할 텍스트 옆에 각주 내용을 작성합니다. 예를 ..

웹사이트를 디자인할 때, 사용자 경험(UX)은 매우 중요한 요소입니다. 사용자들이 사이트를 탐색할 때 느끼는 재미와 흥미는 사이트의 전반적인 인상에 큰 영향을 미칩니다. 이 글에서는 클릭할 때마다 시각적인 효과를 추가하여 웹사이트에 생동감을 부여하는 방법을 소개하겠습니다. 이 효과는 사용자가 클릭할 때마다 시각적으로 반응하여, 사이트의 인터랙티브 한 요소를 강화하는 데 도움을 줄 수 있습니다.클릭 효과란?클릭 효과는 사용자가 마우스를 클릭할 때 발생하는 시각적 반응을 의미합니다. 이 효과는 사용자가 클릭한 위치에 원형 애니메이션을 생성하여, 클릭이 이루어졌음을 시각적으로 알리는 역할을 합니다. 이러한 효과는 사용자에게 더 나은 피드백을 제공하고, 사이트의 전반적인 사용자 경험을 향상할 수 있습니다.클릭 ..

티스토리 블로그를 운영하면서 HTML 서식을 적절히 활용하는 것은 매우 중요합니다. 특히, span 태그와 같은 인라인 요소의 사용은 신중해야 합니다. 무분별한 span 태그 사용은 SEO에 부정적인 영향을 미칠 수 있습니다. 이 글에서는 텍스트의 예시를 통해 html의 구조를 보여드리고 문제를 설명하겠습니다.텍스트 예시텍스트만 적용된 모습아래는 HTML 서식이 전혀 적용되지 않은 기본 텍스트입니다.티스토리 블로그에서 HTML 서식을 적절히 활용하는 것은 중요합니다. 특히, 무분별한 태그 사용은 SEO에 부정적인 영향을 미칠 수 있습니다.이 경우, 텍스트는 간단하고 명확하게 전달됩니다. 독자는 내용을 쉽게 이해할 수 있으며, 검색 엔진도 페이지의 구조를 명확하게 파악할 수 있습니다.무분별한 span 태그..