'티스토리/HTML' 카테고리의 글 목록 - hi098123 Tistory Tip

티스토리 에디터 html 코드 넣기

생긴지는 한두달 된 기능인것 같은데, 따로 홍보도 없고 안내도 없어서 이번에 이걸 사용해서 글을 작성한 김에 내용을 소개하려고 한다. 티스토리 HTML블럭 티스토리 에디터의 고질적인 단점. html코드를 수정후 기본모드에서 편집시 일부 코드가 사라진다. 처음 봤을때 이걸 방지하려고 만든 기능임을 짐작했다. 조금전 작성한 글에서 이 기능을 사용했는데 결과는 아래와 같다. 에디터상의 코드 결과로 출력되는 코드 원리라고 하면 이런것 같다. 에디터가 코드블럭은 안건듦 코드블럭 내에 사용자 입력 html 데이터를 별도로 저장 글을 열람시에는 서버에서 처리되어 html데이터를 그대로 출력 이런 기능은 잘 만든것 같다. https://tistory.hi098123.com/36 이런 글에서의 html 본문 코드 활용을..

티스토리 스킨 변경사항, 광고 치환자

12일 전, 티스토리 스킨 관련 문서가 변경되었습니다. 수익 메뉴 관련하여 치환자가 새로 생겼는데, 무엇이 바뀌었나 알아봅시다. 공통 광고치환자 revenue_list_upper : 블로그 홈/목록 상단 revenue_list_lower : 블로그 홈/목록 하단 위의 두 가지 항목이 추가되었습니다. RSS구독 태그 방명록 사용 예시는 위와 같고, 블로그 홈 화면의 광고를 관리하는것으로 보입니다. 아마도 적용되는 광고를 치환하는 예시인것 같습니다. 문서가 그닥 친절하지 않아서 + 저는 수익 메뉴를 연동하지 않아서 따로 설명드릴수있는 내용이 없을것 같습니다. 이 내용을 잘 아시는 분은 댓글로 남겨주세요.

티스토리에서 리스트 활용법

티스토리에서 글을 쓸때 저는 리스트 태그를 많이 사용합니다. 주된 이유로는 검색엔진이 받아들이기 쉬운 태그여서 그냥 글로 풀어쓰는것 보다 좋기 때문입니다. 로봇은 1., 2.과 같이 의미없는 글을 싫어하기도 합니다. 대신에 태그를 사용하면 로봇의 이해도 쉬워집니다. Google에서 스니펫에 올라가는 경우 태그의 내용을 우선적으로 색인하기도 합니다. 리스트 기본 활용법 그냥 순서대로 글을 쓴 뒤 리스트를 눌러 리스트를 생성하거나, 리스트를 누른 뒤 내용을 추가 할 수 있습니다. 글을 드래그합니다. 상단 글 메뉴에서 리스트를 누릅니다. 완성! 리스트 중급 활용법 리스트 안에 리스트를 넣고 싶다면 어떻게 할까요? 일단 리스트를 생성하고 글을 선택하고 키보드의 Tab키를 누르면 리스트의 자식으로 만들 수 있습니..

움직이는 이미지 mp4로 표시하기

GIF는 MP4에 비해 모든면에서 안좋다. 화질 용량 최적화 CPU사용량 때문에 GIF이미지를 mp4로 변경하여 사용하는 사이트가 요즘 늘어나는 추세다. FFMPEG와 같은 미디어인코더를 통해 서버에서 GIF를 MP4로 변환시키거나. 사용자 브라우저에서 WASM기술을 이용해 인코딩할수도 있다. 이렇게 변환한 파일을 gif.mp4라고 가정하고 설명한다. GIF를 MP4로 변환했다면 아래와 같이 mp4파일을 autoplay loop muted playsinline 옵션을 준다면 GIF와 동일하게 동작한다. Video태그 각 옵션에 대해 설명 autoplay 자동재생을 한다. GIF도 로딩과 동시에 움직이는 이미지로 보인다. loop 무한 반복을 한다. 보통 GIF는 무한반복을 이용한다. muted 음소거를 ..

