Posts

Showing posts from March, 2015

HTML A tag : 페이지의 특정 위치나 맨 아래로 가기(Go to Bottom) 둥근 버튼 만드는 방법

Image
페이지가 길 때는 페이지의 맨 위로 또는 특정한 위치나 맨 아래로 가기 버튼이 있으면 편할 경우가 많다. 맨 위로가기 버튼을 만드는 방법은 앞서 설명하였고, 이번에는 특정한 위치나 페이지 맨아래로 가기 버튼을 만드는 방법이다. (맨 위로가기 버튼 만드는 방법은 링크 페이지 참조 ) 버튼을 눌렀을 때 스크롤이 되는 위치를 지정하는 일과 버튼을 만들어 원하는 위치에 붙이는 일 두 가지로 나누어 설명한다. 1. 스크롤 위치 지정 => 버튼을 누르면 어느 위치로  스크롤이 되게 하려는 지를 정한다. => 블로그나 웹페이지의 HTML 편집창에서 원하는 위치에 아래의 코드를 추가하고 저장한다. <div id='gotobottom' /> ㅇ id 이름 (위 예에서는 gotobottom) 은 기억하기 쉬운 것으로 하면 된다. 다만, 다른 곳에서 이미 지정한 이름과 중복되면 안된다. ㅇ 버튼을 누르면, 브라우저는 id가 'gotobottom'인 곳까지 스크롤다운 또는 스크롤업을 하게 된다. 아래의 그림은 구글블로그의 HTML편집창을 예로 든 것이며, 페이지의 맨 아래까지 스크롤 되도록 하고자 </body>태그 바로 위에 위치지정 코드를 넣었다. 2. 버튼 만들어 넣기 => 아래에서 보는 것처럼, 버튼으로 쓸 그림을 다루는 <IMG> 태그와 링크를 걸 <A>  태그를 묶어서 만든다. => 만든 버튼 코드를 페이지나 블로그의 원하는 위치에 붙인다. 구글블로그에서는, 블로그의 HTML가젯으로 추가하면 되고, HTML가젯의 위치는 어디에 두든 상관이 없다. 다만, 다른 가젯 보다 위에 놓으면 다른 가젯보다 시간적으로 먼저 표시된다. [지정한 위치로 스크롤되게 하는 코드] <a href="#gotobottom" title="Go to Bottom" style="display: scrol...

구글블로그 사용법: 그림 이미지의 테두리와 그림자(shadows) 꾸미기와 숨기는 방법

