블로그 메인노출을 위한 현실적인 10가지 주의사항

1. 키워드 욕심은 금물 (자연스러운 배치)

메인노출을 하고 싶다고 본문에 똑같은 키워드를 20번, 30번씩 억지로 욱여넣으면 검색 엔진이 '스팸'으로 인식합니다. 제목에 한 번, 본문 첫 문단에 한 번, 그리고 글을 쓰면서 문맥에 맞게 자연스럽게 3~5번 정도만 녹여내는 것이 가장 좋습니다.

2. '복붙(복사 붙여넣기)'은 절대 금지

다른 사람의 글이나 뉴스 기사를 그대로 복사해 오면 '유사 문서'로 분류되어 검색에서 아예 누락될 수 있습니다. 정보를 참고하더라도 반드시 내 생각과 내 말투로 다시 풀어서 작성해야 합니다.

3. 제목은 매력적이되, '낚시'는 금지

가장 중요한 메인 키워드는 제목의 가급적 앞쪽에 배치하는 것이 좋습니다. 하지만 클릭을 유도하려고 본문 내용과 상관없는 자극적인 제목을 달면, 들어왔던 사람들이 바로 나가버려서(이탈률 증가) 블로그 지수가 깎이게 됩니다.

4. 체류시간을 늘리는 '가독성' 확보

글씨가 너무 빽빽하면 읽기 싫어집니다. 사람들이 글을 끝까지 읽고 오래 머물게(체류시간 증가) 하려면, 적절한 문단 나누기, 소제목 활용, 굵은 글씨 포인트, 중간중간 들어가는 이미지나 이모티콘으로 숨통을 트여주세요.

5. 이미지도 똑똑하게 사용하기

인터넷에서 다운로드한 이미지를 그대로 쓰면 중복 이미지로 걸릴 수 있습니다. 필터를 입히거나, 캡처를 다시 하거나, 내 워터마크를 넣는 등 약간의 가공을 거치는 것이 좋습니다. 직접 찍은 사진이 당연히 제일 높은 점수를 받습니다.

6. 외부 링크 남발 주의

글마다 쿠팡 파트너스 같은 수익형 링크나 타 사이트로 빠져나가는 링크를 과도하게 넣으면 검색 엔진이 좋아하지 않습니다. 포털은 사람들이 자기네 플랫폼 안에서 계속 놀기를 원하거든요. 링크는 꼭 필요한 정보일 때만 신중하게 달아주세요.

7. 잡학사전보다는 '전문가' 되기 (C-Rank)

오늘 맛집, 내일은 주식, 모레는 IT 기기... 이렇게 이것저것 다 쓰는 블로그보다는 한두 가지 주제(예: 육아, 요리, 경제)를 깊게 파는 블로그가 전문성을 인정받아 메인노출에 훨씬 유리합니다.

8. 발행 후 잦은 수정과 삭제 피하기

글을 올린 직후에 오타를 한두 개 고치는 건 괜찮습니다. 하지만 며칠 지난 글의 제목이나 내용을 대폭 수정하거나, 글을 썼다 지웠다 반복하면 봇(Bot)이 블로그를 의심하게 됩니다. 처음 발행할 때 꼼꼼히 확인하는 습관을 들이세요.

9. 정보성 글 속에 내 '경험' 한 스푼

단순한 팩트 나열은 AI나 나무위키가 더 잘합니다. 메인노출을 뚫고 사람들의 반응을 얻으려면 "내가 직접 해봤더니 이렇더라", "이런 실수를 했으니 조심해라" 같은 나만의 찐 경험담이 반드시 들어가야 합니다. 검색 엔진도 이런 독창적인 문서를 좋아합니다.

10. 금칙어 및 상업적 단어 주의

불법적인 단어, 욕설은 당연히 피해야 하고, 대출, 도박 등 스팸성 문서에서 자주 쓰이는 키워드가 내 글에 섞여 있지 않은지 주의하세요. 무의식중에 쓴 단어 하나가 블로그 전체 품질을 떨어뜨릴 수 있습니다.

HTML은 웹 페이지를 만드는 데 중요한 마크업 언어이며, 이미지는 웹 페이지에서 시각적인 콘텐츠를 제공하는 데 필수적입니다. 이 글에서는 HTML 이미지의 가로와 세로 사이즈를 조절하는 방법에 대해 알아보겠습니다. 

HTML 이미지 태그

웹 페이지에 이미지를 삽입하려면 <img> 태그를 사용합니다. <img> 태그는 자체적으로 닫히는 태그로, src 속성을 통해 이미지 파일의 경로를 지정합니다.

가로 사이즈 조절

