'분류 전체보기'에 해당되는 글 236건

안녕하세요. 제임스 입니다. 

어릴적 부모님 손잡고 은행으로 가서 생에 첫 통장을 만들었던 기억이 나는데요...

사회생활을 하며 이런 저런 이유로 많은 은행 통장들을 만들었습니다. 

이제는 어떤 은행에 통장이 있는지도 기억이 안나는데요.

본인 명의로 오픈한 계좌를 은행 상관없이

한번에 정리 해주는 앱이 있어 소개 드립니다. 

금융결제원에서 서비스 하는 어카운트인포 라는 앱입니다. 

앱을 설치 후 열기 버튼을 클릭하여 앱을 실행 합니다. 

인트로 화면입니다.

특별할 것은 없지만...

이 앱이 어떤 앱인지는 명확하게 텍스트로 표기했습니다.

앱 시작전 가이드 입니다. 

최초 실행 시 공인인증서 인증이 필요 한데요.

서비스 이용 등록 프로세스 진행 전 

필요한 공인인증서 보유 여부 확인 하는 단계 입니다. 

위와 같이 공인인증서가 보인다면 

다음 단계로 버튼을 클릭하여 이동합니다. 

서비스 이용 약관 동의 화면입니다. 

이후 공인인증서 인증을 통해 본인 인증 후 

각 금융사의 본인 계좌 정보를 조회 하는 프로세스가 있는데요. 

이부분은 스크린샷 방지 처리를 해놔서 스샷 확보를 못했습니다. 

집에서 PC에 물려 두고 했어야 하는데 ㅠㅠ

실수 했습니다 ㅎㅎ;;

드디어 메인 화면입니다. 

크게 세가지 메뉴가 보입니다. 

1. My 은행계좌

2. My 자동이체

3. My 해지/변경 신청

우선 My 은행계좌 조회 하기를 해봤습니다. 

중간에 해지했던 몇몇 통장을 제외 하고도

잊고 있던 3개의 통장이 추가로 발견 되었습니다. 

심봤다!!!

아니... 돈봤다 ㅎㅎ

생각지도 못한 쏠쏠한 금액이 저금되어 있었습니다

와우!! 비자금 확보 ㅋㅋ

두번째 My 자동이체 항목 중 좌측 자동납부 조회를 선택해봤습니다. 

통장별로 걸려 있는 자동납부 내역이 조회 됩니다. 

가장 많은 13건 짜리 통장으로 들어 와봤는데요.

자동납부 걸려 있는 내역들이 보입니다. 

여기서 해지 신청 및 변경 신청이 가능 합니다. 

가끔 특별한 경우 해지신청이나 변경신청이 

불가능 한 경우가 있다고 하는데요. 

그런 경우 해당 은행으로 직접 문의를 해야 한다고 합니다. 

두번째 My 자동이체 항목 중 우측 자동송금 조회를 선택해봤습니다. 

처음 자동납부와 다를바가 없습니다. 

여기서 자동송금 한건을 취소 신청 해봤습니다. 

그리고 세번째 My 해지/변경 신청 항목을 확인 해봤습니다. 

자동송금해지 신청한 건이 1건 보입니다. 

생각지도 못한 계좌를 찾은 것도 좋지만

그 계좌에 들어 있는 돈이 너무 반가웠습니다 :)

여러분도 어카운트인포 앱을 이용하여

나도 모르게 잠들어 있는 계좌를 찾고 

같이 잠들어 있는 돈도 찾으시길 기도하겠습니다 ^^

안녕하세요. 제임스 입니다. 

앞서 개발자도구를 이용한 스타일 편집에 대한 간략한 내용 설명 했었는데요. 

이번에는 스타일 편집 시 Color 값을 변경 하는 팁에 대해 알려 드리겠습니다. 

Color Format 을 변경하는 방법에 대해 먼저 알아 보겠습니다. 