Image
구글 블로그의 템플릿에는 그림에 테두리와 그림자효과를 주고 있다. 블로그의 모양새와 꾸밈새에 따라  테두리와 그림자가 있는 것이 잘 어울릴 수도 있고 그렇지 않을 수도 있다. 잘 어울리지 않는다면, 아래의 CSS코드를 추가하여 설정을 변경함으로써 테두리와 그림자를 꾸밀수 도 있고 아예 없앨 수 있다. (CSS코드를 추가하는 방법은 링크페이지 참조 ) 1. 블로그 원래  설정 상태의 모습과 코드 그림에 은색 테두리와 그림자를 볼 수 있다. [블로그의 원래 상태의 코드 모양] .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { padding: $(image.border.small.size); background: $(image.background.color); border: 1px solid $(image.border.color); -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); } 2. 설정을 변경한 모습과 코드(꾸미기) [위 그림과 같이 되도록 설정을 변경한 코드 모양] .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { padding: 30px; background: #FC9E4D; border: 10px dashed silver; -moz-box-shadow: 20px 20px 100px rgba(109, 146, 15, .9); -webkit-box-shadow: 20px 20px 1...

구글블로그 사용법: 모바일 템플릿에 애드센스(Adsense) 넣고, 색상 등 최적화 하는 방법

Image
블로그의 애드센스 연동이 활성화되지 않은 상태에서도 모바일템플릿에 애드센스를 넣을 수 있다. 애드센스 계정에서 생성한 광고단위를 하나 이상 넣음으로서 블로그가 애드센스 게시자를 인식할 수 있게 한 다음에, 블로그의 애드센스 가젯을 하나 이상 넣음으로서 모바일템플릿에도 애드센스가 표시되도록 하면 된다. 다만, 연동이 활성화되지 않은 상태에서는 글(포스트)과 글 사이에 자동으로 애드센스를 넣는 기능은 되지 않는다. 모바일 템플릿에 애드센스 넣기 1. 구글 애드센스 계정에서 광고단위를 생성하여 코드를 블로그에 넣는다. 구글의 애드센스 계정에서 광고단위(Ad Unit) 코드를 생성하여 구글 블로그에 넣는 것이다. 이렇게 하면, 구글 블로그에서 애드센스 게시자를 인식하여 블로그의 애드센스 가젯을 쓸 수 있게 된다. => 블로그 대시보드 > 레이아웃 > 가젯추가 > HTML/JavaScript 가젯으로 애드센스 코드를 넣고 저장을 한다 2. 구글 블로그의 애드센스 가젯으로 애드센스를 넣는다. => 레이아웃 > 가젯추가 > 애드센스(AdSense) 가젯으로 애드센스를 블로그에 넣는다. (가급적이면 애드센스 가젯에서 색상 등을 바꾸지 말고, 애드센스 광고단위만 선택하여 추가하고, 색상 등은 애드센스계정의 애드센스 관리페이지에서 하는 것이 좋다.) => 이렇게 가젯으로 생성한 광고단위는 구글 애드센스계정의 애드센스 관리페이지에 표시되며, 이름은 "블로그 이름_애드센스가젯 위치_광고단위_as" 형태로 되어 있다. 예컨데, " 사용법어찌?_sidebar-left-2_AdSense2_728x90_as "와 같다. 위와 같이 하고, => 블로그 대시보드 > 템플릿 > 모바일템플릿(기어 모양 버튼) > 미리보기 (Preview)를 하면, 창 맨 위에 작은 광고 하나와 창 맨 아래에 사각형 광고 하나가 표시 된다. 주의할 것은, 블...

모질라 파이어폭스 사용법: 트랙킹 프로텍션 (Tracking Protection) 사용(true)과 사용안함(false) 설정 방법

Image
모질라 파이어폭스(Firefox) 브라우저의 트랙킹-프로텍션(Tracking Protection)기능을 사용하거나 사용하지 않도록 설정할 수 있다. 왼쪽 그림에서, 위는 사용하도록 설정하여 프로텍션 아이콘이 표시되어 있고, 아래는 사용하지 않도록 설하여 프로텍션 아이콘이 나타나지 않았다. 이 설정은 트랙킹-프로텍션을 사용하도록 설정을 한 상태에서, 특정 페이지에서 프로텍션이 작동하도록 하거나 작동하지 않도록 해제하는 것과는 다르다. 이 설정은 브라우저의 프로그램 코드 자체를 설정하는 것이므로, 잘 헤아려 보고 조심해서 해야 한다. 설 정 방 법 파이어폭스 브라우저를 열고, => 브라우저 창의 왼쪽 맨 위에 있는 주소(URL)창에 아래와 같이 " about:config "를 입력하고 [엔터]키를 친다. 키보드로 직접 입력해도 되고 복사해서 붙여 넣고 [엔터]키를 쳐도 된다. about:config => 열린창에서 [ I'll be careful. I promise! ] 버튼을 누른다 => 열린창의 검색창에 아래와 같이 " privacy.trackingprotection.enabled "를 입력한다. 입력을 하면 [엔터]키를 치지 않아도 해당 코드를 찾아 보여 준다. privacy.trackingprotection.enabled => " privacy.trackingprotection.enabled" 줄을 더블클릭하면, 줄 오른쪽 끝의 Value(값)이 true / false 으로 번갈아 바뀐다. 프로텍션 기능을 사용하려면 "true"로 설정하고 사용하지 않으려면 "false"로 하면 된다. => 원하는 설정을 하였으면 브라우저의 홈버튼을 누르든지 아니면 다른 사이트로 이동하면 설정된 내용이 저장이 된다. 별도의 "저장"버튼은 없다. ㅇ 이 설정은 브라우저의...

모질라 파이어폭스 사용법: 트랙킹 프로텍션(Tracking Protection) 기능 적용과 해제 방법

Image
파이어폭스에는 트랙킹 프로텍션(Tracking Protection)이라는 기능이 있고, 기본적으로 작동하도록 설정이 되어 있다. 파이어폭스가 트랙킹을 한다고 판단되는 콘텐츠를 차단하는 기능이다. 인터넷 보안에 조금이라도 신경을 쓰는 사람이라면, 악성 코드는 물론이고, 이에 못지 않은 사용자 추적(트랙킹)과 정보수집 행위가 어느 정도로 난무하고 있는 현실인지를 알 것이다. 파이어폭스에서 이를 차단할 수 있는 좋은 기능을 제공하게 된 것은 매우 좋은 일이라 하겠다. 다소 불편한 면도 있지만, 그러한 불편 정도는 얼마든지 감수할 수 있을 만큼 좋은 기능이다. 트랙킹 프로텍션 기능 적용 및 해제 방법 프로텍션의 적용상태는 브라우저 주소(URL)창의 맨 앞에 아이콘으로 표시된다. 아래의 첫번째 그림은 프로텍션 기능이 작동하도록 설정되어 있을 때의 아이콘 모습이고, 두번째 그림은 프로텍션 기능이 작동하지 않도록 해제되어 있을 때의 아이콘 모습이다. ㅇ 파이어폭스의 기본설정은 프로텍션이 작동하도록 되어 있고, 위 첫번재 그림과 같이 빨강색 사선이 없는 모양의 아이콘이 표시된다. ㅇ 방문한 현재 사이트에는 악성코드가 없다고 판단되어 프로텍션을 해제하려면 => 프로텍션 아이콘 > 옵션(Options) > 프로텍션기능 해제(Disable protection for this site)를 누른다. 그러면 위 두번째 그림과 같이 아이콘에 빨강색 사선이 표시되며, 해당 사이트의 모든 콘텐츠를 볼 수 있다. ㅇ 프로텍션을 해제한 사이트에 다시 프로텍션을 작동시키려면 => 프로텍션 아이콘 > 옵션(Options) > 프로텍션 활성화(Enable protection)을 누른다. 그러면 위 첫번째 그림처럼, 빨강색 사선이 보이지 않으며, 파이어폭스가 판단한 트랙킹 콘텐츠는 모두 차단되어 표시되지 않으므로 볼 수 없게 된다. ㅇ 파이어폭스 브라우저의 프로그램 코드 자체에서 트랙킹-프로텍션기능을 아예 사용하지 않거...

이 웹페이지는 접속이 안됩니다 This webpage is not available - Error code: ERR_CONNECTION_TIME_OUT

Image
방문하시는 여러분은 접속이 잘 됩니까? 며칠 전부터  이 블로그에 접속이 잘 되다 안 되다 합니다. 이 블로그만 그런 것인지, 구글 블로그 전부가 그런 것인지, 아니면 블로거의 인터넷에 뭔가 이상이 생긴 것인지... 파이어폭스로 접속해도 같은 현상이 나타나는 것으로 보아 브라우저 문제는 아닌 듯 하고, 다른 프로그램들이나 다른 사이트 접속은 잘 되니, 블로거의 인터넷 문제도 아닌 듯 하고.... 재접속(Reload)을 계속 누르면, 한 참 후에 접속이 된다. 마치 글이 어디에 묶여 있다가 오기라도 하는 듯이.... 접속이 원할하지 않다 보니 다른 장애도 나타난다. 블로그 글관리 > 글 목록에 Label이 제대로 표시되지 않는다

피드버너 (FeedBurner) 사용법: 부즈부스트(BuzzBust)의 로고 이미지 숨기기

Image
피드버너의 글 발행(퍼블리사이즈 Publicize) 기능 가운데 하나인 부즈부스트(BuzzBust)로 블로그나 홈페이지의 최신글목록을 만들어 블로그나 홈페이지 어느 곳에라도 달 수 있다. 그림에서 보는 것처럼 글목록 아래에는 피드버너 로고 이미지가 표시된다. 로고 이미지가 페이지에 잘 어울릴 때는 좋지만, 그렇지 않을 때는 로고 이미지가 표시되지 않게 할 필요가 있다. HTML 스타일 코드 넣기 구글 블로그에서 부즈부스트 코드는 템플릿 디자이너에서 추가하는 CSS 코드가 아니므로, "HTML 추가" 가젯으로 넣게 된다. HTML 추가가젯의 입력 란에 아래와 같이 로고 이미지가 표시되지 않도록 하는 스타일(style) 코드를 주고 그 밑에 부즈부스트 코드를 넣으면 된다. <style> div  #creditfooter{ display: none; } </style> 여기에 부즈부스트 HTML 코드를 넣음 ※ 참고:  피드버너 가입 방법과 부즈부스트로 블로그나 홈페이지의 최신글 목록을 만드는 방법에 대한 자세한 설명은 링크 페이지를 참조 하면 된다. 피드버너는 구글 블로그에서는 가젯을 통해 쉽고 간단하게 쓸 수 있고, 구글 블로그를 사용하지 않더라도 누구나 사용할 수 있다. >> 피드버너 사용법 글 목록 도움이 되기를 바랍니다.

모질라 파이어폭스 사용법: 애드온(Add-ons) 확장프로그램(익스텐션) 설치와 삭제하는 방법

Image
모질라 파이어폭스에 추가하여 쓸 수 있는 작은 프로그램인 애드온 익스텐션(Extensions)들이 많이 있다. 종류도 많고 수도 많아 찾기가 어려울 지경이지만, 좋은 애드온을 추가하여 사용하면 편리한 경우가 많다. 애드온을 설치하는 방법은 => 브라우저 오른쪽 맨위의 사각형 아이콘 > 애드온(Add-ons) => 열린 애드온 창에서, 왼쪽의 맨위에 있는 상자모양의 아이콘(Get Add-ons) => 페이지 오른쪽 위에 있는 검색기로 찾아도 되고, 검색기 아래에 있는 [모두보기: See all] 링크를 눌러 카테고리별로 분류된 애드온 페이지에서 찾아도 된다. => 추가하고자 하는 애드온의 [파이어폭스에 추가: Add to Firefox] 버튼을 누르면 설치된다. 애드온은 작고 가벼워서 순식간에 설치가 되고, 애드온에 따라서는 브라우저를 재실행해야 하는 경우도 있다. 애드온 삭제하는 방법은 => 설치할 때와 마찬가지로, 브라우저 오른쪽 맨위의 사각형 모양 아이콘 > => 왼쪽 도구상자에서 두번째의 [확장프로그램: Extensions] > => 삭제하고자 하는 애드온의 [삭제: Remove] 버튼을 누른다 도움이 되기를 바랍니다.

HTML FONT tag: 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법

Image
폰트에 속성을 주는 방법은 <font >태그와 다른 태그 안의 스타일(style) 속성 두 가지를 쓸 수 있겠다. 이전에는 폰트를 적용할 때 <font > ~~ </font>와 같이 하였는데, HTML5에서는 <font>태그를 지원하지 않는다. 물론, HTML5가 일반화되고 브라우저 버전이 올라가도 이전에 만들어진 HTML 문서의 <font>태그는 이상없이 작동을 할 것이므로 걱정할 일은 아니다. 단지, 앞으로 만드는 HTML문서는 가급적이면 스타일(style) 속성으로 주는 것이 낫지 않을까 싶다. <font> ~ </font>태그로 속성주기 [ 예 ] <font size="2em" color="green"> 이 글자는 font 태그로 속성을 주었다 </font> [실제 적용한 모습] 이 글자는 font 태그로 속성을 주었다 위에서 <font>태그를 설정한 내용과 실제 적용된 모습이 다르다. 이렇게 된 이유는, 구글블로그는 페이지 첫머리에 <!DOCTYPE HTML>로 선언하여  HTML5가 적용되기 때문이고, 위의 예에서 준 <font> 태그를 강제로 스타일 속성으로 바꾸어 적용하기 때문이다. <span style ="color: green;"> 이 글자는 태그로 속성을 주었다 </span> 스타일(style)로 속성주기 스타일(style)은 <div> <p> <span> 등과 같이 여러 태그에서 쓸 수 있다. (각 태그에 대한 자세한 설명은 링크페이지를 참조 ) <div style=" ~~ "> </div> <p style=" ~~ "> </p> <span style=" ...

검색엔진별 유입(방문자) 순위 - 티스토리 블로그

Image
사이트나 블로그의 특징, 검색엔진 등록, 소셜네트워크 연동 등등에 따라 다르겠지만, 방문자 가운데 많은 수가 검색엔진을 통해서 들어오리라 짐작된다. 구글은 많은 나라에서 압도적 위치를 가지고 있지만, 한국이나 중국 등의 나라에서는 그렇지 못하다고 한다. 수년 전에 티스토리에서 작은 블로그를 하다가 그만 두었는데, 참 오랜만에 로그인을 해 보았다. 관리자 창의 방문자 통계란을 보니, 구글이 33%를 차지하고 있지 않은가. 블로그를 하던 그 때는 구글을 통한 방문자 비중이 아주 미약했었고, 최근에 발표되는 한국에서의 구글검색엔진 점유율을 보더라도 고개가 갸우뚱해지는 수치다. 해당 블로그는 구글 웹마스터 도구에 사이트맵을 등록해 놓았었다. 단순히 이것만을 가지고 구글의 비중이 얼마다 라고 말할 수는 없지만, 비중이 상당히 높아지고 있지 않은가라는 추측을 해본다. 도움이 되기를 바랍니다.

파이어폭스 라이트빔 - 누가 내 브라우징 내역을 수집하는지를 보여주는 애드온

Image
온라인에서 인터넷 서핑을 하면, 본인이 원하든 원하지 않든, 그 브라우징 내역을 수집하고 들여다 보는 제3자가 있다. 사이트에 따라서는 그 수가 적은 곳도 있고  깜작 놀랄정도로 많은 곳도 있다. 라이트빔은 내 브라우징 내역을 수집하는 제3자를 그림지도(Graph)로 또는 목록(List)으로 볼 수 있게 해주는 애드온이다. 지난 2월 초에 버전이 업그레이드 되었고, 라이트빔을 설치한 수가 3백6십만을 넘어 섰다. 업데이트가 되었으니 기능은 더 좋아졌겠지만, 사용방법은 이전 버전의 틀을 그대로 유지하고 있으므로, 사용방법은 이전의 글을 참조하면 되겠다. 파이어폭스 애드온 라이트빔 사용방법 - 누가 내 인터넷 사용을 모니터링하는지 보여주는 애드온 파이어폭스 애드온 익스텐션 설치와 삭제하는 방법 도움이 되기를 바랍니다.

구글블로그 사용법: 다이나믹뷰(DynamicView) 포스트 이미지 크기 자동 조절 - 크롬과 파이어폭스

Image
브라우저에 따라 같은 페이지도 다르게 보이는 예다. 이 블로그에 적용된 템플릿은 다이나믹뷰 템플릿이다. 같은 페이지를 구글크롬으로 볼 때와 모질라 파이어폭스로 볼 때 차이가 있다. 그림의 윗쪽은 크롬이고, 아래쪽은 파이어폭스이다. 크롬에서는 브라우저의 폭을 줄이면 본문의 글(텍스트)과 그림이 같이 줄여지지만, 파이어폭스에서는 글(텍스트)은 줄여지지만 그림은 그대로 있다. 왜 그런지를 정확하게 알지는 못하기에 그 해결책 또한 모르지만, 이 페이지를 올리는 것은 구글블로그의 다이나믹뷰 템플릿을 사용하는 블로거들에게  참고가 될 듯 하여서이다.

구글블로그 사용법: 투명한 블로그 타이틀 그림 이미지 - 픽슬러로 투명한 그림, 투명한 로고 만들기

Image
블로그의 꾸밈새에 따라 블로그 타이틀 이미지의 배경을 투명하게(transparent) 하는 것이 잘 어울릴 때가 있다. 그림의 배경을 투명하게 만드는 프로그램이나 온라인 페이지는 꽤 많이 있지만 대체로 유로다. 무료이면서 쓸 만한 곳 가운데 하나가 픽슬러(PIXLR)인 듯하다. 아래은 필슬러를 사용하여 블로그 타이틀 이미지를 투명하게 만드는 방법이다. [블로그 타이틀 이미지 배경을 투명하게 만들어 적용한 모습] 투명하게 하지 않은 경우와 차이를 보이기 위해 법자의 ㅂ과 어자의 ㅇ은 투명하게 하지 않고 그냥 두었다. [배경을 투명하게 하기 위해 만든 블로그 타이틀 이미지] 투명화 작업을 할 때 미세한 부분은 작업이 쉽지 않기 때문에 실제 사용할 이미지 보다 훨씬 크게 만들어 투명화 작업을 한 다음에 이미지 크기를 조절하는 것이 편하다. 위의 실제 적용된 이미지의 크기 보다 아래의 준비한 이미지가 훨씬 더 큰 것은 그래서이다. 필슬러(PIXLR)로 이미지 투명하게 만들기 우선 링크한 픽슬러 에디터 페이지로 간다. PIXLR Phot Editor http://apps.pixlr.com/editor/ 1. 필슬러 접속 및 그림 불러 올리기 필슬러 에디터에 접속하여 투명화 작업을 할 이미지를 불러 올린다. 2. 언어설정 - 한글 메뉴의 언어를 한글로 설정한다. 그냥 '영어'로 두어고 작업해도 상관은 없으니 편한대로 하면된다. 3. 배경 투명화 : 영역선택 > 편집 > 반전선택 > 복사 => 왼쪽 도구상자에서 마술봉 아이콘을 클릭한 다음, 투명화 하고자 하는 배경에 마우스 포인트를 놓고 클릭한다. 그러면 배경부분이 흐르는 점선으로 표시된다 => 메뉴의 편집 > 반전선택 > 복사를 누른다, 곧, 지정된 부분의 배경색을 투명화 하였고, 그 결과를 클립보드에 임시 저장하는 것이다 4. 임시저장된 이미지 새창에 불러오기 => 메뉴의 파...

구글블로그 사용법: 블로그 타이틀(제목) 이미지 올리고 설정하는 방법

Image
블로그 타이틀(이름 또는 제목)에 그림 이미지를 만들어 올리려면; => 블로그 대시보드에서 레이아웃(Layout) 설정 페이지로 간다 => 블로그 타이틀 가젯의 [편집(Edit)]을 눌러 가젯을 연다 ㅇ From your computer : 컴퓨터에서 그림을 불러 올린다. [Browse...] 버튼을 누르면 그림을 선택하는 윈도우 창이 열린다. ㅇ From the web... : 웹서버에 있는 이미지를 불러 온다. 네모 입력상자에 그림의 주소(URL)을 입력한다. Placement (이미지 위치 설정) ㅇBehind title and description : 이미지가 블로그 타이틀(글자)과 설명문구의 배경으로 들어간다. 곧, 블로그의 이름과 설명문구가 그림위에 위치한다. ㅇ Instead of title and description : 이미지가 블로그 타이틀과 설명문구 위에 위치한다. 곧, 블로그 이름과 설명문구는 이미지에 덮여 보이지 않는다. ㅇ Have a description placed after image: 이미지를 놓고 그 뒤에 블로그 설명문구를 놓는다. 이미지가 작은 경우에 설정할 수 있는 옵션이다. => 저장을 눌러 설정을 저장한다. 도움이 되기를 바랍니다.

구글블로그 사용법: 블로그 페이저 (blog-pager) 네비게이션(Home, Newer post, Order post) 글자 폰트 꾸미는 방법

Image
블로그 글을 이동하는 Home(홈) Newer Post(최근게시물) Order Post(이전게시물) 네비게이터의 글자체 크기 배경색 이미지 등을 조절하여 꾸미려면 아래와 같은 CSS 코드를 추가하여 쉽게 할 수 있다. 위 그림의 첫 번째 모양은 아무것도 꾸미지 않은 모습이고, 두 번째 모양은 글자 크기를 조금 키우고 굵게 지정한 모습이고, 세 번재 모양은 두 번째 모양에 바탕색을 녹색으로 주고 테두리를 둥글게 지정한 모습이다. [두 번째 모양에 준 CSS 코드] .home-link, .blog-pager-older-link, .blog-pager-newer-link { font-size:1.2em; font-weight:bold; } [세 번째 모양에 준 CSS 코드] .home-link, .blog-pager-older-link, .blog-pager-newer-link { font-size:1.2em; font-weight:bold; background-color:green; border-radius:50px; } 링크를 지정하는 코드와 속성 링크를 지정하는 코드는 아래와 같고, 둘 이상을 한꺼번에 지정하려면 코드와 코드 사이에 콤마(,)를 넣어 주면 된다. 꾸미고자하는 링크 코드를 지정하고, 잘 어울리는 속성 항목을 추가하여 조절하면 된다. [각 링크를 지정하는 코드] .home-link {여기에 속성을 줌} .blog-pager-older-link {여기에 속성을 줌} .blog-pager-newer-link {여기에 속성을 줌} [모두 한꺼번에 같은 모양으로 지정] .home-link, .blog-pager-older-link, .blog-pager-newer-link { 여기에 꾸미고자 하는 속성을 준다 } [링크를 꾸미는 속성]  아래는 많이 쓰이는 속성들을 열거한 것이므로, 그 외의 HTML 속성들을 써서 꾸미면 된다. font-family: Arial ...

블로그 사용법어찌 소개 - howways.blogspot.com

Image
블로그 사용법어찌 는  온라인과 오프라인의 여러가지 프로그램과 기기 사용방법을 설명하는 실용적이고 유익한 블로그다. 하나하나 그림과 함께 설명을 하고 있어 누구라도 쉽게 이해할 수 있도록 되어 있고, 구글블로그 구글플러스... 등과 같이 항목을 잘 나누어서 글을 묶은 카테고리가 제공되어 글을 찾기도 편하다. 강력한 구글검색기에 더해 자체적인 검색기도 있다. 사용법어찌는 구글의 여러가지 제품(메일계정, 플러스, 블로그, 드라이버, 포토 등등), 텀블러 등을 주로 다룬다. 블로깅을 하다 보면 기초적인 HTML 지식이 필요할 때가 많다. 이럴 때는 이 블로그 만한 곳이 없다고 할 수 있을 정도로 잘 설명되어 있다. 또한 세계적으로 가장 널리 쓰이고 안정성이 검증된 메타트레이더(MT4) 사용법도 그림은 물론 비디오까지 첨부하여 자세히 설명하고 있고,  많은 사람들이 관심을 가지고 있는 비트코인의 개념 특성 장단점 그리고 주의사항까지 잘 정리되어 있다. 그 외에도 각종 순위자료, 등등 아주 다양한 실용적인 정보들이 많다. 블로그 사용법어찌? 주) 이 페이지는 다른 블로그에서 소개했던 것을 옮겨 온 것이다.

파이어폭스 브라우저 크래쉬(Crash) 오류 대응 방법

Image
모질라 파이어폭스(Mozilla Firefox) 브라우저가 며칠 전부터 찌그러지는(Crash) 오류가 나곤 한다. 어떤 상황에서 그렇게 되는 지는 알 수 없다. 다만, 경험상으로 보면 특히 그림(이미지) 아래에 마우스를 놓고 백스페이스키(←)를 연속으로 눌러 그림을 지울 때 오류가 나는 것 같다. 구글 블로그에서 글을 쓰다가 이러한 기능장애를 몇 번 겪었다. 대응은 다음과 같이 하였고, 쓰던 글이 없어진 적은 없다. => 다른 작업을 하지 않고, 바로 바탕화면의 파이어폭스 아이콘을 눌러 브라우저를 켠다 => 그러면, 글을 쓰던 구글블로그의 글 작성페이지에 다시 접속이 되고, 로그인 상태도 그대로 유지가 된다. => 쓰던 글을 안전하게 저장하고, 구글 계정에서 로그아웃을 한 뒤에 파이어폭스를 정상적으로 끈다. => 다시 파이어폭스를 켜서 글 쓰기를 계속한다. ※ 블로그 글쓰기 창에는 아무 이상없이 접속이 되지만, 구글 계정의 다른 제품(이메일, 구글플러스....)으로 이동하면 로그인 상태가 해제되어 다시 로그인을 해야 한다. 어째서 그렇게 되는지는 알 수 없지만, 쓰던 글을 잃은 적이 없으니 다행이라고 해야겠다.

구글블로그 사용법: 블로그 최상단에 액센트(색상 있는 가로줄) 넣는 방법

Image
블로그의 최상단에 가로줄을 넣고 색상을 주어 블로그를 꾸미려면, 아래와 같이 CSS코드를 추가하고 블로그에 잘 어울리도록 속성을 조절하면 된다. [블로그 상단 액센트 주기 CSS] body {border-top: 5px solid #93C90B;} ㅇ border-top: 선굵기 선종류 선색상 ㅇ 선(border)에 관한 자세한 내용은 링크페이지 참조1   링크페이지 참조2 ㅇ CSS코드 추가하는 방법은 링크페이지 참조

구글블로그 사용법: 글 발행예약상태 표시창 - 구글 블로거에 바라는 점

Image
구글 블로그의 글 발행 예약기능에 "예약상황을 보여주는 창"이 표시되면 좋겠다. 그러니까, 이 글은 사용법이 아니라 구글에 건의하는 글이 되겠다. 1) 글 쓰기 창에서 발행시각 설정으로 들어가면 예약된 글 제목과 날짜 시각을 보여주는 창을 만들어 주면 좋겠다. 2) 예약된 글 보기창에 날짜와 함께 시각도 같이 표시해 주면 좋겠다. [ 1) 글 예약 상황창] [ 2) 예약된 글 시각도 표시] ㅇ 날짜와 함께 시각도 표시되는 것이 좋겠음. ㅇ 발행 시각이 가까와 진 글은 시각만 표시되는 것을 날짜와 시각을 같이 표시하되, 글자 색을 다르게 하는 것이 더 좋을 것 같음 구글 블로그 글 예약기능이 더 발전 되기를 바라면서...