HTML 기초 : title attribute 툴팁을 만들자.

이번 글의 주제는 title 속성값이다. title태그와는 다른 속성에 들어가는 값이다. 들어가기 앞서.. HTML 속성(attribute)이란? hi098123-skin:타이틀 속성 위와 같은 html 구조에서 href="URL", target="_blank" 부분을 의미한다. href는 속성(attribute)으로 a태그에서 어디로 향할지 주소를 입력할 수 있다. href의 값(value)은 https://hi098123-skin.tistory.com/29 로 웹 주소이다. TITLE 속성(attribute) 알아보기 여기의 title은 hi098123-skin 이에요 미리보기 여기의 title은 hi098123-skin 이에요 title 속성(attribute)에 적힌 hi098123-skin이라는..

티스토리 스킨 ##_rp_rep_class_##

티스토리 공식 스킨 페이지에 보면 설명이 좀 이상합니다. 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘 어떤 의미인가와 활용방법을 알아보고자 글을 작성합니다. 분류 값 일반 댓글 rp_general 비밀 댓글 rp_secret 본인의 댓글 rp_admin 숨겨진 댓글 hiddenComment 이렇게 반환됩니다. 결과 예시 만약 코드가 다음과 같았다면 일반 댓글 비밀 댓글 (내용을 볼 수 있는 경우) 블로그 주인의 댓글, 블로그 주인의 댓글이면서 비밀댓글 비밀 댓글 (내용을 볼 수 없는 경우) 이렇게 4개로 나눠집니다. 활용 예시는? .rp_admin{font-weight:bold} CSS설명 : 블로그 주인의 댓글의 글자를 굵게 설정합니다. 단순 예시로 CSS를 다룰줄 안다면 아래..

HTML기초 : a태그 (링크)

HTML에서 하이퍼링크(이하 링크)를 작성하는 방법은 a태그를 이용하면 됩니다. a태그에는 다양한 값을 이용할 수 있습니다. href target rel download href는 필수로 사용하며 target으로 어떻게 링크를 열지 선택할 수 있습니다. href href는 이동할 페이지의 url을 의미한다. hi098123-skin 이렇게 작성하면 hi098123-skin 이렇게 링크가 생깁니다. target _blank hi098123-skin 링크를 새창으로 엽니다. 많이 사용되는 속성중 하나입니다. 예시 : hi098123-skin _self hi098123-skin 현재창에서 링크를 엽니다. 기본값입니다. (target을 설정하지 않으면 자동으로 _self로 설정됨) _parent hi098123..

HTML기초 : h1 ~ h6 태그

h1 ~ h6 태그는 head라는 의미를 가지고 있습니다. 글머리, 제목을 의미하며 검색엔진에서는 주제를 의미한다고 볼 수 있습니다. 검색엔진이 좋아하는 글 쓰기 큰 주제를 단락별로 h1 ~ h6를 써서 나열하는게 좋습니다. 글 제목 (h1) 주제 1 (h2) 소 주제 1 (h3) 소 주제 2 (h3) 주제 2 (h2) 소 주제 1 (h3) 소 주제 2 (h3) 글을 이런식으로 작성하는것이 검색엔진에서 파악하기 중요하고 사용자가 읽기에도 편합니다. 이런 구성으로 작성하기에 toc(Table of contents, 목차)를 나타내는 기능이 있다면, 의식해서라도 이런 규칙을 적용해서 읽기 좋은 글을 작성할 수 있기 때문에 글을 좀 더 가치있고 와닿게 작성하려면 toc기능을 사용하는것을 권장합니다. 티스토리 ..

< 이전 1 2 다음 >

인기 글

최신 글

링크
hi098123 Tistory Tip 소개
hi098123 Tools
hi098123 블로그

Design by hi098123 이 사이트의 게시글을 복제하지 마십시오. 링크공유만 허용됩니다.

티스토리툴바