원하는 요소를 선택 시 Syle 창에 위와 같이 color 값이 표기 됩니다. 

개발 시 어떤 color format 을 사용했느냐에 따라 표기 방식이 달라지는데요. 위 예제의 경우 Hex Color Code 를 사용 하여 색상을 표기하고 있습니다. 

첫번째 이미지의 색상표기 박스(정식 명칭은 Color Picker 입니다)를 키보드의 shift 키를 누른채 마우스 좌클릭 시 Color Format 이 변경되는데, 위와 같이 RGB Color Format 을 사용하여 표기 할 수 있습니다. 

또는 HSL Color Format 을 사용할 수도 있습니다. 

위와 같은 방법을 이용하여 좀더 편한 Color Format 을 이용하여 색상을 변경 적용 해볼수 있습니다. 

Color Picker 를 이용하여 원하는 색상 직접 선택 가능합니다. 즉, 색상 코드 표를 찾을 필요 없이 원하는 색상에 가까운 색을 직접 보고 찾을 수 있습니다. 

Color Picker 를 클릭 시 위와 같이 색상값을 선택 할 수 있는 팝업이 올라 오게 됩니다. 

거의 대부분 어떤 용도로 사용 하는지 유추가 가능하니 몇가지만 설명 드리겠습니다. 

1. Eyedropper 버튼을 클릭하여 Eyedropper 를 활성화 합니다. 현재 페이지 화면상으로 마우스를 이동하여 원하는 부위를 지정하고 마우스 클릭 시 붉은 색으로 표시된 지점의 색상값으로 설정이 됩니다. 

2. 현재 색상 값을 HEX, RGBA 또는 HSL 방식으로 표기 해주며 우측 화살표를 클릭 시 Color Format 을 변경 가능합니다. 

3. 현재 선택 된 색상을 시각적으로 표현한 부분입니다. 

이 Color Picker 를 이용하여 간편하게 원하는 색상을 지정해 볼 수 있습니다. 

개발자 도구를 이용한 색상 변경하기 정말 쉽죠? ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

회식에는 

고기를 굽거나 회를 먹어야 한다는 신념으로 

똘똘 뭉친 우리 팀이

처음로 고기를 굽는 곳도 횟집도 아닌 

다른 장소를 찾아 갔습니다. 

을지로3가역 근처 평래옥이라는 곳입니다. 

점심시간이면 줄이 너무 길어 도대체 어떤 곳이길래 저럴까? 

라는 의문을 가지면서도 회식 생각은 해본적이 없었는데요

초계탕 맛집으로 유명 하고 

특히 저녁시간에도 

줄이 길다 하여 도전하기로 했습니다. 

결정 후바로 예약을 시도 했으나 

당일 예약이 안되는 것인지 

원래 예약을 안받는 것인지... 

예약은 실패...

(나중에 안 사실이지만 예약 안받는다고 합니다)

결국 업무 종료와 함께 선발대로 달려 갔습니다...

그리고 1시간 기다렸습니다 ㅠㅠ

얼마나 맛있는 집이길래....

메뉴는 그렇게 많지 않습니다. 

다른 직원으로 부터 추천 받은 

김치만두전골과 평양식쟁반을 시켰습니다. 

음식을 기다리는 중에 셋팅된 밑반찬 중 특이한 녀석이 보입니다. 

닭무침이라고 하는데요

솔직히 제 입맛에는 딱이었지만...

설탕이 많이 들어간...

맛있지만 건강하지 않은 맛이었습니다. 

기다리고 기다린 김치만두전골입니다. 

평양식쟁반입니다. 

각종 야채와 고기가 부위별로 많이 섞여 들어 갔습니다. 

그리고 가운데 양념장에 찍어 먹은 그 맛은!!!

정말 일품입니다 

안주 겸 하여 추가로 시킨 제육입니다...

아니 수육처럼 보이는데

제육이라고 하네요

아무리 봐도 수육인데 -_-