글 공유, 좋아하기, 댓글 늘리는 방법 - 페이스북

Image
페이스북에서 글 공유나 좋아하기 그리고 댓글을 늘리는 방법을 담은 정보그림(Infographic)이 있어 올린다. 14가지 기법을 말하고 있는대, 그 모두를 념두에 두고 글을 올리기는 쉽지 않을 것 같고, 그 가운데 한 가지 또는 두어 가지라도 념두에 둔다면 도움이 되겠다 싶다. 원본 정보그림 주소: https://www.pinterest.com/pin/46373071137808624/ 도움이 되기를 바랍니다.

구글블로그 사용법: 댓글창의 Post a Comment 문구 숨기기(지우기)

Image
구글 블로그의 댓글 창에 표시되는 " Post a Comment " 문구가 블로그에 잘 어울리지 않는다면, 아래 그림처럼 숨겨서 표시되지 않도록 할 수 있다. Post a Comment 문구 지우는 방법 => 블로그 대시보드 > 템플릿(Template) > HTML편집 (Edit HTML) 버튼을 눌러 편집창을 연다 => html 코드가 있는 영역의 아무 곳에나 마우스를 한 번 클릭하여 편칩창을 활성화 한다 => 키보드의 [컨트롤 + F]키를 쳐서 검색창을 연다. 검색창은 편집창 오른쪽 맨위에 표시된다 => <data:postCommentMsg/>   를 복사하여 검색창에 붙여 넣고 엔터키를 친다. 그러면 그림과 같이 해당 코드가 있는 곳으로 이동하여 노랑색으로 표시가 된다. => 노랑색으로 표시된 <data:postCommentMsg/> 부분을 지운다(삭제한다). 그림에서 보듯이 두 곳에 있고, 두 곳 모두 지운다. => 편집창 맨 위의 저장(Save template) 버튼을 눌러 저장을 하면 된다. [코드 부분] <h4 id='comment-post-message'>         <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'> <data:postCommentMsg/> </a></h4>       <p><data:blogCommentMessage/></p>       <data:blogTeamBlogMessage/>  ...

