Posts

HTML IMG tag 사용법 : 그림 이미지 크기 조절 방법, 좌우 가운데 정렬 방법, 여백 설정 방법, 기타 속성 설정 하기

Image
웹페지에 HTML <Img> 태그로 그림 이미지를 넣을 때, 이미지 좌우 정렬, 이미지 크기 조절, 이미지 여백을 조절하게 됩니다. 방법은 스타일(style) 속성을 주면 간단하게 할 수 있습니다.


1. 그림 이미지 넣기

기본 태그 모양
<img src="여기에 이미지 주소(URL)를 적으면 됩니다." />
실제 예
<img src="https://1.bp.blogspot.com/pink-rose-250x250.png" />


참고: 태그 끝에 빨강색으로 표시한 / 는 <img ~~ 태그를 마무리 하는 것입니다. / 가 없어도 대부분 무리없이 작동을 하지만, / 가 없으면 오류가 나는 경우도 있습니다. 특별한 사정이 없다면, 태그 규칙에 맞게 / 를 넣어 주는 것이 더 낫지 싶습니다.
참고: <img src = ~~ 에서, img는 image [이미지]의 약칭이고, src는 source [소스]의 약칭입니다.




2. 이미지 크기 조절 하기

위에서와 같이 이미지를 불러 오면, 원래의 크기대로 표시가 됩니다. 페이지에 잘 어울리도록 이미지 크기를 조절하려면, 아래와 같이 스타일(style) 속성에서 너비(width)와 높이(height)를 지정해 주면 됩니다.

태그 모양
<img
src="이미지URL"
style="width:100px; height:100px;"
/ >
실제 예
<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="width:100px; height:100px;"
/ >


참고: 위와 같이 하면, 페이지에 불려지는 이미지는 원래 크기 그대로 이지만, 방문자가 보는 페이지에서는 속성에서 지정한 크기로 표시됩니다. 이미지 크기는 페이지 로딩 속도에 미치는 영향이 상대적으로 크다 할 수 있습니다. 그러므로, 이미지를 필요 …

푸바 2000 음악 플레이어 사용법 - 포터블 무설치 버전 다운로드 및 실행 방법 Foobar2000 Portable installation

Image
음악 재생 플레이어 가운데서, 아마도, 푸바 만큼 지속적으로 인기를 유지하는 경우는 거의 없지 않을까 싶습니다.

프로그램을 컴퓨터에 설치하지 않고, 이동식 저장장치에 저장해서, 가지고 다니면서 사용할 수 있는 버전을 흔히들 포터블(portable) 버전이라 하는 것 같습니다. 작은 메모리나 USB 같은 데에 음악 파일들과 함께 푸바 2000 포터블 버전을 저장하면, 늘 같은 조건에서 음악을 들을 수 있어 좋습니다.

푸바 2000 포터블 버전을 사용하려면, 푸바 2000 파일을 다운로드 하여, exe 파일을 실행 할 때에, 포터블 버전을 선택하면 됩니다.

푸바는 포터블 버전과 설치 버전이 따로 구분되어 있지 않고 함께 들어 있습니다.
다운로드 한 exe 파일을 풀 때에, 컴퓨터에 설지할 지 아니면, 포터블 버전으로 할 지를 선택할 수 있도록 되어 있습니다.

>> 푸바 2000 최신버전을 다운로드 한다
참조: 푸파 2000 다운로드 페이지 http://www.foobar2000.org/download
참조: 푸바 2000 다운로드와 설치 방법 설명 페이지

>> 다운로드한 실행파일 (foobar2000_v1.xx.exe)을 실행(더블 클릭)한다.
다운로드한 파일은 특별히 경로를 지정하지 않으면, 대체로 윈도우 탐색기의 다운로드(Down load) 폴더에 저장되어 있습니다.

>> 아래 그림에서 보듯이, 세 번째 단계에서, 무설치 포터블 버전 (Portable installation)을 선택하고, 진행하면 됩니다.



이 3 번째 단계에서, 
위쪽 컴퓨터 설치 (Standard installation)와 아래쪽 포터블 설치(Portable installation) 가운데서, 아래쪽 Portable installation의 동그라미를 마우스로 클릭하여 선택하고, [다음 (Next)] 버튼을 클릭하여 진행하면 됩니다.


>> 푸바 2000 음악 플레이어 Foobar2000 사용법 글 목록

HTML A tag: A 링크 태그에 직접 스타일 속성 지정하는 방법 - 색상 글꼴 밑줄 배경 온마우스

Image
블로그나 웹페이지에서, <A> 링크 태그의 속성은 헤드(head)에서 설정하여 일괄적으로 적용되는 것이 일반적이지만, 특정한 링크에만 다른 속성을 줄 필요가 있을 때는 아래와 같이 해당 링크에 직접 속성을 줄 수 있습니다.


