본문 바로가기

웹 개발221

NN 티스토리 | 글에 자동 목차 넣기 구에디터에서만 동작합니다. TOC (Table of Contents) TOC 플러그인 본문 상단에 자동으로 목차가 들어가고 클릭을 하면 그 목차로 이동하게 됩니다. 자동으로 들어가게 하기 위해서는 몇 개의 설정이 필요합니다. 1. https://ndabas.github.io/toc/ : 먼저 플러그인을 깃에서 다운로드 하면 2개의 파일이 생깁니다. 플러그인을 티스토리 파일 업로드에 올려놔야합니다. 2. 스킨편집 >> html편집 >> 파일업로드 >> 추가 3. HTML 편집으로 와서 다음 코드를 사이에 넣어주세요 4. CSS 편집으로 와서 가장 마지막에 다음 코드를 넣어주세요. /* 글 목차 */ .toc { list-style-type: disc; background: #fff none repeat s.. 2020. 5. 13.
NN 티스토리 | HTML 구조와 주요 태그 티스토리 스킨 HTML은 너무 길고 복잡하며 들여쓰기도 파악하기 힘듭니다. 이에 중요 태그들의 레이아웃을 살펴보며 대략적인 구조파악에 도움이 되시길 바랍니다. 티스토리 HTML 구조 : 티스토리 스킨가이드에 따른 자바스크립트를 지정해줄 영역, 그룹치환자 : 상단 영역 해당하는 컨텐츠, 네비게이션링크 : 검색 : 컨테이너 (본문+사이드바) : 컨텐츠 영역 : 검색결과 : 공지사항 : 방명록 : 보호글 : 본문 : 색인. 인덱스 페이지 : 영구적인 링크. 포스팅에 부여된 URL를 의미 퍼머링크 게시물이 어느 경우에나 연결되는 절대적인 불변 주소로 블로그 주소를 옮기거나 할 때에도 접속 가능하게 해주는 주소 : 글 관리 기능 : 본문내용 : 태그 : 관련글 : 댓글 : 페이징 : 사이드바 : 푸터, 하단영역 .. 2020. 5. 13.
NN 구글애드센스 | 티스토리 홈화면 상단 광고 애드센스 광고 만들기 사이즈 + 홈화면 광고는 자동광고를 넣을 경우 인라인 광고가 자동으로 들어갑니다. + 상단에 긴 리더보드 광고와 카테고리 사이드 바 광고 정도로 만들수 있습니다. 광고만들기 + 애드센스 > 광고 > 개요 > 상단에 '광고단위기준' 탭 + 신규 광고 단위 만들기 > 디스플레이 광고 선택 + 수평형으로 선택 하시고 광고 크기는 반응형으로 해 주세요. + 코드가 뜨면 일단 창 그대로 두시고 티스토리로 넘어갑니다. 티스토리 광고 넣기 CSS + 스킨편집 >> CSS 에 다음 코드를 삽입해 리더보드광고 자리를 마련해 줍니다. #header .leaderboard { position: relative; max-width: 1080px; height: 90px; margin: 0 auto; } .. 2020. 5. 8.
NN CSS | 5. 박스모델 단위 절대 길이 px : pixels pt : points. (윈도우 9pt = 12px, 맥 9pt = 9px) 상대 길이% : 퍼센트em : 요소의 폰트 사이즈rem : 루트 요소의 폰트 사이즈vw : 뷰포트(브라우저)의 width값을 기준으로 1%의 값 색상 color 속성 컬러 키워드 : red, black, blue 같은 키워드로 지정16진법 : 6자리로 두 자리씩 세가지 색상을 나타냄RGB( ) : 레드, 그린, 블루 (0~255 정수)RGBA( ) : 레드, 그린, 블루 + 알파값(0은 투명, 1은 불투명) background 속성 background-color : 배경의 색상을 지정. (default : transparent)background-image : 배경으로 사용할 이미지 경로를 .. 2020. 4. 3.
NN HTML | 3. 태그와 속성 태그와 속성 기본태그 : 문서 타입 정의. 최상단에 위치 : 전체 도큐멘트 : 문서의 기본설정이나 외부 스타일 시트 파일, js 파일 연결 등 : 도큐멘트 바디, 실제 브라우저 화면에 나타나는 부분 : 메타 태그 제목과 단락 : 제목 (heading) 태그. h1 ~ h6 : 단락 (paragraph) 태그 텍스트 : bold. 글자를 굵게 : italic. 글자를 기울인다. : underline. 글자에 밑줄 : strike. 글자에 중간선 링크 : anchor 태그. 링크 생성 - href 속성 : 반드시 가지고 있어야할 속성 - target 속성 : 어느창에서 열 것인가. _self _blank _parent _top 내부 링크 : 같은 페이지 내 특정 위치로 이동하고자 하는 경우 컨테이너 단순히 .. 2020. 3. 27.
NN 구글애드센스 | ads.txt 문제 IAB (Interactive Advertising Bureau) + 인터넷 마케팅 및 광고 산업에서 중심적인 역할을 수행하는 협회+ 미국의 온라인 마켓팅 표준화 및 업종간 동향, 교류 등 + MSN, AOL, CNET 네트워크 등 주요 인터넷 기업들이 가입되어 있음 IAB Tech Lab국제산업기술표준을 만들고, 기업이 이를 시행하도록 지원하는 독자적이고 국제적인 연구개발 컨소시엄으로 업계를 통합하고, 마찰을 피하며, 업계의 안전하고 보장된 성장을 유지 ads.txt + 승인받은 것으로 확인되는 판매자(애드센스)를 통해서만 디지털 광고 인벤토리가 판매되게 해주는 IAB Tech Lab 솔루션 + ads.txt 파일은 구매자가 가짜 인벤토리를 식별하게 도와 가짜 인벤토리에 광고비가 지출되지 않게 해줘서 .. 2020. 3. 27.
NN 구글애드센스 | 티스토리 본문 상단 광고 2개 디스플레이 상단 2개 디스플레이 상단 2개가 가장 광고효과가 좋다고 합니다. 1. 구글 애드센스 로그인 > 광고 단위 기준2. 신규 광고 단위 만들기 3. 광고크기 >> 고정 >> 336 x 280 (광고단위사이즈)4. 광고단위이름 설정 >> 만들기5. 코드를 보겠습니다.data-ad-client="xxx"data-ad-slot="yyy" 6. xxx 와 yyy 부분을 복사해서 잘 저장해둡니다.7. 1-4번까지 반복해서 광고를 만듭니다.8. 코드를 또 보겠습니다.data-ad-client="xxx"data-ad-slot="zzz" 9. zzz를 잘 복사합니다.10. 다음 코드에서 xxx, yyy, zzz 를 복사해 둔 본인의 클라이언트 아이디와 광고 넘버로 바꿔주세요. 위의 코드는 광고 2개를 표시하는 .. 2020. 2. 28.
NN 티스토리 | 사이즈 이미지 태그 스킨 관련 팁 글❛ 글 하루 제한 50개❛ 본문 내 h1 태그(머리말1) 사용 금지 이미지❛ 본문에 삽입되지 않은 대표 이미지로 넣지 않는다❛ 이미지 alt태그 입력 사이즈+ 슬라이드 : 1960 X 600+ 썸네일 : 250 X 250+ 본문 : 768 (애드센스 광고 최대 720 >> 좌우 여백 20씩) + 유튜브 동영상 첨부 시 모바일에서 우측이 넘어가 버리는 경우 를 로 교체 + 유튜브 동영상 사이즈 자동 조절 : 스킨편집 html 앞에 다음 코드 삽입 + 표 사이즈 폰 화면 크기에 맞추기 빨간색으로 표시 된 width 부분 모두 삭제 태그❛ 태그 다는 법 1. 띄어쓰기 금지 : 띄어씌기한 이후는 포함되지 않는다. 메타태그메타태그는 스킨 편집 html에 넣을 수 있지만 메타 태그 플러그인 사용하며 스킨 변경 시.. 2020. 2. 17.
NN 웹사이트 | 블로그 체크 리스트 웹사이트를 만들면 확인해야 할 점들이 참 많죠. 사이트맵, SEO, 검색등록, 깨진링크 찾기 등에 대해 자세히 살펴보겠습니다. 사이트맵 생성 ❛ https://www.xml-sitemaps.com (무료 URL 500개) ❛ http://www.web-site-map.com 2019/10/18 - [🖥 공학/컴퓨터공학 | 웹 개발] - [웹사이트] 사이트맵 생성 구글 서치 콘솔 ❛ 사이트맵, RSS 제출 2020/02/10 - [🖥 공학/컴퓨터공학 | 웹 개발] - [웹사이트] 구글 서치 콘솔 네이버 서치 어드바이저 (네이버 웹마스터 도구) ❛ 사이트맵, RSS 제출 2019/10/22 - [🖥 공학/컴퓨터공학 | 웹 개발] - [웹사이트] 네이버 웹마스터 도구 Bing 웹마스터 도구 ❛ 사이트 등록 ❛.. 2020. 2. 17.

티스토리툴바