페이팔 한국어 서비스 시작 (PayPal, Korean Language Content)

Image
페이팔(PayPal)이 한국어로 된 페이지를 제공하기 시작했다. 국제적 온라인 결제시스템에서 페이팔이 어느 정도 위치에 있는지는 모르겠지만, 상당히 많이 알려지지 않았는가 싶다. 그러한 페이팔이 한국어로 된 페이지를 만들어서 제공한다는 것은 무슨 뜻인가? 한국인 사용자들이 그 만큼 많아서 일 수도 있고, 앞으로 그렇게 보기 때문일 수도 있다. 어쨌거나 사용자들에게는 편한 일이다. 한국어 버전에 접속하는 주소는 paypal.com/kr 이다.

예쁜 큐알코드(QR Code) 무료로 만들기 - 개인정보 요구하지 않는 곳

Image
바코드에 이어 큐알(Quick Response)코드가 점점 늘어 가는 것 같다. 바코드에 비해 더 많은 정보를 담을 수 있고, 숫자, 알파벳, 한자 등의 문자도 담을 수 있어, 활용도가 더 넓다. 이름, 주소, 전화, 이메일, 홈페이지 주소... 등을 담아서 만들기도 한다. 만드는 것도 쉽고 쓰기도 간편하지만, 유출되어도 문제될 것이 없는 지를 먼저 헤아리는 것이 순서일 것이다. 코드를 무료로 만들 수 있는 곳은 온라인상에 많이 있다. 그 가운데는 이름 주소 전화번호 등등의 개인정보를 요구하는 곳에서 부터 단지 홈페이지 주소만으로 코드를 만들 수 있는 곳도 있다. 빠르고 쉽게 그리고 깔끔한 QR코드를 특별한 개인정보 없이 홈페이지나 블로그 주소만으로 만들 수 있는 곳을 소개 한다. 뷰티풀 큐알 코드 Beautiful QR Codes http://www.beautifulqrcodes.com/ => Text라고 표시된 입력상자에 홈페이지나 블로그 주소를 입력하고 => 색상을 선택한 다음 => 만들기(Generation) 버튼을 누른다 => 만들어진 QR코드 위에 마우스를 놓고, 오른쪽 버튼 클릭 > "그림(이미지) 저장"을 선택하면, 자신의 컴퓨터에 내려 받을 수 있다. 유니태그 Unitag https://www.unitag.io/qrcode => 큐알코드 형식(QR Code type)은 쓰고자 하는 용도에 맞게 선택한다. 기본은 웹 및 소셜 네트워크로 되어 있다. => 그 아래 상자에 홈페이지나 블로그 주소를 입력한다 => 확인(Confirm)을 누르면 오른쪽에 큐알코드가 만들어 진다 => 색상 등을 꾸미려면 아래에 있는 꾸미기(Customization)란에서 하면 되고, 굳이 그럴 필요가 없으면 하지 않아도 된다 => 내려받기(Download the QR Code) 버튼을 눌러 자신의 컴퓨터로 내려 받는다. 아...

