티스토리

기가왓

검색하기

블로그 홈

기가왓

gigawatt.tistory.com/m

GigaWatt's archive.

구독자: 3

방명록 방문하기

공지 GigaWatt's archive -⋯ 모두보기

주요 글 목록

드롭다운 자동 생성 (by 티스토리 치환자) 장소를 찾기 가장 쉬운 방법인 지도를 보는 것 입니다. 드롭다운은 블로그 지리를 소개할 수 있는 지도같은 역할을 합니다. 하지만 웹 코딩을 처음 접하신 분들은 드롭다운을 만들기 어렵고, 카테고리에 변동사항이 있을 때마다 HTML를 변경하는 일은 번거로운 일이 아닐수 없습니다.따라서, 티스토리 치환자을 기반으로 수정을 최소화하는 자동생성 드롭다운을 단, 두 번의 복사붙여넣기로 구현해 보겠습니다. 1. 드롭다운 자동 생성 - HTML 수정 를 찾아 바로 다음 줄에 아래의 코드를 붙여넣습니다. 1cs 2. 드롭다운 자동 생성 - CSS 수정.area_menu 를 찾아 바로 윗 줄에 아래의 코드를 붙여넣습니다.12345678910111213.head_dropdown{display:block;position:ab.. 공감수 23 댓글수 2 2018. 5. 8.
로그인, 로그아웃 버튼 만들기 [티스토리] 기존에 있는 티스토리 관리 링크는 관리페이지로 이동합니다. 이 소스는 페이지 이동 없고 로그인/로그아웃이 가능하며 현재의 로그인상태를 판별 후 버튼내용을 바꿔줍니다. 단, 두 번의 복사, 붙여넣기로 버튼을 만들 수 있습니다. 1. 로그인 버튼 위치 정하기 HTML HTML의 와 사이에 사용할 위치에 넣습니다. 1 2. 로그인 스크립트 넣기 HTML 태그 바로 앞에 스크립트를 붙여넣습니다. HTML 삽입 미리보기할 수 없는 소스 더보기 // 로그인, 로그아웃 버튼 처리 if (window.T.config.USER.name) { $('.btn-for-user').show(); } else { $('.btn-for-guest').show(); } $('.btn-for-guest [data-action="l.. 공감수 17 댓글수 4 2018. 2. 21.
[티스토리] #1 반응형 관련글 리스트 만드는 방법 (초간단) 본문 아래에 나오는 관련글 리스트를 위와 같이 만드는 방법입니다. 코딩 지식이 없어도 충분히 가능합니다. 1. 티스토리 관련글 리스트 HTML 수정 바로 위줄에 코드 붙여넣기1234567891011121314151617181920212223242526 '' Related articles more Colored by Color Scriptercs 2. 티스토리 관련글 CSS 수정1 @media only screen and (max-width:820px) 바로 윗줄에 코드 붙여넣기123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051/* 관련글 영역 */.tit_related { font-size.. 공감수 14 댓글수 5 2018. 1. 16.
카테고리 펼침 버튼 추가 통째로 카테고리 버튼 추가 안 한 버전 hidden 버튼 따로 동작 anchor tag와 category open btn 따로 .list_cate button#category_btn{float:right;width:40px;height:40px;background:none;border:none;margin:5px 21px 0 0; transform: rotate(0deg);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} .list_cate button#category_btn:after{font-family:FontAwesome;content:"\f1.. 공감수 1 댓글수 2 2017. 12. 9.
[티스토리] 카카오톡 공유버튼 만드는 법 티스토리에는 카카오톡 공유버튼이 아직 없습니다. 이 글을 통해 쉽게 만들어 보시기 바랍니다. 3번의 복사 붙여넣기로 카카오톡 공유 버튼 만들기가 가능합니다.하시기 전에 카카오디벨로퍼(카카오 개발자 플랫폼) 사이트에서 자신의 자바코드만 준비하시면 됩니다.※ 붙여넣을 코드는 아래 텍스트 파일로 준비했습니다. 1. 카카오톡 공유버튼 스크립트 적용 HTML의 안에 아래 코드 넣기123Colored by Color Scriptercs 2. 카카오톡 공유버튼 스크립트 적용2HTML ~ 안에 아래 코드 넣기123456789101112131415161718192021222324252627282930313233343536373839 var firstImg=$(".imageblock:first-of-type img"); .. 공감수 8 댓글수 0 2017. 10. 19.
특정 주소에서 요소 숨기기 원하는 주소에 특정 요소를 숨기고 싶은 경우가 있습니다.예를들어 첫페이지에는 메뉴를 숨기고 싶을 때,그 경우 사용하는 간단한 방법을 알려드립니다. 1. 특정 주소, 숨길 요소 정하기주소와 숨길 요소를 선택했다면아래 코드의 한글로 된 내용만 수정하면 됩니다.클래스명은 자신의 HTML소스에서 class="클래스명"으로 나와 있습니다.여러 요소를 숨길때는 .클래스명을 .숨길 클래스명1, .숨길 클래스명2 처럼 클래스 사이에 콤마( , )만 넣으시면 됩니다. (워드패드 파일 입니다.) 2. 코드 붙여넣기위의 소스를 완성했다면 HTML 편집에서~ 사이에 넣어주면 됩니다. ※ 스킨 백업 후 진행을 권장합니다. 공감수 2 댓글수 0 2017. 8. 2.
[티스토리] 크롬 사진올리기 오류 (플래시 플레이어) 크롬에서 사진을 올릴때 다음 포토업로더가 이렇게 반응을 하게 됩니다.이 문제는 크롬 설정에 들어가 항목 하나만 바꾸면 해결 됩니다. 크롬 새로운 버전 플래시 활성 2018년 10월 기준Daum 포토업로더 창의 왼쪽 상단에 동그란 원 안에 i 를 눌러 허용을 해주시면 간단히 해결됩니다. 크롬 업데이트 전 플래시 활성 1. 우측상단에서 땡땡이를 눌러 설정에 들어갑니다. 2. 아래로 스크롤 하다보면 고급이 보입니다. 이걸 눌러줍니다. 3. 또 아래로 스크롤 하다 보면 콘텐츠 설정이 보입니다. 이걸 눌러줍니다. 4. 플래시를 찾아 눌러줍니다. 5. 우선확인이 파란색으로 켜져 있었다면 눌러서 회색으로 만들어줍니다. 이제 포토 업로더가 정상적으로 작동할 겁니다. 공감수 1 댓글수 0 2017. 7. 27.
[티스토리] 반응형 #1 bxslider(슬라이드 갤러리)설치 1. 슬라이더 파일 업로드 bxslider.css, jquery.bxslider.min.js 2개 다운 받아서 스킨편집에서 파일 업로드 2. 슬라이더 속성 스크립트 붙여넣기 아래 코드를 html의 안에 넣는다. 1234567891011121314151617181920212223242526272829303132333435363738 $(document).ready(function(){$('.bxslider').bxSlider({auto: true,mode: 'fade', //슬라이드 형식 (ex. horizontal, vertical)useCSS: false,randomStart:true, //사진 램덤시작 안쓰면 지우기infiniteLoop: true,adaptiveHeight: true,hideCont.. 공감수 5 댓글수 0 2017. 7. 27.
[티스토리] 배경화면 변경하는 법 티스토리 블로그의 스킨 배경화면을 변경하는 방법입니다. 아무 사진이나 올릴 수 없기 때문에 다운로드, 수정, 배포가 자유인 무료 이미지를 사용해야 합니다. 저는 아래의 사이트를 추천합니다. https://pixabay.com/ko/ 사진을 다운 받았다면 이제 스킨편집을 시작합니다. 1. 배경 사진 업로드 사용하고자 하는 이미지 다운로드 한 후, 이미지를 블로그에 업로드 합니다. 업로드하는 방법은 티스토리 관리자 페이지에서 블로그 관리 → 꾸미기 → 스킨편집 → html편집 → 파일업로드 순으로 들어가시면 됩니다. 이때, 사용하고자 하는 사진파일 이름은 간단한 영문자로 적는게 좋습니다. 2. 배경 이미지 주소 연결하기 CSS 편집창에서 이미지 주소를 적어야 합니다. 다음과 같은 순서로 합니다. 1. Ctr.. 공감수 8 댓글수 14 2017. 7. 25.
[티스토리] 반응형 #1 본문 아래 - 썸네일 카테고리 1. 썸네일 카테고리 - HTML 수정 아래의 초록 블록 사이에 넣어주세요. 공유하기 링크 2. 썸네일 카테고리 - CSS 수정 아래의 초록 블록의 위 아래를 코드를 넣으세요. /* 썸네일 관련기사 */ @mediaonly screen and (max-width:820px) and (-webkit-min-device-pixel-ratio: 1.5),only screen and (max-width:820px) and (min-device-pixel-ratio: 1.5),only screen and (max-width:820px) and (min-resolution: 1.5dppx) /*썸네일 카테고리 리사이징*/ ※ 기존 스킨 백업 후 진행하세요. 공감수 5 댓글수 15 2017. 7. 25.
#1스킨 반응형 광고 잘림 해결하는 법 티스토리 반응형 #1 스킨 사용 중 소형기기(휴대폰) 사용시 광고가 가려짐(잘림) 현상이 보입니다.이는 반응형 광고가 너비를 100%로 사용하기 때문에 일어나는 현상입니다. 따라서 아주 간단히 교정할 수 있습니다. 1. 광고 잘림 수정 - CSS 편집 'Ctrl + f' 버튼을 눌러 '/* 뷰 */' 코드를 찾습니다.2개의 코드가 발견되는데 문제가 되는 부분은 아래(해상도 낮은 부분)입니다.따라서 두 번째 '/* 뷰 */' 코드 바로 아래에 제가 밑에 써놓은 코드를 붙여 넣습니다. 1.area_view{overflow:hidden} /*반응형 광고 잘림 주범*/cs 2. 광고 잘림 해결 결과 위 코드 한줄이 끝입니다. 참 간단합니다.확인해 보지 않았지만 티스토리에서 배포한 스킨들은 비슷한 클래스명로 되어.. 공감수 2 댓글수 0 2017. 6. 12.
[티스토리] 박스 안 박스 중앙정렬 div 안 div 중앙 정렬 1. 박스 안 중앙정렬 - HTML 1234567 cs 2. 박스 안 중앙정렬 - CSS 12345678910.out_box { width: 100%; text-align: center; padding: 20px; border:1px solid blue; }.in_box { display: inline-block; width: 50%; height: 50px; border:1px solid red; }cs 3. 박스 안 중앙정렬 결과 공감수 0 댓글수 0 2015. 11. 9.
[티스토리] 치환자 내부 소스 모음 티스토리에서 치환자를 사용하는 것은 간편합니다. 하지만 내부 소스를 모르면 커스터마이징이 어렵습니다. 그래서 내부의 어떤 클래스가 있는지 알아봅시다. 1. 티스토리 치환자 달력 모듈 티스토리 달력 치환자 의 내부 소스 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 « 2017/08 » 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Colored by Color Scriptercs 2. 티스토리 .. 공감수 1 댓글수 0 2015. 11. 9.
반응형 이미지 목록 만들기 간략한 반응형 이미지 목록을 만들어 보겠습니다.반응형 목록의 레이아웃 전환 기준은 가로 820px를 기준입니다. 적용된 스타일은 다음과 같습니다.1. 목록의 제목 좌우에 가로줄을 넣어 꾸미기2. 이미지 위 글씨 넣기3. 이미지 위 검은색 투명 배경 넣기4. 가로 820px를 기준으로 이미지 배열이 2열, 1열로 변화 1. 반응형 이미지 목록 - HTML 123456789101112131415161718192021222324252627282930313233343536 Category Info Daily Review Com Colored by Color Scriptercs 2. 반응형 이미지 목록 820px 이상일 때 - CSS 1234567.tit_intro{position: relative;margin-.. 공감수 4 댓글수 0 2015. 5. 30.
[티스토리] div 좌우로 나란히 정렬 div를 나란히 만드는 소스 1. 나란히 정렬 HTML 12 2. 나란히 정렬 CSS 1234567891011121314.box1 { float: left; width: 200px; height: 100px; background-color: red;}.box2 { display: inline-block; width: 200px; height: 100px; margin-left: 10px; background-color: blue;} 3. 코드 적용 결과 공감수 2 댓글수 2 2015. 5. 30.
[티스토리] 간단한 블로그 속도 향상법 Google Inspactor나 Site analysis의 권고 사항에는 html,css,js의 압축을 명시하고 있습니다. 따라서 페이지를 압축하면 비약적인 속도향상을 이뤄 낼수 있습니다. 페이지 압축을 위해 http://www.htmlcompressor.com/compressor/에 접속합니다. 여기서 자신의 skin.html, css, 그리고 자신이 사용중인 자바스크립트를 붙여 넣고 하단에 compress를 누릅니다. 옆에 속성을 설정하는 메뉴가 있긴하지만 자동인식을 하기 때문에 귀찮게 따로 선택해줄 필요는 없습니다. 조금만 기다리면 압축률과 압축된 코드가 나옵니다. 제 블로그의 html의 같은 경우 77% 압축이 되었습니다. 이로서 평소보다 더 빨리 페이지를 불러 올수 있게 되었습니다. css 뿐만.. 공감수 1 댓글수 2 2015. 5. 29.
[C++] 가상함수와 추상클래스 1. Converter 클래스를 상속받아 달러를 원화로 환산하는 WonToDollar 클래스를 작성하라.2. Converter 클래스를 상속받아 km를 mile로 변환하는 KmToMile 클래스를 작성하라. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960#include #include using namespace std; class Converter {protected: double ratio; virtual double convert(double src) = 0; // src를 다른 단위로 변환한다. virtual string getSourceStrin.. 공감수 0 댓글수 0 2015. 5. 28.
[C++] strcpy 오류 C++ 에서 strcpy 오류가 나서 빌드가 안된다면 소스 맨 윗줄에 #include 보다 더 윗줄에 #define _CRT_SECURE_NO_WARNINGS 을 추가하시면 오류가 없어집니다. 공감수 4 댓글수 0 2015. 5. 10.
[C++] 값에 의한 전달, 주소에 의한 전달, 포인터에 의한 전달 2 [C++] 값에 의한 전달, 주소에 의한 전달, 포인터에 의한 전달 2수정필요 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154.. 공감수 0 댓글수 0 2015. 5. 4.
[C++] 값에 의한 전달, 주소에 의한 전달, 포인터에 의한 전달 메모리에는 위치를 구분하기 위해 0번지부터 시작해서 일련번호가 붙여져 있는데 이것을 주소(어드레스)라고 한다.주소는 정수 형태이며 단위는 바이트이다. 컴퓨터가 데이터를 처리하려면 먼저 데이터를 메모리(램)으로 옮겨야한다. 포인터란? 컴퓨터의 메모리 번지(address)로, 데이터가 어디에 저장되어 있는지를 알려준다. C++에서는 이 포인터(변수의 주소)를 직접 사용할 수 있도록 포인터 연산자(&)를 제공한다. & (주소)* (값) 포인터 변수? 주소만을 저장한다. 포인터 변수는 선언할 때 반드시 * 기호를 덧붙여야 한다. 포인터 변수를 단독적으로 p라고 사용하는 것은 포인터값(주소)를 의미하지만, 포인터 변수에 *를 덧붙인 *p는 더 이상 주소가 아니라 해당 주소에 저장된 값을 의미한다.그래서 p에는 변.. 공감수 0 댓글수 0 2015. 5. 4.
[티스토리] 카테고리 치환자 내부 소스 티스토리에서 치환자를 사용하는 것은 간편하지만 커스터마이징이 불편하다. 내부의 어떤 클래스명이 있는지 알아보았다. 카테고리 티스토리 치환자 의 내부 소스123456789101112131415 분류 전체보기 (글갯수) 카테고리명 (글갯수) 서브 카테고리명 (글갯수) Colored by Color Scriptercs 티스토리 치환자 설명 주소 : https://tistory.github.io/document-tistory-skin/common/global.html 공감수 0 댓글수 0 2015. 5. 2.
[C++] 동적 메모리 할당 [C++] 동적 메모리 할당에 관한 코드입니다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253#include using namespace std; class Circle{ int radius;public: Circle(); Circle(int r); ~Circle(); void setRadius(int r) { radius = r; } double getArea() { return 3.14*radius*radius; } double getRadius() { return radius; } }; Circle::Circle(){ radius = 1;} Circle::Circle(in.. 공감수 1 댓글수 0 2015. 4. 21.
[C++] 생성자, 소멸자 정사각형 판별 [C++] 생성자, 소멸자 정사각형 판별에 관한 코드 입니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657#includeusing namespace std; class Rectangle{public: int width, height; Rectangle(); Rectangle(int w, int h); Rectangle(int l); int isSquare(); ~Rectangle();}; Rectangle::Rectangle(){ width = height = 1;} Rectangle::Rectangle(int w, int h){ width = w; height.. 공감수 1 댓글수 0 2015. 4. 21.
[C++] for문 사용 구구단 [C++] for문 사용 구구단 코드 입니다. 123456789101112131415161718#includeusing namespace std;void main(){ int dan1, dan2; cout dan1; cout dan2; for (int i = dan1; i 공감수 2 댓글수 0 2015. 4. 21.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.