유튜브 조코딩 HTML 강의 정리

조코딩 HTML 기본 1강

https://youtu.be/JMLBBv05ORw

Division 분할 = div (구역 나눠주는 기능

Headline 제목 = h1

Bold = b

lmage 이미지 = img

SRC(Source) 출처 = src (이미지 주소 넣기)

Paragraph 문단 = p

 

상위 태그 = 부모 태그

하위 태그 = 자식 태그

 

-인터넷 창 들어가서 F12 누르면 개발자 도구가 뜬다.

현재 웹페이지 HTML 문서 편리하게 볼 수 있음

(단축키 Ctrl + Shift + C)

개발자 도구에서 더블 클릭해서 내용 바꿔볼 수 있음!

 

 

 

 

 

 

 

 

조코딩 HTML 기본 2강 : 내가 만든 사이트 인터넷 공개하기

https://youtu.be/LnGgndT308Q

1. 내 컴퓨터를 서버로 만들기 ( 보안, 전기세 문제, 추천 X)

2. 외부 서버 이용하기 = 웹 포스팅 (클라우드 서버) 제공업체

- 아마존 웹 서비스 (클라우드 업계 1위, 단점 : 요금 비쌈)

- netlify ( 무료, 편리, 다양한 부가기능, 초보자도 쉬운 구성)

 

구글 검색창 html free template 다운

***파일명은 반드시 index, html

***저작권 유의하기 read me, txt 또는 license.txt 확인 요망

html 파일 열고 - 연결 프로그램 - 비주얼 스튜디오 코드 편집기 열기

 

다시 netlify 사이트 회원가입, *깃허브 미리 가입!!!

폴더를 드롭 deploy 완료 (***deploy란, 인터넷에 웹사이트를 올리는 행위)

site setting >> 아래 change site name 주소변경

누구나 볼 수 있는 사이트 생성 완료!

 

 

 

 

 

 

 

조코딩 HTML 기본 3강 : 내 사이트 네이버 검색되도록 만들기, 검색엔진 원리는? 크롤러와 SEO는??

https://youtu.be/xGkftwkoJK4

*각 검색엔진마다 웹 마스터 도구나 검색 컨솔 등 내 사이트를 등록할 수 있는 곳이 있다.

여기에 우리가 1. 등록할 URL을 입력하고 2. 내가 이 사이트의 주인이다 인증하기

3. 검색 잘 되게 관련 문서 제출 4.SEO(=Search Engine Optimization 검색 엔진 최적화하기)

 

1. 등록할 URL을 입력

검색엔진 (네이버 웹마스터 도구)에 내 사이트를 등록하기

사이트 추가에 URL 입력

 

2. 내가 이 사이트의 주인이다 인증

소유확인, HTML 태그 방법이 좀 더 간편

태그 복사해서 내 HTML 파일 들어가서 헤드와 헤드 사이 아무 곳에나 붙여 넣기. 저장.

다시 netlify 사이트 가서 deploy, 새로 변경한 파일 다시 업로드 (끌어넣기)

다시 켜서 F12 보면 헤드와 헤드 사이 들어가 있는 거 확인

다시 네이버, 자동 등록 문자만 넣고 확인 - 사이트 소유확인 - 등록 완료!

 

*검색엔진, 정보수집 로봇 = 크롤러

google-googlebot

google image-googlebot image

msn-msn bot

ronaver-yeti

daum-daumoa

검색엔진의 특정한 약속 robots.txt 로봇을 허용한다

 

sitemap.xml 크롤러가 우리 사이트 접근 시 sitemap이라는 지도를 보고

우리 사이트를 더 정확하고 효율적으로 탐색할 수 있게 해 줌.

그러면 우리는 robots.txt & sitemap.xml 파일을 만들고

사이트에 등록함으로 검색 엔진이 좀 더 사이트를 잘 찾을 수 있게 만들어줌

 

3. 검색 잘 되게 관련 문서 제출

관련 문서 (robots.txt & sitemap.xml) 제출

robots.txt

웹마스터 도구 , 우리가 등록한 사이트 들어오면

검증 > robots.txt 들어가기 > 하단 생성 툴 > 모든 검색 로봇이 접근 허용 변경 > 다운로드

다운로드한 파일을 우리 프로젝트 폴더에 넣기,

***프로젝트 파일이 폴더의 가장 최상단, 바깥쪽에 위치해야 함

 

sitemap.xml

구글에서 create site map 검색 > 첫 번째 사이트 들어가서 빈칸에 url 넣고 start

> 사이트 생성 > 사이트맵 디테일 > 사이트맵 파일 다운

***프로젝트 파일이 폴더의 가장 최상단, 바깥쪽에 위치해야 함

 

*robot.txt 파일에 site map 경로를 적어주면 좀 더 빠르게 sitemap을 참조할 수 있다.

User-agent:*Allow:/

Sitemap:https://~~~~~~~/sitemap.xml

=로봇아 내 site map 위치는 개인 url 이야 / 공통

 

모든 준비 완료되어서 다시 netlify의 deploy 들어가서 완성한 파일 넣기

업로드 완료되면 네이버 가서 웹마스터 도구에 수집 요청 누르면 됨!!

 

But, 우리가 특정 검색어 상단에 노출되기 위해선 검색엔진 최적화

(search engine optimization=SE0)

 

4.SEO(=Search Engine Optimization 검색 엔진 최적화하기)

웹마스터 도구 > 웹 페이지 최적화 > 확인 누르기

> 점검항목에 체크 확인 (X는 안 좋은 거 , V는 잘 된 거 )

V가 많을수록 검색 순위가 올라간다.

미흡한 항목은 누르면 해결방안을 볼 수 있다

특히 웹 표준 마크업 가이드를 참고하면 좀 더 정확한 해결 가능.