이미지의 가로 크기를 조절하려면 <img> 태그에 width 속성을 사용합니다. 예를 들어, 가로 크기를 300픽셀로 조절하고 싶다면 다음과 같이 작성합니다:

비율 유지

이미지의 비율을 유지하면서 가로 크기를 조절하려면 height 속성을 지정하지 않고 width 속성만 사용합니다. 이렇게 하면 원본 이미지의 비율을 유지하면서 가로 크기가 조절됩니다.

세로 사이즈 조절

이미지의 세로 크기를 조절하려면 <img> 태그에 height 속성을 사용합니다. 예를 들어, 세로 크기를 200픽셀로 조절하고 싶다면 다음과 같이 작성합니다:​

비율 유지

이미지의 비율을 유지하면서 세로 크기를 조절하려면 width 속성을 지정하지 않고 height 속성만 사용합니다. 이렇게 하면 원본 이미지의 비율을 유지하면서 세로 크기가 조절됩니다.

가로 세로 사이즈 동시 조절

width와 height 속성을 동시에 사용하여 이미지의 가로와 세로 크기를 조절할 수 있습니다. 하지만 원본 이미지의 비율이 깨질 수 있으므로 주의가 필요합니다.

Proportional 이미지 조절

HTML에서는 width와 height 속성을 같이 사용하는 대신, CSS 스타일 속성인 max-width와 max-height를 함께 사용하여 이미지를 비율에 맞게 조절할 수도 있습니다.​ 

자동 크기 조절

width와 height 속성을 모두 지정하지 않으면 원본 이미지의 크기 그대로 출력됩니다. 이는 이미지가 원본 크기를 유지하는 것이 중요한 경우에 유용합니다.

결론

워드프레스에서 자주 사용하며, 티스토리에도 가끔 사용하긴 합니다. 이미지는 다음과 같은 width와 height를 통해서,

조절 할 수 있습니다. 주로 많이 쓰이기 때문에 참고하시면 좋습니다.

워드프레스나 티스토리 CSS 만지실 때, 텍스트 많이 꾸미시는 분들이 많다보니, 바로 복사붙이기를 할 수 있는

블로그가 있다보니 공유해봅니다. 저도 가끔 필요할 때 들어가서, 꾸밀 때 많이 이용하는 편입니다.

https://cocoon1787.tistory.com/660 

​순서는 다음과 같이 정리가 되어 있더라구요.

1. 텍스트 크기 변경

2. 텍스트 색상 변경

3. 텍스트 글꼴 변경

4. 텍스트 굵기 설정

5. 텍스트 글자 간격

6. 텍스트 줄간격

7. 텍스트 줄긋기

8. 텍스트 그림자효과

워드프레스 블로그나 홈페이지 제작 할 때, 메인쪽에 이미지 슬라이드 배너 소스 필요하실 때 쓰시면 될 것 같습니다.

(1) HTML 소스입니다.

먼저 구조를 만들고, div class="slide" 가 감싸고 있습니다. src 에는 이미지가 업로드 된 경로를 넣어주시면 되고,

alt 는 이미지 위에 마우스 올려놓았을때 나오는 설명입니다. 바꾸어 주실 곳은 src와 alt만 변경 해주시면 됩니다.

(2) CSS파일 소스입니다.

각 슬라이드의 스타일을 정의하였습니다. css 파일에 넣거나 <style> </style> 감싸서 사용해주시면 됩니다.

(3) 자바스크립트 소스입니다.​

현재 보이는 슬라이드르 showslide() 함수를 통해 보이지 않도록 설정하였고, 다음 슬라이드를 보이도록

하였습니다. 일정 시간마다 nextslide() 함수가 호출되도록 설정했습니다. 

html 과 css, javescript 를 각각 정리해드렸습니다. 그대로 복사붙이기 하면 되는데. 이걸 어떻게 복사붙이기 해야할지

모르는 분들이 분명 존재할 듯 하여...한번에 소스 정리해드리겠습니다.

(4) 최종 전체 소스

딱 블로그 소스 수정 하실 때 필요한 소스만 한번에 정리하였습니다. 그대로 복붙하시고 src와 alt만 바꾸어 주시면 됩니다.

​​

오늘은 테이블 만드는 방법을 알려드리겠습니다!!

저는 항상 소스를 알려드릴때, 정말 하나도 모르시는 분들을 위해, 복사붙이기가 가능하도록 공유해드릴텐데요.

모르는 부분이 있으면, 댓글로 남겨주실 경우 답변드리겠습니다.

https://www.tablesgenerator.com/html_tables 

제가 이용하는 사이트인데, 해당 사이트를 통해서, 테이블을 엄청 빠르게 만드실 수 있습니다.

