반응형 ▸티스토리 이야기81 티스토리 꾸미기 | 소제목 'SET10' 모음집 티스토리 소제목 'SET10' 모음집 블로그에서 소제목 서식을 사용하는 것은 콘텐츠의 가독성, 구조화, 그리고 SEO(검색 엔진 최적화) 측면에서 매우 중요합니다.가독성 향상 소제목을 사용하면 긴 텍스트를 작은 섹션으로 나누어 독자가 빠르게 정보를 얻을 수 있습니다.주요 구성화 소제목은 블로그의 구조를 명확히 합니다. 그렇기 때문에 독자들이 글을 읽는 동안 더욱 집중할 수 있습니다.SEO 최적화 소제목에 적절한 키워드를 사용하면 검색 엔진이 페이지를 더 쉽게 이해하고, 관련 검색 결과에 더 잘 노출될 수 있습니다.📌 알림 웹서핑을 하다 보면, 제가 만든 소제목과 인용구의 코드, 태그 속성 테이블, 그리고 오탈자까지 그대로 가져가 본인이 작성한 글인 것처럼 소제목과 관련된 포스팅을 하시는 분들이 계십니다.. 2024. 10. 18. 티스토리 꾸미기 | 본문 이미지에 그림자 및 확대 효과 주기 본문 이미지에 이벤트 효과를 주기.이번에는 본문에 업로드된 이미지에 그림자 효과 및 모서리를 둥글게 만들기, 마우스 오버 시 확대 등 다양한 효과를 넣는 방법에 대해 알아보겠습니다. 참고로 스킨에 따라 세부적인 내역에 차이가 있을 수 있으며, 제 경우는 티스토리 스킨 중에서 "Book Club"을 사용하고 있어 이 글의 설명도 이 스킨을 기준으로 하고 있습니다.📌 본문 이미지 이벤트 내용1. 이미지의 모서리를 둥글게2. 이미지에 그림자 효과3. 이미지에 얇은 테두리4. 이미지에 마우스 오버 시 이미지 확대 효과 CSS코드 적용법본문의 이미지 이벤트 효과는 CSS 코드만 추가하는 간단한 방식입니다CSS코드를 "관리 > 스킨편집 > CSS"로 진입 후 CSS탭 맨 아래 넣어 주기만 하면 됩니다. 1. 'h.. 2024. 10. 2. 티스토리 꾸미기 | 하이퍼링크 CSS코드 모음집 (북쿨럽 스킨) 하이퍼링크의 CSS코드 스타일 모음집. 블로그 본문의 하이퍼링크에 효과를 주는 것은 사용자 경험을 향상시키는 좋은 방법입니다. CSS를 사용하면 하이퍼링크에 다양한 효과를 쉽게 적용할 수 있습니다. 하이퍼링크에 마우스를 올릴 때 색상이나 밑줄 등의 스타일을 변경하며 이를 통해 클릭 가능한 요소를 더 효과적으로 알리고, 피드백을 제공할 수 있습니다. 하이퍼링크의 CSS코드 적용법필요한 하이퍼링크의 CSS코드를 "관리 > 스킨편집 > CSS"로 진입 후 CSS탭 맨 아래 넣어 주기만 하면 됩니다. 📌 자세한 설명은 아래 포스팅을 참고 하시기 바랍니다.2024.09.26-티스토리 꾸미기 | 본문의 하이퍼링크에 마우스오버 효과 만들기 (북쿨럽 스킨) 티스토리 꾸미기 | 본문의 하이퍼링크에 마우스오버 효과 만들.. 2024. 9. 27. 티스토리 꾸미기 | 본문의 하이퍼링크에 마우스오버 효과 만들기 (북쿨럽 스킨) 하이퍼링크에 마우스오버 효과를 만들기. 블로그 본문의 하이퍼링크에 효과를 주는 것은 사용자 경험을 향상시키는 좋은 방법입니다. CSS를 사용하면 하이퍼링크에 다양한 효과를 쉽게 적용할 수 있습니다. 하이퍼링크에 마우스를 올릴 때 색상이나 밑줄 등의 스타일을 변경하며 이를 통해 클릭 가능한 요소를 더 효과적으로 알리고, 피드백을 제공할 수 있습니다.이번에는 많은 분들이 물어보시는 제가 사용하는 하이퍼링크에 대해 알아보겠습니다.제가 사용하는 하이퍼링크는 플러그인의 무지개 링크가 아닌 CSS에 코드를 추가한 방식입니다. CSS코드 적용법작업 방법은 의외로 간단합니다.필요한 하이퍼링크의 CSS코드를 "관리 > 스킨편집 > CSS"로 진입 후 CSS탭 맨 아래 넣어 주기만 하면 됩니다. 1. 'html'탭에서 '.. 2024. 9. 26. 티스토리 꾸미기 | 포스트잇 인용구 HTML 서식 모음 포스트잇 인용구 HTML 서식 모음 티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다. 시각적 구분: '인용구' 요소를 사용하면 '인용구'가 주변 내용과 시각적으로 구분되어 독자가 인용된 내용을 쉽게 식별할 수 있습니다. 이는 글의 가독성과 이해도를 높여줍니다. 스타일링: 블로그 플랫폼에서는 주로 '인용구'에 대한 스타일을 지정하여 인용구를 강조하거나 시각적으로 더욱 눈에 띄게 만듭니다. 이는 인용된 내용에 대한 주목도를 높일 수 있습니다. 웹 표준 준수: HTML 웹 표준에 따르면 인용된 텍스트를 나타내기 위해 '인용구' 요소를 사용해야 합니다. 티스토리나 다른 블로그 플랫폼에서 이를 준수함으로써 웹 사이트의 품질을 높일 수 있습니다.. 따라서 .. 2024. 8. 31. 티스토리 꾸미기 | 공지 및 알림 인용구 HTML 서식 모음 공지 및 알림 인용구 HTML 서식 모음티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다. 시각적 구분: '인용구' 요소를 사용하면 '인용구'가 주변 내용과 시각적으로 구분되어 독자가 인용된 내용을 쉽게 식별할 수 있습니다. 이는 글의 가독성과 이해도를 높여줍니다. 스타일링: 블로그 플랫폼에서는 주로 '인용구'에 대한 스타일을 지정하여 인용구를 강조하거나 시각적으로 더욱 눈에 띄게 만듭니다. 이는 인용된 내용에 대한 주목도를 높일 수 있습니다. 웹 표준 준수: HTML 웹 표준에 따르면 인용된 텍스트를 나타내기 위해 '인용구' 요소를 사용해야 합니다. 티스토리나 다른 블로그 플랫폼에서 이를 준수함으로써 웹 사이트의 품질을 높일 수 있습니다.. 따라.. 2024. 8. 28. 티스토리 꾸미기 | 폴더 스타일 인용구 HTML 서식 모음 폴더 스타일 인용구 만들기티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다. 시각적 구분: '인용구' 요소를 사용하면 '인용구'가 주변 내용과 시각적으로 구분되어 독자가 인용된 내용을 쉽게 식별할 수 있습니다. 이는 글의 가독성과 이해도를 높여줍니다. 스타일링: 블로그 플랫폼에서는 주로 '인용구'에 대한 스타일을 지정하여 인용구를 강조하거나 시각적으로 더욱 눈에 띄게 만듭니다. 이는 인용된 내용에 대한 주목도를 높일 수 있습니다. 웹 표준 준수: HTML 웹 표준에 따르면 인용된 텍스트를 나타내기 위해 '인용구' 요소를 사용해야 합니다. 티스토리나 다른 블로그 플랫폼에서 이를 준수함으로써 웹 사이트의 품질을 높일 수 있습니다.. 따라서 티스토리나 .. 2024. 8. 28. 티스토리 소제목 서식(HTML) 스타일 모음 part 5 티스토리 소제목 서식(HTML) 모음 part 5티스토리에서 소제목 서식을 사용하는 장점은 다음과 같습니다.시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효과와 가독성, 정보 전달 효과 등을 향상하는 데 큰 도움을 줍니다.서식화된 소제목은 시각적인 강조와 정보의 구조화를 통해 독자들의 주의를 끌고 글의 가독성과 검색 엔진 최적화를 향상시킬 수 있습니다.💡 공지웹서핑을 하다 보면, 제가 만든 소제목 코드, 태그 속성 테이블, 그리고 오탈자까지 그대로 가져가 본인이 작성한 글인 것처럼 소제목 관련 포스팅을 하시는 분들이 계십니다. 코드를 퍼가는 것까지는 제가 막을 수 없지만, 제 자료를 사용해 소제목 관련 포스팅을 하실 경우, 출처를 꼭 밝혀주시기 바랍니다. 그 외.. 2024. 8. 12. 티스토리 꾸미기 | CSS를 이용 한 테이블 여백 조정하기 CSS를 이용한 테이블 여백 조정하기오늘은 글 작성 시 자주 이용되는 '표(테이블, table)'의 안쪽 및 바깥쪽 여백을 조정하는 방법에 대해 알아보도록 하겠습니다. 구버전 북클럽 스킨의 기본 세팅은 표 안쪽 여백의 상하가 일치하지 않고 좌우 여백이 없으며, 표 바깥쪽 여백 또한 상하가 일치하지 않습니다. 이로 인해 글 작성 시 다소 불편한 부분이 있어 여백을 조정해 보겠습니다. 최근 새롭게 스킨을 적용한 분들은 따로 설정하지 않으셔도 됩니다. 기본 테이블보통 글 작성 시 에디터에서 테이블을 삽입하면 기본 테이블은 아래처럼 글쓰기에서는 여백이 정상처럼 보입니다. 그러나 미리보기를 통해서 보면 아래처럼 테이블 상①, 하단②이 다르게 보이며, 내부③ 여백도 라인에 붙어 있는 걸 확인할 수 있습니다. 이에 .. 2024. 5. 10. 이전 1 2 3 4 5 6 ··· 9 다음 반응형
