HTML에서 텍스트를 입력 후 CSS에서 색상을 변경하는 방법에 대해 알아봅시다. 텍스트는 태그 없이 에디터에서 텍스트만 입력해도 출력은 되지만 편집을 위해서는 되도록 태그 안쪽에 텍스트를 입력하는것이 좋습니다. 대표적으로 태그나 태그들이 있습니다. 아래의 예시에서는 태그에 텍스트를 입력해 보겠습니다. 안녕하세요! 친절한효자손입니다. 이렇게 입력했습니다. 그러면 브라우저에서는 태그 안쪽에 입력된 텍스트만 출력됩니다. HTML에서 폰트 크기를 별도로 지정하지 않았다면 기본값인 16px 크기로 출력되며 색상은 검정색입니다. 색상을 변경하는 CSS 코드는 다음과 같습니다. p { color: #000; /* 16진수 헥사코드 또는 색상명 또는 rgba */ } color 라는 CSS 옵션을 사용한다는것을 기억..
div 블록요소들의 세로 가운데 정렬 방법에 대해 알아보도록 하겠습니다. 블록요소이면서 반응형으로 완성되는 레이아웃의 대부분은 세로 크기는 고정되어 있습니다. 본문 설명에서도 고정된 경우라고 가정하고 진행하겠습니다. 먼저 이 개념을 이해하려면 아래의 관련글들을 잘 읽어보시고 넘어가시는것을 추천합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tistory.com position을 사용한 세로 가운데 정렬 먼저 예시입니다. 세로 크기가 500px인 ..
안녕하세요. 친절한효자손입니다. 저는 대전에서 서식하고 있습니다. 친효스킨을 거의 완벽에 가깝게 발전시키고 잠시 스킨에 손을 놓고 있는 제 자신을 발견하는 순간, 나태해져서는 안 되겠다는 생각을 하게 되었습니다. 그래서 가지고 있는 재능을 지역 발전(?)을 고려하며 조금이나마 도움이 되어 보고자 무료 배포를 하려고 결심했습니다. 겸사겸사 두번째 스킨을 만들기 위함도 있습니다. 이렇게 재능 기부를 하면 까먹음 방지도 될 수 있고 예습 및 복습도 자연스럽게 되니까 일석 이조인 것 같습니다. 그렇게해서 HTML + CSS를 무료로 교육하는 모임을 오픈하게 되었습니다. 대전 지역 주민 한정이지만 타지역 분들도 참여 가능합니다. 물론 대전까지 오셔야겠지만요. 모임 안내 HTML과 CSS의 기본 지식을 교육하고 더..
input 창에 어떤 변수값을 받는 경우를 필요로 할 때 간단하게 사용할 수 있는 태그가 두 가지 있습니다. 제목에서 언급한 태그와 태그입니다. 이 두가지 태그가 어떤 차이점이 있는지, 그리고 최신 버전인 태그는 어떤 식으로 사용하는지 알아보겠습니다. 생각보다 너무 쉽습니다. 먼저 아래의 예시를 살펴보시기 바랍니다. datalist 사용 방법 See the Pen Tag by rgy0409 (@rgy0409) on CodePen. 먼저 텍스트 출력을 위한 태그는 필수입니다. 그리고 태그를 사용함으로서 입력창을 만듭니다. 뒤이어 바로 오늘의 주인공인 태그를 사용하고 자식 요소로서 여러가지 태그들이 들어가게 됩니다. 즉 각 태그의 기능은 다음과 같습니다. label : 원하는 문구(텍스트) 입력 input ..
포트폴리오에서 자신의 프로그램 능력을 보여주는 그래프라던지 어떤 통계에 대한 막대그래프 표현을 하고자 할 때 HTML 태그 중 이 녀석을 사용하면 상당히 요긴합니다. 바로 오늘의 주인공인 태그입니다. 이 태그는 별도의 CSS나 자바스크립트의 도움 없이 태그 사용만으로 간단하게 막대 그래프를 표현할 수 있는 매우 유용한 요소 중 하나입니다. 과거 싸이월드 시절, 미니홈피 오른쪽 상단에는 이런게 있었습니다. 203040 여러분들은 기억하실겁니다. 연예인 싸이월드 미니홈피를 들어가보면 이 막대그래프의 수치가 장난 없습니다. 미친듯 치솟습니다. 스크랩과 즐겨찾기 개수가 어마무시했죠. 아무튼 저런 막대기를 매우 쉽고 간편하게 표현할 수 있는 것입니다. HTML 사용 방법 See the Pen Tag CSS Cus..
현재 대전지역 한정으로 HTML과 CSS를 무료로 교육을 진행중에 있습니다. 이제 스킨을 새로 만들기로 마음은 먹었지만 다시 처음부터 시작하려고하니 뭔가 급 귀찮아지기도 하고 그동안 버전이 올라감에 따라 정상적으로 동작하지 않는 것들이 몇 개가 있습니다. 대표적으로 폰트어썸이라고 하는 웹 아이콘입니다. 과거에는 회원 가입이 필요없었고 바로 사용이 가능했지만 이제 강제적으로 가입을 해야 사용이 가능하도록 변경되었나 봅니다. 기존 회원 중 이미 구버전의 폰트어썸을 사용중이라면 크게 상관은 없으나 만약 새롭게 HTML 문서를 만들고 폰트어썸 CDN을 사용하려면 회원 가입은 필수입니다. 폰트어썸 가입하기 https://fontawesome.com/ Font Awesome The world’s most popul..
스마트폰으로 인터넷 정보를 스크랩하는데 스크랩된 이미지 아래 부분에 웹사이트라는 문장이 표시가 되는것을 목격했습니다. 분명 캡쳐할때는 이런 글씨가 없었는데 싶었고 다시 한 번 해당 웹문서를 캡처 시도하며 체크했는데 역시 없습니다. 안드로이드에 추가된 기능인지는 모르겠으나 현재 사용중인 갤럭시노트20 울트라는 웹문서 캡쳐 시 URL 정보가 이미지에 남습니다. 그래서 캡쳐된 이미지를 갤러리에서 확인 시 북마크처럼 편리하게 해당 웹페이지를 방문하는 기능이 있습니다. 여기에서 힌트를 얻었습니다. 티스토리 본문에도 링크를 걸어서 마우스 오버 시 "바로가기" 표시가 되도록 만들고 싶었습니다. 왠지 가능해 보였습니다. 태그만 제어하면 될 것 같았습니다. 바로 시도해보았고 마침내 구현에 성공했습니다. 위의 이미지에 마..
HTML의 각 태그는 기본적인 속성이 있다고 말씀드린 바 있습니다. 바로 블록, 인라인, 블록-인라인 요소가 그것입니다. 혹시 이 개념에 대해 잘 모르신다면 먼저 아래의 글을 반드시 꼭 정독하시어 이해를 먼저 해주시기 바랍니다. 정말 중요한 부분이거든요. 개인적으로 이 개념이 확실히 머릿속에 적립된 시점부터 웹언어에 대한 이해도가 부쩍 향상되었습니다. 기초는 정말 정말 너무 중요하다고 생각합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tisto..
지난 시간에는 HTML 태그의 블록요소와 인라인요소, 그리고 두 가지 요소가 적절히 섞인 블록-인라인 요소에 대해 간략히 알아봤습니다. 개인적으로 HTML을 처음 배울 때 요소의 성격에 대한 개념을 확실히 잡고 시작했기 때문에 나머지도 쉽고 빠르게 이해할 수 있었다고 생각합니다. 그만큼 어떤 카테고리든 기초 개념은 정말 중요합니다. 혹시 요소에 대해 아직 잘 모르겠다면 아래의 글을 먼저 정독 해보시고 이 글을 보시면 더 많은 도움이 될 것이라고 생각합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 ..
티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니다. 따라서 백업할 공간이 필요합니다. 제 티스토리를 지식 백업 저장소로 다시 한 번 본격적으로 활용하기로 마음을 먹었습니다. 사소한 것 부터 하나 하나를 모두 다 기록할 것입니다. 이번 카테고리는 HTML에 대해서입니다. 웹문서에 대한 기본 강좌를 시작해 보겠습니다. 티스토리와 함께 배우는 HTML 소제목을 이렇게 정해봤습니다. 아무래도 제 블로그에는 티스토리와 관련된 내용이 많이 있습니다. 더불어 스킨 수정에 대한 내용도 좀 있습니다. 하지만 HTML에 대한 지극히 기본적인 내용에 대해서는 언급한적이 없더군요. 그..
본문의 친효스킨 전용 태그 모듈 스타일을 따로 설치가 가능한지에 대한 문의 댓글이 있었습니다. 생각해보니 태그 모듈만 따로 만들어 배포는 하지 않았었군요. 그러므로 즉시 착수에 옮겨봅니다. 본문 하단의 태그 부분으로 스타일은 친효스킨을 따릅니다. 타스킨에서도 적용 가능합니다. 파일 다운로드 먼저 아래의 첨부파일을 다운로드 받습니다. 텍스트 파일을 열어보시면 HTML 태그와 CSS 스타일 코드가 들어있습니다. 다음은 세팅 방법입니다. HTML 세팅 먼저 뼈대에 해당하는 HTML 태그를 사용하고자 하는 스킨에 설치해야 합니다. TAG : 위의 태그는 친효스킨 본문에서 사용하고 있는 태그 모듈 코드입니다. 이것을 현재 사용하는 스킨의 본문 아래에 붙여넣어야 합니다. 그런데 문제가 있죠? 그렇습니다. 본문 아래..
와! 이 좋은걸 이제서야 알았습니다. 외국의 CSS 웹코딩 영상을 보다가 알게 된 사실입니다. 그분은 간단하게 입력하더니 순식간에 div 태그가 클래스명이 넘버링되며 5개가 완성이 되더군요. 저같으면 먼저 div 태그 안에 클래스를 자동완성으로 넣고 이걸 다시 네개를 더 복사 후 클래스명을 각각 다르게 수정했을겁니다. 근데 유튜브속의 저 사람은 이걸 단 1~2초만에 해내더군요. 그저 대박이었습니다. "혹시 저 사람이 사용하는 프로그램에서 기능을 지원하는걸까?" 이런 생각이 들었고 열심히 구글링을 해보는데 어떤 문서에서 Emmet을 사용하면 된다는걸 목격하게 됩니다. "어? Emmet이라면 브라켓 필수 플러그인 중 하나인데...?!" 순간 소름이 돋았고 바로 브라켓을 실행시켜서 테스트해 봤습니다. 원래 사..
유튜브의 알 수 없는 알고리즘이 하나의 영상을 보여줍니다. 해당 영상은 홈페이지를 만드는 과정을 보여주었습니다. 해외 유튜버인 것 같은데 웹아이콘을 폰트어썸을 사용하지 않고 다른 쪽 제품(?)을 사용하더군요. 다시 뒤로 돌려서 어디것을 사용하는지 살펴보니 Boxcions(박스아이콘)이었습니다. 역시 세상은 넓고 능력자는 많아요. Boxicons 설치하기 박스아이콘은 폰트어썸과 같은 웹아이콘을 제공합니다. 폰트어썸의 경우는 일부 유료지만 박스아이콘은 완전 무료입니다. 물론 언제 유료화가 될지는 모르겠지만 적어도 아직까지는 무료군요. 박스아이콘 홈페이지의 모습입니다. 아래에 링크를 걸어두었으니 바로 방문해 보시기 바랍니다. 홈페이지 방문 후 우측 상단에 있는 Usage 메뉴를 눌러주세요. Boxicons :..
친효스킨으로 하루에 최소 한 번쯤은 검색을 해서 다른 분들은 잘 사용하고 있는지, 어떤 분들이 어떤 콘텐츠를 어떻게 운영하고 있는지 옵저버처럼 여러분들의 눈에는 보이지 않게 탐색하고 있습니다. 그러면 운영을 찰지게 잘 하시는 분도 간혹 계시지만 애석하게도 대부분의 사람들은 여전히 콘텐츠를 수익 목적으로만 운영하는 분들이 압도적입니다. 이해합니다. 저 역시도 그렇게 시작을 했으니까요. 그런데 친효스킨을 수익과 관련된 스킨으로 분류하는 분들이 계시는 것 같습니다. 예를 들자면 "수익형 티스토리를 위한 스킨 추천" 이라는 제목의 글을 작성한다면 그 내용중에 친효스킨이 있는겁니다. 왜 수익적인 부분인지 궁금해서 읽어보면 역시 정답은 이겁니다. "애드센스를 적시적소 구석 구석 배치할 수 있다." 음.... 사실 ..
모바일 웹 퍼블리싱 작업을 위해서 HTML 문서 내에 있는 안쪽에 다음의 메타 태그를 삽입하면 두 손 가락을 사용한 핑거스냅 사용을 할 수 있습니다. 확대 혹은 축소가 가능해집니다. 친효스킨에도 다음의 메타태그가 적용이 되어 있지만 최근에 이 메타태그가 업데이트가 된 모양입니다. HTML는 웹문서로서 버전이 있는데 시간이 지날수록 버전은 올라갑니다. 그러면서 잘 쓰이지 않는 구형의 코드들은 점점 사라지고 있습니다. 새롭게 추가되는 신형 태그(요소) 혹은 메타태그들이 있으면 기왕이면 사용해주는것이 좋을 것입니다. 앞으로의 무궁한 발전을 위해서지요. 거두절미하고 어떤 메타 태그인지 살펴보겠습니다. 뷰포드 살펴보기 구형 : 신형 : 친효스킨에서는 구형의 메타 뷰포트 코드가 삽입되어 있습니다. 작년까지는 정말 ..
이번에는 옵션 중 STRING에 대해 알아볼 차례입니다. 이 타입도 정말 쓰임새가 많습니다. 친효스킨의 경우에도 정말 많이 적용된 스킨 편집 옵션 중 하나입니다. 대표적으로 애드센스 클라이언트값 입력 부분과 슬롯 번호 입력 부분의 경우입니다. 그밖에도 추천글 모듈에 대한 부분으로 URL 입력 항목이나 텍스트 입력 항목이 모두 STRING 타입을 이용한 부분입니다. STRING 타입은 HTML에서, 그리고 HTML 문서 내의 안에 존재하는 의 내부 방식에 따른 CSS 스타일에서 그 값을 로드합니다. 더욱 이해가 쉽도록 친효스킨에서 실제로 사용된 예시를 살펴보겠습니다. HTML 살펴보기 첫 번째 예시입니다. #contents .article { font-size: !important; } @media (mi..
이번에는 커버 기능에 대해 좀 더 자세히 살펴보겠습니다. 이미 티스토리 스킨 제작 가이드 페이지에서 커버 부분이 나름 상세하게 나와있으니 한번 확인해 주시기 바랍니다. 특히 치환자 부분을 꼼꼼히 살펴보시기 바랍니다. https://tistory.github.io/document-tistory-skin/common/cover.html 홈 커버 · GitBook 홈 커버 홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다. : 커버 그룹 치환자 : 개별 커버 표시 : 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 tistory.github.io 치환자 종류가 생각보다 많습니다. 중요한 포인트는 반드시 가이드에 명시된 치환자 전부를 다 사용할 필요는 없다는 것입니다..
티스토리는 HTML을 수정할 수 있다는 막강한 장점이 있습니다. 이것을 활용해서 사이드바에 다양한 형태의 배너를 게시할 수 있습니다. 대표적으로는 애드센스가 있습니다. 물론 요즘은 애드센스 계정과의 자체 연동으로 인해 버튼 하나만 켜두면 자동으로 애드센스 스크립트가 들어가 광고를 너무 편리하게 배치할 수 있게 되었습니다. 허나 개인적으로 사이드바에 어떤 배너를 만들고자 할 때는 모두 수동으로 설정해야만 합니다. 본문에서는 어떻게 사이드바에 이미지 배너를 생성하는지에 대해 알아볼 것입니다. 타스킨도 사용 가능한 방법이며 당연히 친효스킨에서도 정상적인 동작을 하는 것 까지 확인했습니다. 배너에 사용할 이미지 준비 가장 먼저 이미지를 준비합시다. 이미지는 되도록 너무 크지 않는것을 추천하며 확장자는 gif 또..
언제부터인가 자꾸 본문 수정 시 혹은 글 작성 시 태그와 태그에 알 수 없는 속성값이 부여가 되기 시작했습니다. data-ke-size라고 하는 이 녀석은 폰트의 크기를 지정한 값으로 억지로 변경하는 옵션입니다. size16, size20, size24 등등등의 크기값이 큰 따옴표 안에 들어가버리는데 정말이지 여간 귀찮은것이 아닙니다. 물론 해결 방법은 있습니다. 글을 작성할때마다 해당 속성값을 수동으로 모두 지워버리는 것입니다. 이 방법에 대해서는 아래에 더 자세히 언급되어 있으니 한번 시간 괜찮으시면 읽어보시기 바랍니다. 티스토리 업데이트 (2021.5.12) 때문에 발생한 버그 오류 내용 및 해결 방법 티스토리 업데이트 (2021.5.12) 때문에 발생한 버그 오류 내용 및 해결 방법 안녕하세요. ..
안녕하세요. 친절한효자손입니다. 오랜만에 티스토리 관련 정보를 안내해드리려고 합니다. 티스토리와 애드센스의 관계인데요, 티스토리는 2020년 말부터 2021년 초반까지 관리자 페이지에 있는 애드센스 계정과 동기화를 사용자들에게 요청 중입니다. 이로인해 애드센스 플러그인 기능은 사라졌지요. 초반에 이것때문에 살짝 당황했지만 대처방법은 뭐 얼마든지 있으니까요. 티스토리 관리자에서 애드센스 계정과 아예 동기화를 해버리면 따로 반응형 광고 코드를 만들지 않고 클릭만으로 본문이나 사이드바에 편리하게 광고 삽입이 가능해졌습니다. 이 부분은 분명 눈부신 발전입니다. 이제 막 시작하신 분들도, HTML을 잘 모르시는 분들도 전혀 문제없이 광고 삽입을 할 수 있게 되었습니다. 여기에서 하나 궁금한 부분이 생겼습니다. 원..
티스토리에 이런 저런 연구를 진행하는 중입니다. 현재 친효스킨에는 본문 로딩 중에 제 트라이드 마크인 효자곰이 보이며 그 주변으로 무언가가 뱅글뱅글 돌아가는것을 확인할 수 있습니다. 본문의 모든 데이터를 로드하는동안 이런 애니메이션이 연출되는건데 이건 어떻게 적용시키는건지 알아보도록 합시다. HTML + Script 세팅하기 먼저 기본 뼈대가 되는 HTML과 애니메이션을 위한 스크립트를 티스토리 스킨 정보에 입력해 봅시다. HTML에 붙여넣기를 진행해야 합니다. 아래의 첨부파일을 다운받고 열어주시기 바랍니다. 열어보시면 점선을 기준으로 위에는 HTML과 스크립트 코트가, 아래에는 CSS 코드가 첨부되어 있습니다. 먼저 이 부분입니다. 해당 코드를 모두 복사합니다. 그리고 자신의 스킨 HTML 정보로 들어..
HTML에서 더보기/접기 기능을 사용하려면 간단한 방법으로는 구축이 사실상 좀 어렵습니다. 티스토리에서는 이 부분을 기본적으로 제공해주고 있기 때문에 개발자는 그저 CSS 스타일만 꾸며주기만 하면 됩니다. CSS의 체크박스 기능을 사용해서 응용할 방법도 있습니다면 이러면 코딩이 살짝 복잡해집니다. 혹은 자바스크립트의 일종인 jQuery를 활용하여 만들수도 있습니다. HTML은 업그레이드 되고 있습니다. 현재까지는 HTML5가 대표적인 버전입니다. 5.2 버전에서는 다음의 요소가 새롭게 추가되었습니다. 말로는 설명이 어려우니 아래의 기본 예제를 살펴보시겠습니다. See the Pen HTML5.2 by rgy0409 (@rgy0409) on CodePen. "여기를 눌러보세요." 부분을 직접 클릭해 보시기..
어떤 분께서 혹시 티스토리에도 전화번호 링크가 가능한지를 여쭤보셨습니다. 물론 가능합니다. a 링크 태그를 이용해서 진행 할 수 있습니다. 또한 img 태그를 추가하여 이미지배너 타입으로 전화번호 링크도 생성 가능합니다. 그러면 한번 어떻게 하는지 살펴봅시다. 일반 텍스트에 전화번호 링크걸기 먼저 아래의 태그를 살펴봐주세요. 전화걸기 아주 간단한 태그죠? 그렇습니다. 보통 a href 태그 다음에는 url 주소를 넣는게 일반적입니다. 여기에서 URL 주소 대신 전화번호를 입력 할 수 있습니다. 단 tel: 이라는 태그를 함께 입력해줘야 합니다. 이것만 주의하시면 됩니다. 위의 예시를 바탕으로 완성된 결과가 아래에 있습니다. 전화걸기 이 페이지를 스마트폰에서 확인했을 때, 전화걸기 텍스트를 터치하면 실제 ..
많은 티스토리 사용자가 있고, 티스토리에는 애드센스 광고를 게시할 수 있습니다. 티스토리를 열심히 가꾸어 구글 애드센스 신청을 하게 되고, 콘텐츠의 품질과 방문자 유입에 따라서 승인 유무가 달라집니다. 결국에는 승인을 받게 되고 그때부터 본격적인 애드센스 광고를 게시할 수 있습니다. 개인적으로 기본기를 엄청 중요하게 생각합니다. 뭐든 기본을 알아야 응용 할 수 있습니다. 따라서 기본기를 모른다면 그 응용 방법 또한 모르게 됩니다. 또한 기본 개념을 알아야 다른 방식의 설명을 이해할 확률이 높아집니다. 그러므로 기본기를 충분히 다지는게 중요합니다. 본문에서는 애드센스의 HTML 코드 구현 방식의 아주 기본적인 부분을 설명하려고 합니다. 그 중에서도 애드센스 스크립트(Script) 코드와 클라이언트(Clie..
예전에 받았던 질문 중 하나 입니다. 친효스킨의 메인 화면은 현재 인덱스 페이지로 구성되어 있습니다. 그리고 각 목록마다 특정 표식이 지정되어 있습니다. 스크린샷 이미지를 보시면서 다시 설명 드리겠습니다. 수동으로 영구 삭제 "> 이 부분을 찾으셨나요? 이 중에서 삼각형 모양의 형태를 구성하고 있는 태그 부분은 바로 이곳 입니다. 이 부분 입니다. 여기가 바로 검은색 삼각형 형태를 취하고 있는 영역 입니다. 따라서 해당 태그를 모두 삭제하거나 주석 처리를 하면 사라지게 됩니다. 끝. 추가내용 친효스킨 2.2 버전부터 이 삼각형을 켜고 끌 수 있는 버튼을 추가했습니다. 따라서 태그를 수동으로 삭제할 필요가 전혀 없습니다. 스킨편집 > 레이아웃 설정에 보시면 메인삼각형이라는 기능이 있습니다. 해당 스위치는 ..
이 방법은 기존 친효애드온에서 한 단계 더 업그레이드가 진행된 방법 입니다. 본문의 H1~H4 태그를 스크립트로 불러오고 자동으로 ID값을 할당하여 자동으로 목록을 생성하게 됩니다. 기존 친효애드온의 목록 리스트 모듈은 완전 수동이었습니다만 이 방법을 사용하면 반자동으로 편리하게 사용 할 수 있습니다. 아래는 본문에서 소개한 방법으로 생성된 목차 리스트 입니다. 친효스킨 1.175 이상 버전 사용자분들은 세팅할 필요는 없습니다. 바로 사용하시면 됩니다. 이분들은 HTML 사용 방법을 참조하세요. 목차 유튜브 영상 설명 텍스트 설명만으로는 조금 어려운 부분이 있어서 급하게 유튜브 동영상으로 남겨보았습니다. 말투나 선풍기 바람소리(?)는 좀 양해 부탁드리겠습니다. 라이브로 한다는게 상당히 어렵네요... 텍스..
구형 글쓰기 에디터를 아직도 사용 중 입니다. 티스토리의 신형 글쓰기 에디터는 다 좋은데 이미지를 여러장 본문에 넣어야 하는 상황일 때, 워터마크를 일괄 적용 할 수가 없습니다. 한장 한장 수동으로 워터마크를 넣어야 하는 큰 단점이 있습니다. 또한 본문에 HTML 및 CSS 관련 태그를 입력하면 이걸 자동으로 순수 태그로 인식해서 스타일이 적용이 된다는 점 입니다. 이건 장점임과 동시에 단점이 될 수 있는데... 개인적으로는 단점에 해당합니다. 태그 설명하기가 어려워지기 때문 입니다. 구형 글쓰기 에디터의 가장 큰 단점은 본문의 HTML태그가 매우 지저분하다는 점 입니다. 먼저 아무 이미지나 하나 가지고 와보도록 하겠습니다. 티스토리 구형 글쓰기 에디터로 작성한 글의 HTML 상태 티스토리 로고 이미지를..
현재 친효애드온을 하나 개발 중 입니다. 본문 내에서 편리하게 해당 소제목으로 빠르게 이동이 가능한 하이퍼링크 목차 애드온 입니다. 이 기능은 방문자의 편의성을 최대한 살린 방법으로 구현해 놓으면 원하는 내용을 잽싸게 이동할 수 있다는 장점이 있습니다. 그와 동시에 단점도 하나 존재합니다. 본문 중간에 노출되는 자동 애드센스를 못 보고 지나칠 수 있다는 점 입니다. 우선 아래의 참고글을 살펴보시기 바라겠습니다. 큐텐 추천 상품 모음 친절한효자손 큐텐(Qoo10) 추천 상품 모음 안녕하세요, 친절한효자손 입니다. 온라인 쇼핑을 좋아하는데 큐텐에서 관심있게 본 상품들을 따로 글로 작성하고 싶어서 이렇게 키보드를 두드리고 있습니다. 제 블로그에 들어오시는 분들도 rgy0409.tistory.com 위의 글을 ..
친효스킨의 오른쪽 상단에는 여러가지 아이콘들이 있습니다. 왼쪽부터 홈으로, 전체글보기, 방명록, 글쓰기, 관리자, 로그인/로그아웃 버튼 입니다. 이 중에서 글쓰기 버튼은 현재 구형 글쓰기 에디터로 들어가도록 설정되어 있습니다. 신형(새로운) 글쓰기 에디터를 사용하시는 분들이라면 이게 불편할수도 있습니다. 따라서 이 부분을 변경하는 방법에 대해 알아보고자 합니다. 우선 친효스킨의 HTML에서 아래의 영역을 찾습니다. "글쓰기" 라고 검색하면 쉽게 찾을 수 있을 겁니다. 이 부분 입니다. 여기에서 어디를 수정해야 좋을지 감이 오시나요? 그렇습니다. 이 부분 입니다. 여기에서 a href 부분의 URL 주소만 변경해 주면 됩니다. 즉 /admin/entry/post 를 신형 주소로 바꿔주기만 하면 됩니다. 티..
최근 mailto 태그를 이용해서 지메일이 실행되도록 만드는 방법을 알았습니다. 단 모든 브라우저에서 동작하지는 않고 반드시 크롬(Chrome) 에서만 이렇게 실행이 됩니다. 어차피 크롬만 사용하기 때문에 딱히 불편한점은 없습니다만 접근성 부분을 생각해보면 다른 분들께서 제 티스토리에 접속했을 때를 고려해야 합니다. 왜냐하면 다른 분들은 어떤 브라우저를 사용하는지 제가 모르기 때문입니다. 구글 에널리틱스에서 살펴본 바로는 그래도 절반 이상 방문자분들이 크롬을 사용하는 것으로 나타났습니다. 2위는 익스플로러군요. 따라서 이 방법을 적용했고 현재는 매우 만족스럽게 사용 중 입니다. 제 프로필 모듈에 보시면 SNS 버튼이 있고 그 중 맨 오른쪽 버튼을 누르면 메일로 연결되게 설정되어 있습니다. 한 번 눌러보시..