맛은 괜찮은 편이었지만 일반적인 제육을 생각하고 시켰었던지라

많이 실망했습니다.

(양은 하나 시켜서 각 테이블에 나눠서 놓다보니 적어 보이네요)

회식의 대미를 장식한 초계탕!!!

왜 초계탕으로 유명한 집인지 이거 한번 먹어보니 알겠습니다. 

사실 사진 더 건지고 싶었는데 한번 맛보고는 많이 먹어야 하는 관계로... 

추가 사진은 없는걸로 ㅋㅋ

초계탕은 정말 강추 입니다

물론 저걸 다 먹고도 모질한 감이 있어 비냉을 추가로 시켜 먹었습니다. ㅎㅎ

비냉도 괜찮았습니다. 

순전히 개인적인 소견으로 음식을 평가 하면...

닭무침: 맛있음 (설탕이 많아 건강한 맛은 아님)

김치만두전골: 맛있음 (강추)

평양식쟁반: 맛있음 (강추)

제육: 평범함

초계탕: 완전 맛있음 (초초초강추)

비빔냉면: 맛있음 

냉면은 맹목적으로 좋아 아니 추천을 못드리겠네요 ㅋㅋ

다음에는 점심시간에도 조금 일찍 나가서 도전해보고 싶습니다 ^^

안녕하세요. 제임스 입니다. 

크롬 개발자 도구를 사용하면서 자주 사용하는 것중 몇 가지를 언급하려고 합니다. 

바로 로드된 페이지 소스 수정 및 스타일 편집으로 현 페이지의 변경 사항을 미리 확인 하는 방법입니다. 

아래 이미지와 같이 Elements 패널을 이용하게 됩니다. 

물론 크롬 개발자도구에서 수정했다고 수정 내용이 지속적으로 반영되는 것은 아닙니다. 

화면이 리로드 되는 경우 개발자도구에서 수정한 내용은 사라지게 됩니다. 

화면을 리로드 하지 않는다면 원하는 소스 코드 추가 및 스타일 적용등을 통해 미리 적용될 화면을 확인 할 수 있는 아주 좋은 방법입니다. (페이지를 리로드 해도 변경 내용이 지속되도록 할 수 있는 방법이 있으나 이는 추후 언급 하도록 하겠습니다 - 일반적인 경우 화면 리로드 시 기 반영코드는 사라집니다)

DOM node 또는 텍스트등의 실시간 편집 하려면 수정하고자 하는 요소 또는 텍스트를 더블 클릭하여 수정하고자 하는 영역을 선택 후 원하는 값으로 변경 하면 됩니다. 

네이버 뉴스 목록 중 하나른 선택 하여 우측 Elements 패널에서 텍스트를 선택 하였습니다. 

그리고 위와 같이 "크롬 개발자 도구 페이지 편집" 이라는 문구로 변경후 엔터키를 치면 네이버 홈페이지 뉴스 홈의 세번째 기사 제목이 바뀐 것을 확인 할 수 있습니다 (다시 언급하지만 이는 로컬에서만 변경 된것으로 리로드 시 해당 페이지에서 제공하고 있는 원 소스가 로드 되므로 수정한 내용은 사라지게 됩니다)

스타일 실시간 편집은 Style 창에서 스타일 속성 이름과 값을 변경 하면 됩니다. 

위와 같이 컬러 값이 지정된 스타일을 아래와 같이 변경 했습니다.

실제 네이버 홈페이지에서 방문한 목록을 회색처리 하는 스타일인데요. 

제가 방문했던 목록의 색을 변경하여 아래과 같이 변경 해봤습니다. 

위와 같은 방법으로 스타일을 얼마든지 변경해 볼 수 있습니다. 화면 리로드 시 당연히 적용한 내용은 삭제 됩니다 :)

