티스토리 블로그 구글 애드센스 최적화 HTML 공부사이트
- IT 관련 정보
- 2020. 7. 3.
티스토리 블로그 구글 애드센스 최적화 첫걸음 HTML 스터디 시작
HTML 첫걸음
며칠 전 구글 애드센스 승인을 받고 나서 HTML 공부를 시작하였다. 사실 회사에서 시스템 구축 프로젝트 참여를 하다 보면 한 번쯤은 들어봤을 단어인데 내가 이걸 공부하게 될지는 몰랐다. 무언가 배우는 걸 좋아하는 편이라 크게 스트레스는 없을 거라 생각했는데 의외로 성과를 내야 하는 구글 애드센스 항목과 연관이 되다 보니 잘해야 한다는 압박감에 은근 스트레스가 되었다. 그래서 나처럼 HTML 공부를 하고 싶은 분들에게 도움이 될만한 사이트와 관련 내용을 간단하게 소개를 하고자 한다. 먼저 내가 먼저 공부해본 내용을 간략하게 설명하고 추가적으로 더 공부할 분들을 위한 사이트는 마지막에 소개하겠다.
HTML 구조 설명
내가 공부하고 있는 w3s school 자료인데 직관적으로 설명을 잘해주는 듯 해서 발췌하였다. 우리는 일단 아래 HTML 페이지 구조(Structure) 참조 사진을 보면 쉽게 이해할 수 있다. 보통 계층 구조라고 표현하는데 영어로는 hierarchy라고 쓴다. 쉽게 말해서 포토샵의 Layer처럼 Level 같이 대그룹-중 그룹-소그룹처럼 계층 구조를 의미한다. HTML 페이지 구조에도 이런 형태가 적용된다. 아래 사진을 통해 보면 <html> 이 가장 높은 단위이고 그 바로 밑에 같은 레벨로 <head>, <body>가 존재한다. 그리고 각각 <head> 안에 <title> 이 존재하고 <body> 안에 <h1>, <p>가 있다.
<html>
<head>
<body>
<title>
<h1>
<p>
지금 위에 쓴 내용들이 무엇인지 도대체 모르겠는 분들이라면 크게 걱정하진 않으셔도 될듯 하다. 왜냐면 우린 이제 시작인 상황이고 매일매일 보다 보면 기계적으로 익숙해질 것이기 때문이다. 일단 위의 항목들은 HTML 문법과 같은 항목이니 '이해'를 한다기보다 그냥 받아들여서 외우는 것이 중요하다고 생각한다. 우리가 영어를 배울 때 의문문을 왜 Do로 먼저 시작하는지를 이해하려고 하면 시작도 하기 전에 지칠 수 있다. 그냥 먼저 개발되어 정의되어 사용되고 있는 이 문법을 받아들이려는 자세가 중요하다. HTML 코드라는 것은 내가 현재 수준으로 대략적인 느낌적인 느낌으로 이해하기로 우리가 사용한 인터넷으로 접속하는 Web page에서 콘텐츠를 Display 하기 위해 정의된 국제표준 웹페이지 개발 언어라고 이해하면 될 듯하다. 내가 현재 티스토리 블로그 글을 작성하는 데 사용하고 있는 크롬 같은 웹브라우저 프로그램들은 이런 HTML로 작성된 언어를 정확하게 구현하여 정의된 바와 같이 웹페이지로 구현하는 것이다.
티스토리 블로그 구글 애드센스 최적화 공부를 위한 HTML 참조 사이트
1. w3c School
내가 지금 회사에서 마케팅 분석을 위해 DB SQL라는 것을 처음 입문해서 공부하면서 사용할 때 유용하게 사용했던 사이트이다. 우리 프로젝트팀에 속한 개발자분께서 추천해 주셔서 알게 되었고 지금까지도 유용하게 사용하고 있다. 파이썬, SQL, JAVA 및 HTML 등 여러 컴퓨터 언어들을 모두 다루고 있어서 범용성이 좋다. 웹페이지 구성도 직관적으로 볼 수 있게 되어 있어서 상당히 유용한 편이다.
2. coding factory
이 사이트는 구글 애드센스 네이버 카페에서 '유료 스킨'으로 유명한 JB factory 사이트에서 제공하는 곳이다. 이곳은 현재 티스토리 블로그 유료 스킨을 판매하고 있으며 이와 관련된 기초 지식들을 제공하고 있다. 실제로 유료 스킨을 구입하기 전에 공부하고자 이것저것 찾아보며 살펴보고 있는데 콘텐츠 형태가 우리 같은 초보들이 참조하기에 수준이 딱 알맞게 구성되어 있다.
https://www.codingfactory.net/html-tutorial-table-of-contents