구글블로그 사용법: 모바일템플릿 꾸미기 - 테두리 배경 색상 폰트 버튼 등을 꾸미는 방법

Image
구글 블로그에서 제공하는 템플릿에는 기본적으로 모바일 템플릿이 포함되어 있으므로, 방문자가 스마트폰 등의 모바일 기기로 접속을 하면 자동으로 모바일 템플릿이 적용된다. 모바일 템플릿을 잘 어울리도록 꾸미려면 CSS 코드를 만들어 추가하면 간단하고 쉽다. (CSS 코드를 추가하는 방법은 링크 페이지 참조 ) CSS 코드 예 CSS코드를 만드는 방법은 꾸미고자 하는 모바일템플릿 요소에 필요한 속성만을 넣어 주면 된다. 모바일템플릿의 요소와 요소에 설정할 수 있는 속성들은 아래쪽에 정리하였다. 모바일 템플릿 요소에는 앞에 " mobile "이 붙어 있다. 포스트-아웃트의 배경색을 흰색(#ffffff)으로 설정한 예 .mobile .post-outer { background: #ffffff; } 포스트-아웃트의 배경색을 흰색(#ffffff)으로 그리고  테두리의 모서리를 둥글게 설정한 예 .mobile .post-outer { background: #ffffff; border-radius: 5px;} 모바일 템플릿 요소 아래의 요소들 가운데, 꾸미고자 하는 요소만 쓰면 된다. .mobile .content-inner{ } .mobile .header-outer{ } .mobile .main-outer { } .mobile .tabs-inner .PageList .widget-content { } .mobile .tabs-inner .PageList .widget-content .pagelist-arrow { } .mobile .date-outer {} .mobile .post-outer { } .mobile-index-contents { } .mobile-link-button { } .mobile-link-button a:link { } .mobile-link-button a:hover { } .mobile-link-button a:visited { } .mobile-link-b...

구글 검색: 특정 블로그나 사이트의 글 쉽게 찾는 방법

Image
사이트나 블로그의 검색창에서 글을 찾기가 쉽지 않을 때는 구글 검색을 활용하면 쉽게 찾을 수 있다. 방법은 2가지를 들 수 있겠다. 방 법 1 구글 검색창에 "블로그 이름(또는 사이트 이름)  찾고자 하는 키워드"를 입력하고 찾기를 하면 해당하는 글을 재빨리 찾아 준다. 다만, 구글검색엔진에 아직 등록되지 않은 최근의 글은 검색되지 않는다. 예) 이 블로그의 글 가운데 "사이드바의 위치를 조정하는 방법"에 관한 글을 찾으려면, 아래와 같이 이 블로그의 이름인 "사용법어찌"와 찾고자 하는 글의 키워드인 "사이드바 위치 조정"을 입력하고 검색을 하면 된다. 사용법어찌 사이드바 위치 조정 아래 그림은 실제로 위와 같이 검색한 결과이다. 방 법 2 구글 검색창에 아래와 같이 "site:블로그 주소(또는 사이트 주소)  찾고자 하는 키워드"를 입력하고 검색을 하면 된다. 이 경우도 구글검색에 등록되지 않은 최근의 글은 검색되지 않는다. 이 방법은 위의 방법1과는 달리 블로그나 사이트의 주소(URL)를 직접 그리고 명확하게 지정하여 검색하게 되므로 오로지 지정한 블로그나 사이트에서만 찾아서 보여준다. 예) naturalnews.com 사이트에서 vaccination에 관한 글을 찾으려면, 아래와 같이 "site:"와 함께 사이트 주소인 "naturalnews.com"과  찾고자 하는 키워드인 "vaccination"을 입력하고 검색을 하면 된다. ㅇ 키워드는 하나만 쓸 수 있는 것이 아니므로, 가급적이면 두어개를 입력하는 것이 보다 정확한 글을 찾을 수 있다. ㅇ site 다음에 있는 부호는 콜론( : )이다. site:naturalnews.com vaccination 아래 그림은 실제로 위와 같이 검색한 결과이다 도움이 되기를 바랍니다.