박스 모델 매개변수 검사 및 편집은 Computed 창을 통해서 진행 할 수 있습니다. 선택한 영역을 박스 형으로 표현하여 주며 각 영역의 margin 또는 padding 값등등 해당 영역를 표현하기 위해 적용된 값들을 박스 모양으로 표현해 줍니다. 

박스 내의 숫자 영역을 클릭 하여 값을 변경 할 수 있습니다. 

위 이미지는 아래 이미지의 붉은색 박스가 처져있는 부분을 나타내고 있습니다. 

박스 모델 매개변수를 변경해 보겠습니다. 

padding 부분의 top 및 bottom 영역을 각각 10 > 50, 11 > 50 으로 변경 했습니다. 

결과는 보시는 바와 같이 padding top 및 padding bottom 값이 늘어나 보입니다. 

많이 사용하게 되는 기능들이므로 잘 봐두셨다가 유용하게 사용 하시길 바라며...

재차 강조 하지만 Elements 패널에서 수정한 내용들은 화면이 리로드 되는 순간 원 소스로 복구 됩니다. 즉, 개발자 도구상에서 적용하는 스크립트, 코드, 스타일 등은 실제 소스에 아무런 영향을 미치지 못합니다. 

화면이 리로드 되어도 개발자 도구 상에서 지속적으로 적용된 모습을 확인하는 방법이 있지만, 이는 다음 기회에 포스팅 하도록 하겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

크롬 브라우저를 사용 하여 모바일 웹 개발을 할 경우 아쉬운 점이 몇 가지 있습니다.

그중 한가지가 실제 단말이 아니기 때문에 센서 및 위치정보를 사용 할 수 없다는 것 입니다. 특히 웹에서도 위치정보를 이용한 서비스를 많이 하고 있는 상황에서 정말 아쉬운 부분이 아닐수 없습니다. 

크롬 개발자도구에서는 이런 개발자들의 고충을 조금이라도 덜어주기 위해??? 위치정보 및 가속도계 센서 에뮬레이트를 할 수 있도록 지원 하고 있습니다. 

지금 부터 어떻게 사용 하는지 알아 보도록 하겠습니다. 

위치정보 및 센서 에뮬레이트 설정화면 이동은 크롬 개발자도구 설정 > More tools > Sensors 를 순차 적으로 클릭하여 Sensors 탭을 오픈합니다. 

목록에서 Sensors 를 선택 합니다. 

붉은 색 박스가 위치정보 데이터를 지정하는 화면입니다. 

아래 푸른색 박스는 가속도계 에뮬레이트 (기기방향)을 지정하는 화면입니다. 

위치정보 데이터를 설정하는 방법에 대해 알아 보겠습니다. 

No override: 위치정보 데이터를 사용하지 않음 상태 입니다. 

Drop Down List 를 클릭하여 프리셋 되어 있는 위치 정보 중 하나인 런던을 선택해 봅니다. 

정확하게 런던의 어디인지는 모르지만 대략적인 런던 어딘가의 위치정보가 설정됩니다. 

아쉽게도 한국의 위치정보는 프리셋 데이터에 없습니다. 

그래서 Custom Location 을 선택하여 임의로 위치정보를 지정해 주는 방법으로 사용 할 수 있습니다. 

위 입력 정보는 명동역 (4호선)의 대략적인 위치정보 입니다. 

이 위치정보는 많이 사용하게 되실 겁니다. 고객 위치정보 기반 서비스를 제공하는 경우라면 거의 필수적으로 알고 계셔야 할 기능입니다. 

물론 몰라도 개발 할 수 있습니다.

단말기 들고 밖으로 돌아 다니면서요... ㅎㅎ;;

가속도계 에뮬레이트 (기기방향) 설정하는 방법에 대해 알아 보겠습니다. 

Orientation 항목이 Off 로 되어 있습니다. 방향 설정을 사용하지 않는다는 의미 입니다. 

기기방향을 나타내는 값은 아래와 같이 세가지가 있습니다. 

α (알파) - z 축 기준 회전

