[html/css] 화면 상단/하단에 애드센스 광고 1개 넣기

 

  

[html/css]  화면 상단/하단에 애드센스 광고 1개 넣기

 

 

지난 시간에 배운 div 정렬 방법을 이용하여 애드센스 광고 넣는 법을 배워보겠습니다.

 

꼭 애드센스가 아니더라도, 다른 광고도 마찬가지입니다~

 

[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

 

 

글 속에 광고를 넣는 순서(글 한 개만 적용)

 

1. 광고 코드가 들어간 박스 만들기

 

2. 글 작성 화면에서 상단 오른쪽 html 박스에 체크 표시 후, 원하는 곳에 이 박스를 넣는다.

 

 

티스토리 스킨에 광고를 넣는 순서(전체 적용)

 

1. 광고 코드가 들어간 박스 만들기

 

2. 티스토리 관리 화면-> html/css-> html 화면에서 CTRL+F 로  ##_article_rep_desc_##  을 찾음

 

상단 광고는 ##_article_rep_desc_## 위에 만든 박스를 추가하며,

 

하단 광고는 ##_article_rep_desc_## 아래에 만든 박스를 추가함.

 

 

 

화면 상단에 애드센스 1개 넣기

  

 

1. 화면 상단 왼쪽에 광고 배치

 

 (1) 광고 코드가 들어간 박스 만들기.

 

애드센스광고코드(전체).txt

 

 

 

<div style="float: left; margin: 0px 10px 10px 10px;">

 

광고 코드

 

</div>

 

 

광고 코드  본인의 광고 코드를 넣으면 됩니다

div   박스를 만드는 태그

float: left   왼쪽 정렬 속성

margin:  0px 10px 10px 10px  위, 오른쪽, 아래, 왼쪽 여백 순임.

 

 

 

박스 선 보이게 하려면?

 

만일, 광고 주위에 박스 선이 보이길 바란다면 아래 빨간색 글씨 부분을 추가해 주세요.

 

<div style="width: 320px; height: 270px; border: 1px dashed #BDBDBD; text-align: center; line-height: 270px; vertical-align: middle; float: left;margin: 0px 10px 10px 10px ">

광고 코드

</div>

 

width 박스 너비

hegith 박스 높이

border 선굵기, 선형태, 선색상 순임

text-align: center 박스 내용의 가운데 정렬 (가로)

vertical-align: middle  박스 내용의 가운데 정렬(세로)

(단, line-height 속성과 함께 사용하며 line-height 높이는 박스 높이와 같아야 함)

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

 

 

  (2) 스킨에 (1)의 박스 추가하기

 

 티스토리 관리 화면-> html/css-> html 화면에서 CTRL+F 로  ##_article_rep_desc_##   을 찾은 후

위에 코드를 삽입함.

 

 

 

 

 

실행 화면입니다.

 

 

 

 

광고 주위로 텍스트가 둘러싼 형태가 되죠?

 

만일, 광고 이후에 글이 줄바꿈 되길 원하면 이렇게만 넣으세요

 

<div> 

광고 코드

 </div>

 

 

 

 

2. 화면 상단 오른쪽에 광고 배치

 

위에서 본 float 속성을 right로 바꿔 주기만 하면 됩니다.

 

<div style="float: right; margin: 0px 10px 10px 10px;">

 

광고 코드

 

</div>

 

만일, 광고 이후에 글이 줄바꿈 되길 원하면 이렇게만 넣으세요

 

<div style="float: right; margin: 0px 10px 10px 10px;">

 

광고 코드

 

</div>

<p style="clear:both;">&nbsp;</p>

 

clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

 

3. 화면 상단 중앙에 광고 배치

 

<div style="margin-left:auto; margin-right: auto; text-align: center;">
광고 코드
</div>
<br />

 

 

margin: auto  박스를 중앙 정렬

text-align: center 광고를 중앙 정렬

<br /> 광고와 이후에 오는 글자 사이의 간격을 한 칸 띔.

두 칸 띄려면 <p>&nbsp;</p>를 추가함.

 

 

박스 선 보이게 하려면 2

 

위에서는 박스에 너비와 높이를 지정했는데요 이번엔 다른 방법입니다. 

만일, 광고 주위에 박스 선이 보이길 바란다면 아래 빨간색 글씨 부분을 추가해 주세요.

 

<div style="border: 1px dashed #BDBDBD; padding: 10px; margin-left: auto; margin-right: auto; text-align: center; line-height: 250px; vertical-align: middle; ">

광고 코드

</div>

 

padding: 10px  박스와 광고 사이의 공간 상,하,좌우 10px로 설정

단 박스 너비 설정이 없으면 가로 화면 100%가 되며

박스 높이 설정이 없으면, 광고 높이와 같게 설정됩니다.

 

 

 

화면 하단에 애드센스 1개 넣기

  

 

하단에 애드센스 넣는 방법은 위와 동일합니다.

 

대신 광고 박스를 만든 후 html 화면에서 추가할 때 ##_article_rep_desc_##   아래에 삽입해 주세요

 

 

다음 시간엔 애드센스 광고 2개 넣는 방법을 써 볼게요