소스를 전혀 모르시거나, 아는데 귀찮은 분들에게 매우 유용합니다.

접속 하시면, 다음과 같이 화면이 바로 나오는데요.

가장 쉽게 이용하는 방법

ㄴ구글 번역 한국어로 바꾸고 빨간박스만 집중해서 보세요.​ 

사용방법

1. 메뉴에 Table 클릭하면 ​Set size 클릭후 원하는 행과 열을 선택하여 테이블 만드시면 됩니다. 

2. 그리고 Generate 위에 테이블이 생기는데 마우스로 늘였다가 줄였다 해보세요. 셀에 더블클릭하면 글자로 넣을 수 있습니다. 그렇게 만들어주신 후 메뉴 빨간박스 보이시죠? 

셀 합치고 병합하고, 글자색상, 테두리 색상, 테이블 배경색 지정 할 수있습니다.

3. 다 하고 나서, Generate 를 눌러주면 아래 소스창에 변경한 값이 반영됩니다.

4. 마지막으로 Copy to Clipboard 를 눌러주시면 복사가 됩니다.

붙여넣기 해주세요~!! 끝입니다.

넣고 싶은곳에 해당 소스를 넣어주시면 되겠습니다. (위에 소스 복사 붙이기 해서, 바까서 쓰세요!)

예시 (투잡커넥트)

소스를 넣게 되면,

 투잡커넥트 바로가기

ㄴ이렇게 됩니다. 매우 간단하죠~!!??

홈페이지를 만들때 만드시 필요한 html에 대해서 배워보도록 하겠습니다.

천천히 하나하나 따라하시면 기본적인 html 명령어는 배우실 수 있습니다.

좀 더 자세한 명령어들은 시중에 나와있는 html 책을 보시면 많은 도움을

받으실 겁니다.

HTML 태그를 하시기 전 아셔야 할 부분이 있습니다.

시작하는 태그가 있으면 끝나는 태그가 있어야 합니다.

만약 <html>로 시작을 했다면 끝에는 반드시 </html>로 마무리를 하시고,

<b>로 시작을 했다면 </b>로 마무리를 하셔야 합니다.

앞의 명령어는 시작이고, 끝에 명령어 마무리는 앞에서 사용했던 명령어를 입력하시고

/ 를 입력하시면 태그의 끝을 나타냅니다.

그리고 영문자의 대소문자는 구분을 안하니까 편안히 사용하시면 됩니다.

아래의 내용을 편집기 또는 메모장을 이용하셔서 똑같이 입력하시고, 다른 이름으로 저장을

하셔서 폴더를 만드신 후 파일명을 태그연습1.html 로 저장합니다.

파일명은 뒤에 확장자가 .html 또는 .htm을 입력할 수 있지만,

여기에서는 .html을 사용하도록 하겠습니다.

그럼 html 문서의 기본적인를 구성을 보도록 하겠습니다.

아래의 내용을 편집기 또는 메모장에 입력하신 후 저장해서 실행해 보세요.

===== 내용 입력 시작 =====

 <html>

  <head>

   <title>웹 브라우저의 제목을 입력합니다.</title>

  </head>

  <body>

   모든 문서는 body 사이에 입력하셔야 합니다. (텍스트 또는 이미지)

  </body>

 </html>

===== 내용 입력 끝 =====

그럼 위에서 사용된 태그 명령어를 설명 드리겠습니다.

<html></html>

웹 문서의 시작과 끝을 나타내는 태그 입니다.

모든 문서는 html 안에 입력하셔야 합니다.

<head></head>

head는 html 문서에 꼭 있어야 하며, 웹 문서의 여러 정보들이 들어갑니다.

문서 제목, 스크립트 또는 스타일 시트 파일의 링크 등 정보들을 넣을 수 있으며,

실제 사용자에게는 보이지 않습니다.

<title></title>

웹 문서의 제목을 입력합니다. 웹 브라우저 맨 위에 파란줄에 표시 됩니다.

<body></body>

모든 웹 문서는 body 사이에 입력하셔야 합니다.

태그교실에서 배울 내용들이 body에 사용되는 태그 명령어들입니다.​ 

h1 즉 숫자가 작을수록 글자가 더욱 크게 됨으로써, 중요한 큰 제목에 쓸수 있답니다.

h6 은 덜 중요한 제목에 쓸수 있겠죠??

h1 입니다

h2 입니다

h3 입니다

h4 입니다

h5 입니다

h6 입니다

다음과 같이 h1 부터 h6 까지 적용하였을때 다음과 같은 크기 결과값이 나온답니다. ​

쓰는 소스는 다음과 같습니다.