β (브라보) - 좌우 기준 기울기

γ (감마) - 앞뒤 기준 기울기

Drop Down List 를 클릭하여 프리셋 되어 있는 정보 중 Portrait 를 선택 해보겠습니다. 

β 값이 90(도) 가 되어 이미지 처럼 서 있는 모습이 됩니다. 

프리셋 정보 외 임의의 값을 입력 해볼 수 있습니다. 

Reset 키를 눌러 이전 설정으로 돌아 갈 수 있습니다. 

특별한 경우가 아니라면 가속도계 에뮬레이트를 사용 하실 일은 거의 없습니다. 하지만 아예 없는 건 아니니 알고 있다가 필요 할 경우 사용 하면 좋겠죠? ^^

다른건 몰라도 위치정보 데이터 설정 하는 방법은 꼭 기억해서 요긴하게 사용하시길 바랍니다 :)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

모바일 웹 개발을 할 경우 모바일 단말별 특성에 맞게 개발 및 테스트를 진행 해야 하는데요. 

이때 도움이 되는 것이 바로 크롬 개발자도구의 뷰포트 컨트롤을 이용 하는 것입니다. 

이 뷰포트 컨트롤을 이용하여 반응형 및 특정 기기별 특성을 에뮬레이트 할 수 있습니다. 

뷰포트 컨트롤 이용하여 기기 선택, 화면 크기 및 화면 비율, 온/오프라인 설정 화면 가로모드/세로모드 설정을 할 수 있습니다.   

위 이미지에서 붉은 색으로 표기된 영역이 바로 Device 드롭다운 메뉴입니다.

뷰포트 컨트롤에서는 Responsive (반응형) 또는 각각의 특정 기기를 지정하는 기기별 모드를 선택 할 수 있습니다. 

반응형은 뷰포트를 양단하는 선을 클릭하여 화면 크기를 조절하여 뷰포트 크기를 자유자재로 조정할 수 있습니다.

위 이미지의 좌우측 핸들을 드래그 하여 뷰포트 사이즈 조절이 가능합니다. 

사이즈 조절 결과는 단순히 화면 상의 사이즈로만 확인 가능 한 것이 아니라 실제 화면 사이즈를 수치로도 확인 가능합니다. 

(뷰포트 사이즈를 줄여 width 값을 648 px 로 설정)

(뷰포트 사이즈를 늘려 width 값을 1176 px 로 설정)

기기별 모드는 원하는 특정 기기 (아이폰X, 넥서스5, 갤럭시S8 등등)에서 나타는 모습을 완벽하게 재현하고자 할때 사용합니다. 

(기기별 모드에서 iPhone X 를 선택한 모습입니다. )

기기별 모드에는 기본으로 프리셋 되어 제공되며 해당 기기의 특성이 에뮬레이터가 구동 될때 자동으로 구현됩니다. 

기기 프리셋 더보기 위해서는 포트뷰 컨트롤에서 Edit... 를 선택 하여 설정 화면으로 이동 합니다. 

이는 크롬 개발자도구 설정 화면 포스팅 시 언급했던 Settings > Devices > Emulated Devices 화면입니다. 

(뷰포트 컨트롤의 Edit... 를 클릭)

Settings > Devices > Emulated Devices 로 이동한 화면과 동일한 화면에서 프리셋 된 단말 목록을 확인 할 수 있습니다. 원하는 프리셋 단말을 선택 후 셋팅 화면을 종료 하면 뷰포트 컨트롤에 목록이 추가 됩니다. 

단, Device 드롭다운 메뉴에 보여지는 목록 갯수가 10개로 고정되어 있는 것 같습니다. 기존에 보여 지는 안쓰는 단말 정보를 해제 해야 추가한 정보가 보여 집니다. 

사용자설정 기기 프리셋 추가를 통해 지원되는 프리셋 단말 중 필요한 단말의 테스트를 진행 할 수 있습니다. 