[<A> 링크에 직접 스타일 속성 주기]
<a href="ojji.wayful.com" style="속성 지정">사용법어찌</a>
스타일 속성에는 여러가지가 있고, 원하는 속성을 지정하면 됩니다.
예)
글자 색상 속성 =>  color: red; 
글자 꾸밈 속성 =>  text-decoration: none;
글자 크기 속성 =>  font-size: 1.5em;
글자 굵기 속성 =>  font-weight: bold;
배경색상 속성 =>   background: #eee;


[<A> 링크에 직접 스타일 속성을 준 태그 모양]
<a
href="ojji.wayful.com"
style="
color: orange;
font-size: 2.0em;
font-weight: bold;
background: #efefef;
"
>사용법어찌</a>
[위와 같이 <A> 링크에 직접 스타일 속성을 준 실제 모습]
사용법어찌
[참고: 개별적으로 속성을 주지 않고,  <A> 링크에 기본 속성이 적용된 모습]
사용법어찌



[특정 페이지 안에서 여러 개의 링크에 같은 속성을 주는 방법]

특정한 하나의 페이지 안에, 여러 개의 <a>링크가 있고, 해당 페이지 안의 여러 개의 링크에 일괄적으로 같은 속성을 줄 필요가 있을 때는, 페이지 맨 위에 CSS로 클래스(class)를 설정하여 적용하면 편합니다.

아래에서, 빨강색으로 표시된 soksung 은 클래스 이름이고, 이름은 다른 클래스나 아이디(ID) 이름과 중복되지 않게 임으로 붙이면 됩니다. 클래스 이름 앞…

구글 블로그 사이드바 모바일 숨기기, 데스크탑 보이기, 모바일 속도 빠르게

Image
구글 블로그 반응형 테마는, 모바일로 접속하면 사이드바가 접히고 상단에 햄버그 아이콘이 표시됩니다. 화면에 사이드바가 보이지는 않지만, 사이드바 내용을 로딩 하므로, 블로그 로딩 시간이 많이 걸리게 됩니다.

사이드바 내용이 많거나 큰 용량의 이미지가 있어, 페이지 로딩 속도가 문제 된다면, 모바일에서는 사이드바를 로딩하지 않도록 하는 방법도 생각해 볼 수 있겠습니다. 방문자가 햄버그 버튼을 눌러 사이드바 내용을 빈번하게 사용하는지를 잘 헤아려 볼 필요가 있습니다.

방법은 간단합니다.
사이드바 영역에 아래와 같은 조건을 설정해 주면 됩니다.

cond='data:blog.isMobileRequest == "false"'


>> 블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML) 버튼을 눌러, HTML 편집창을 엽니다.
>> 창의 아무곳에나 마우스를 놓고, 한 번 클릭하여, 창을 활성화 시킵니다. > 키보드의 [컨트롤 + F]키를 쳐서 검색상자를 엽니다.


>> 검색상자에 <aside 를 입력하고, 엔터키를 쳐서, 해당 위치로 이동하여, 조건을 설정하는 코드를 넣습니다. <aside> </aside> 는 사이드바 영역입니다.

위 그림에서 보듯이,  사이드바 코드는 아래와 같은 모양으로 되어 있습니다.
<asideclass='sidebar-container container sidebar-invisible' role='complementary'>
      <div class='navigation'>
        <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple sidebar-back&quot; }' name='backArrowIcon'/&g…

애드센스 adsbygoogle.js 한 번만 로드 - 광고 단위가 여러개 일 때 페이지 로딩 속도 높이는 방법

Image
한 페이지에 게시되는 애드센스 광고 단위는 대체로 3개 전후인 것 같습니다.

애드센스 광고 코드는 adsbygoogle.js 를 로딩하게 되는데, 매 광고 단위 마다 로딩을 하게 되면, 비록 큰 차이가 아니라 하더라도, 로딩 속도가 떨어지고, 결과적으로 페이지 로딩 속도가 느리게 됩니다.

adsbygoogle.js 를 <head> 영역에서 한 번만 로딩 되도록 하고자 하였지만, 이전에는 '광고 코드 변경'은 애드센스 정책에 위반된다 하여, 그렇게 할 수가 없었습니다. 언제부터 이렇게 하는 것이 허용되었는지는 모르겠지만, 이제는 애드센스 도움말 페이지에 공식적으로 허용된다고 나와 있습니다.

[애드센스 고객센터 도움말]
문) 한 페이지에 광고 단위가 여러 개인 경우 각 광고 단위에 대해 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>를 포함해야 하나요?

답) 반드시 그럴 필요는 없습니다. adsbygoogle.js는 한 번만 로드할 수 있습니다.


문) If I have multiple ad units on a page, do I have to include <script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> for each ad unit?

답) No, this is not necessary, adsbygoogle.js can be loaded once.