​<h1>h1 입니다</h1> 

<h2>h2 입니다</h2> 

<h3>h3 입니다</h3> 

<h4>h4 입니다</h4> 

<h5>h5 입니다</h5> 

<h6>h6 입니다</h6>

티스토리 운영이나 html 소스 관련 적용시 적절하게 이용해주시면 도움이 될것 같네요

html을 공부하기 위해서 직접 책을 사서 공부하시는 분들이 계신데요.

그러지 마시고 해당 동영상을 참고하셔서 빠르게 배우는데 도움이 되셨으면 좋겠습니다.

사실 직접 해보는것만큼 좋은것이 없더라구요.

수정사항이 별도로 제공되지 않아 직접 바꾸어야 하는 경우 많죠

혹은 코딩 관련해서 어느정도 기본기를 필요하신분들을 위해서

제가 알고 있는 사이트 공유해봅니다.

코딩에 대한 여러가지 기본적인 부분이 잘 게시판별로 구성되어 있더라구요.

참고 하시고 sns로 돈벌자구요!

http://tcpschool.com 

블로그를 쓸때요 !! 

그런데 기능은 없고 어떻게 해야 할지 몰라 ---------------- 이런식으로 하는경우 많은데요.

매우 간단해서 다음과 같이 공유 해봅니다.

html 탭에서  <hr> 이거 하나만 넣으시면 된답니다.

ex)

ㄴ이렇게 깔끔하게 선이 그어지는것을 확인하실수 있습니다.

선이 희미해서 잘 안보이지만 잘보시면 있어요

보통 제목쓰고 나서 내용 쓰기전에 구분을 짓기 위해서 많이 넣으시더라구요.

참고하여 글쓰는데 도움이 되셨으면 좋겠네요^^

글씨 진하게 하거나 띄워쓰는 소스인데요.

========================================================

예제를 들어보겠습니다.

ex)

안녕하세요.

저는 홍길동입니다.

ㄴ 두 문장이 있다고 쳤을때, 이것을 소스로 풀이하자면.

안녕하세요 <br> <b>저는 홍길동입니다.</b>

다음과 같은 방식이 됩니다.

<br> 은 엔터와 같은 기능이고,

<b> 는 진하게 명령을 뜻합니다.

그리고 반드시 어디까지 명령을 할것인지 설정을 해주셔야 하는데

이럴때는 반드시  /  <--- 를 넣어서 마무리를 해주셔야 합니다.

안그러면 문제 끝까지 되거든요!!

단 !! <br> 은 예외요!!

가장 기본적인 부분인데 모르시는 분들 의외로 많아서 남겨요.

html 소스 어떻게 넣어야 할지 모르시는분 많은데요!!

그럴때 팁을 드리자면!!

일단 블로그에서 에디트로 먼저 작성 후!!

html 가서 그대로 전체 복사 붙이기로 넣으시면 됩니다.

이렇게 하나하나씩 하다보면 조금씩 소스에 대한 감이 오실것 같습니다.

잘 모르신다면 기본적으로 이렇게 해보세요.

줄그어져 있는거 누르셔서 맞추시는데요~!

HTML로 맞출때 위젯이나 티스토리나 각종 소스등 쉽게 하는 방법이고,

어떻게 보면 기본중에 기본이기도 합니다.

대부분 아시겠지만 바로 center 를 이용하여 중앙정렬을 하는데요.

쓰는 방법은.

==========================================

<center>  

내용    <----- 중앙정렬 하고자 하는 부분

</center>

==========================================​

로 해주시면 되겠습니다.

중앙정렬 하고자 하는 부분이 내용이라면 center 사이에 넣어주시면 된다는거!!

/  <-- 표시는 중앙정렬을 종료한다는 뜻이니 알고 계시면 되구요!

참고하셔서 잘 이용해주시기 바랍니다.^^

참고 하셔서 어느정도 위젯 넣으시고, 티스토리는 애드센스나 쿠팡 등등.

삽입하는데 도움이 될겁니다.

메모장에서 저장하실때 이름.HTML 로 한번 저장하셔서 보시면 이해가 될겁니다.

<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시합니다.

<html> : HTML 문서의 루트(root) 요소를 정의합니다.

<head> : HTML 문서의 메타데이터(metadata)를 정의합니다.

- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 

직접적으로 표현되지 않는 정보를 의미합니다.

- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 

이용하여 표현할 수 있습니다.

<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.

- 웹 브라우저의 툴바(toolbar)에 표시됩니다.

- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.

- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.

<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.

<h1> ~ <h6> : 제목(heading)을 나타냅니다.

<p> : 단락(paragraph)을 나타냅니다.