Device 드롭다운 메뉴의 Edit... 를 클릭하여 Add custom Device... 버튼을 클릭하거나 

Settings > Devices > Emulated Devices > Add custom device... 버튼을 클릭하여 기기 추가를 할 수 있습니다. 

기기 명, 너비, 높이, 픽셀 비율, 기기 종류 및 User Agent 값을 설정 후 Add를 클릭하여 추가 하고 Device 드롭다운 메뉴에서 이용 할 수 있습니다. 

기기 방향설정은 가로/세로 모드를 바꾸는 토글 버튼을 클릭하여 즉시 적용 가능합니다.  

아래 이미지들은 갤럭시 S5 를 기준으로 방향설정 토클 버튼을 클릭한 결과물입니다. 

(화면 사이즈가 360 x 640 인 Portrait 로 설정)

(화면 사이즈가 640 x 360 인 Landscape 로 설정)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

자바에서 D-Day 구하는 방법에 대해 알아 보겠습니다. 

D-Day 란 오늘로 부터 특정 일자까지 남은 기간을 의미합니다. 

즉, 오늘과 특정 지정일의 차를 의미 하는 것입니다. 

앞서 두 날자 간 차를 구하는 방법에 대해 포스팅 했었습니다. 

Calendar.getTimeInMlls() 두 날자 간 차 구하기 포스팅 보러 가기 ( http://jamesdreaming.tistory.com/103 )

이를 이용하여 D-Day 구하는 코드를 작성해 보겠습니다. 

두 날자 간 차를 구하기 위해서는 Calendar Class 의 getTimeInMills() 함수를 이용하여 천분의 1초 단위까지 계산을 합니다. 

오늘 날자와 D-Day 날자 선언을 합니다. 

d_day 를 2018년 8월 19일로 설정해 보겠습니다. 

두 날자를 getTimeInMills() 함수를 이용하여 날자정보를 가져 오겠습니다. 

이때 천분의 1초단위 값이기 때문에 24시간 * 60분 * 60초 * 1000  한 값(하루의 밀리세컨 값)으로 나눠서 일단위 값을 리턴 받습니다. 

이제 이 두값의 차를 구해 보겠습니다. 

오늘 날자로 부터 남은 기간이기 때문에 큰 날자에서 빼지 않고 작은 날자 (오늘날자) 에서 빼는 것으로 하겠습니다. 

오늘 날자 (2018.1.29) 로 부터 8월 19일 까지 D-Day 결과 값은 -202 가 나옵니다. 

제대로 나온 값일 까요? 

검증 하는 방법은 앞선 포스팅 ( 날자 계산하기 - 날자 더하기 / 빼기 포스팅 보러가기 )에서 다뤘습니다. 

다시 한번 해볼까요? 

결과는 아래와 같이 나옵니다.

ret = 2018/01/29

테스트 진행한 당일 날자가 제대로 나왔습니다. 

간단하죠? ^^

D-Day 구하는 코드를 인자 값을 받을 수 있는 함수 형태로 작성하고 main() 함수에 호출 하는 예제로 풀로 작성 해 보겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

티스토리 블로그를 하나 더 만들어서 포스팅을 하려는데 이미지 업로드를 하려고 하니 

최신 버전의 Flash 플레이어를 설치 하라고 합니다...

이미 설치 해서 사용하고 있는데도 불구하고 말이죠...

이건 브라우저에 Flash 설치가 필요 한 경우가 아닙니다. 

티스토리 사이트별 설정을 진행 해야 합니다. (왜냐구요? 이미 원 티스토리 사이트에서는 아래와 같이 이미지 업로드가 잘되고 있거든요 ^^)

그러면 어떻게 하는지 알아 보겠습니다. 

1. 새로운 티스토리 포스팅 중 이미지 업로드를 위해 포터 업로더를 실행 합니다. 

이때 아래와 같은 내용으로 오류가 발생 합니다. 

Flash 설치 후에도 동작하지 않을 시 어쩌구 저쩌구 하라는 내용 신경 쓰지 마세요 ^^

2. 포토 업로더 URL 주소 창 왼쪽에 있는 ⓘ 아이콘을 클릭 하면 아래와 같은 창이 나타 납니다. 

여기서 사이트 설정을 클릭해 줍니다. 

3. 해당 티스토리 사이트에 대한 설정 창에 진입 하게 됩니다. 

Flash 를 찾아 요청(기본값) 으로 선택된 것을 허용 으로 변경해주고 창을 닫습니다.

4. 설정 창을 닫으면 화면이 리로드 되면서 아래와 같이 이미지 업로드를 할 수 있는 상태로 변경 됩니다. 

잘 쓰고 있었는데 새 티스토리 사이트 만들었더니 포토 업로더가 안된다!!!

그렇다면 위와 같은 방법으로 해결이 가능합니다. 

참 쉽죠? ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번에는 네이버 웹마스터 도구에 사이트 추가 하는 방법을 포스팅 해보겠습니다. 

사실 앞서 포스팅한 사이트 소유연장과 어떻게 보면 크게 다르지 않습니다. 

하지만 처음부터 차근차근 정리 해보도록 하겠습니다. 

1. 사이트 추가 버튼을 클릭 합니다. 

(현재 등록된 사이트는 한개 밖에 없습니다)

2. 사이트 정보 입력에 사이트 URL 을 입력 합니다. 

티스토리 프로토콜은 http:// 를 선택 하시면 됩니다. 

3. 사이트 소유 확인을 위해 HTML 태그를 선택 후 메타태그를 복사 합니다. 

4. 관리자 > 꾸미기 > HTML/CSS 편집 을 선택 합니다.

5. HTML 코드 중 <head></head> 태그 사이에 아래와 같이 복사한 코드를 붙여넣기 후 저장합니다.

6. 사이트 소유 확인 화면으로 돌아와 보안문자를 입력 후 확인을 클릭 합니다. 

7. 사이트 소유 확인이 완료 되었다는 팝업이 뜹니다. 

8. 두번째 티스토리 사이트가 등록 된 것을 확인 하실 수 있습니다. 

지금까지 티스토리를 사이트 추가 하는 방법을 알아 봤습니다. 

추후 기회가 된다면 다른 사이트들을 추가 하는 방법과 HTML 파일 업로드를 통합 소유 확인 절차 진행 하는 방법도 포스팅 해보도록 하겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

오랜만에 네이버 웹마스터도구에 접속 했더니 연동 사이트의 소유인증 만료일이 도래 했다고 나옵니다. 

이때는 소유 연장을 해야 하는데요. 

티스토리 소유 연장 하는 방법에 대해 정리해 보겠습니다. 

1. 네이버 웹마스터도구 사이트에 접속 합니다. 

http://webmastertool.naver.com

2. 등록한 사이트 목록에서 소유연장을 할 사이트의 소유연장 버튼을 클릭 합니다. 

(만료예정일이 보이는 티스토리 블로그를 선택 합니다)

3. HTML 태그 라디오 버튼을 선택합니다. 

HTML 태그를 선택 시 노출되는 메타태그를 복사 합니다. 

4. 블로그 관리자 > 꾸미기 > HTML/CSS 편집 을 선택 합니다. 

5. HTML 코드 중 <head> </head> 태그 사이에 적당한 곳에 복사한 메타태그를 붙여 넣고 저장합니다.

6. 보안문자 입력 후 확인 버튼을 클릭 합니다. 

7. 소유 확인 완료 팝업이 생성됩니다. 

8. 등록한 사이트 옆에 소유연장 이라는 버튼이 삭제 된것이 확인 됩니다.

이제 소유연장 신청이 완료 되었습니다.

이제 편안한 마음으로 원하는 작업 진행 하실 수 있습니다. ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D