방법은,
애드센스 광고 코드에서 빨강색으로 표시된 부분을 <head> 와 </head> 사이, 곧 <head> 영역에 한 번만 삽입을 하고, 매 광고 코드는 빨강색 부분을 삭제하고 게제하는 것입니다.

<script async src='//pagead2.goog…

구글 블로그 인라인 애드 In-Line Ads 원하는 광고 단위 형식 코드로 변경 하는 방법 - 네이티브 인피드 광고 (Native In-feed ads)로 대체하기

Image
구글 애드센스를 게제하는 경우에, 구글 블로그는 여러 모로 편리한 점이 많습니다. 그 가운데 하나가 인라인 애드(In Line Ads)일 것 같습니다.

인라인 애드 기능을 사용하면, 글 목록 페이지에서 애드센스 광고 노출 개수, 몇 개의 글 마다 광고를 노출 할 지 등을 자유로이 설정할 수 고, 메인 페이지 하단에도 광고가 들어 갑니다.

단점으로는, 인-아티클 애드, 인-피드 애드, 반응형 링크 광고 등 새로운 광고단위들을 적용할 수 없습니다. 또한, 애드센스 홈페이지 보고서에서, 노출 수, 클릭, 수입등 통계가 표시되지 않습니다.

인라인 애드의 장점을 그대로 사용하면서, 새로운 광고단위를 자유로이 적용하려면 아래와 같이 하는 길이 있습니다. 이렇게 하면, 애드센스 홈페이지 보고서에서 인라인 애드 상황도 파악할 수 있습니다.

방법은 간단하여 누구나 쉽게 할 수 있습니다.
구글 블로그에서 인라인 애드를 활성화 시켜 놓고, 인라인 애드 광고코드 부분을 원하는 광고 코드로 대체하는 것입니다.

1) 인라인 애드 코드를 찾습니다.
블로그 대시보드에서, HTML 편집창을 열고 > [컨트롤 F, Ctrl + F] 키를 쳐서 검색창을 열고 > 아래의 코드를 복사하여 붙여 넣고, 검색(엔터 키를 침)하여, 해당 위치로 이동합니다. 아래 코드를 검색하면, 2개가 나옵니다. 둘 다 대체를 해 주어야 합니다.

<b:include data='post' name='super.inlineAd'/>

2) 위 코드가 작동하지 않도록 합니다.
위 코드는 자동으로 인라인 애드 코드가 삽입되게 하는 코드입니다.  그러므로, 일단 이 코드의 작동을 중단시켜야 합니다.

코드가 작동하지 않게 하려면, (1) 해당 부분을 삭제하여도 되고, (2) 아래에서 빨강색으로 표시한 것과 같이, 주석으로 처리하여도 됩니다.

다시 원상회복할 것을 생각한다면, 아예 삭제하기 보다는, 아래와 같이 주석처리 하는 것이 더 나을 것 같습니다. 아래에서, 앞 쪽의 !-- …

블로그 애드센스 가젯 asynchronous 경고 해결 방법 - Speed up page loading times : Use asynchronous ad code to make your site faster - Blogger AdSense gadget

Image
구글 블로그 레이아웃(Layout)에서, 애드센스 가젯(AdSense gadget)으로 광고 단위를 넣으면,  아래 그림과 같은 최적화 안내가 표시되는 경우가 있습니다.

애드센스, 구글 블로그, 인터냇... 해결 방법을 설명한 글을 찾을 수가 없습니다. 아래와 같은 경우가 아주 드물기 때문이 아닌가 싶습니다.  이 페이지는 나름의 해결 방법을 설명한 것입니다.

[ 애드센스 asynchronous 안내]

한마디로 말하자면, 애드센스 홈페이지에서 해당 광고코드를 복사하여, 블로그 HTML 편집창에서 직접 붙여 넣는 것입니다.

1) 구글 블로그 > 대시 보드 > 레이아웃 에서 애드센스 가젯으로 애드센스를 넣는다

2) 애드센스 계정 홈페이지에서, 해당 광고 단위의 광고코드(스크립트)를 복사한다
3) 광고코드의 async 에 ="async" 를 추가하여, async="async" 모양으로 수정한다

4) 구글 블로그 > HTML 편집창에서, 광고단위를 넣은 해당 가젯의 광고 코드 부분을 아래 그림과 같이 수정한다.

적고 보니, 무척 어려운 것 처럼 느껴집니다. 하지만, 아주 간단합니다. 아래 그림을 보면, 금방 이해가 되지 싶습니다.


=> 애드센스 광고단위를 넣은 해당 가젯의 HTML코드에서  <data:adCode/>  부문을 삭제하고,
=> 애드센스 홈페이지에서 복사한 광고코드로 대체합니다.
=>  변경사항을 저장하고, HTML 편집창을 닫습니다.


          <b:widget id='AdSense1' locked='true' title='' type='AdSense' version='2' visible='true'>
             <b:widget-settings>.....</b:widget-settings>
             <b:includ…