HTML 기본 Tag
※본 포스팅은 생활코딩님 강의를 바탕으로 정리한 내용입니다.
웹, 코딩, 프로그램의 시작 Web
Web(웹) : 인류가 생산하는 거의 모든 디지털 정보가 담긴 가장 거대한 그릇 -> HTML
HTML(Hyper Text Markup Language) : 웹페이지를 만들기 위한 기본적인 웹 언어의 한 종류
HTML이 중요한 이유
coding 이라는 문구를 작성한다고 했을 때, 일반인들은 이런식으로 작성할 것이다.
<span style="font-size:24px">coding</span>반면에 개발자들은 이렇게 작성할 것이다.
<h3>coding</h3>더 짧고 간단하다. 검색 엔진들은 전 세계의 모든 웹페이지를 다운 받아서 그 웹페이지의 HTML Code를 분석한다.
웹페이지의 제목은 무엇인가, 내용은 무엇인가를 HTML tag를 근거로 정리한다.
위의 예는 다음과 같이 볼 수 있다.
시각적으로만 coding이 제목인 사이트 vs 제목이 coding인 사이트
당연히 제목이 coding인 사이트가 검색 엔진에서 검색했을 때 좀 더 윗쪽으로 나오게 된다.
-> 검색엔진에 노출이 훨씬 쉽다
검색 엔진에 나오지 않는다는 것은 실직적으로 존재하지 않는다는 의미
이와 같이 html을 정확하게 사용한다는 것은 비즈니스적인 측면에서도 생명줄과 같은 중요한 문제라 할 수 있음.
HTML tag
<h1> ~ <h6> : 제목을 나타내는 tag
- 숫자가 올라갈수록 글씨가 작아진다.
- 일반적인 텍스트보다 더 두껍고 줄바꿈 된다.
- </h1>와 같은 닫히는 tag 존재. 어디서부터 어디까지가 h1인가를 정해줌
<strong> : 글씨를 굵게 만든다.
<u> : 글씨에 밑줄
<br> : 줄바꿈. 단지 줄바꿈이라는 시각적 의미만을 나타내므로 닫히는 tag가 필요 없다.
<p> : parapraph 단락을 나타내는 tag
- 닫히는 tag 닫히는 tag 필요
- 단락이라는 것을 의미론적으로 표현해 줄 수있다.
<img > : 웹페이지에 이미지를 삽입하는 tag
ex) <img src==“coding.jpg” width=“100%“>
- src=“coding.jpg” width=“100%” 이 부분을 속성(Attribute) 이라고 함. 순서는 상관 없다.
- tag가 tag만으로 정보가 부족할 때, 속성을 사용해 정보를 부과할 수 있다.
tag가 서로 포함되어 연관 관계가 있을 때, 포함하고 있는 tag를 부모 tag, 포함되고 있는 tag를 자식 tag라고 한다.
<parent>
<child></child>
</parent><li> : 목록 list tag
- li와 같은 항목들은 어디서부터 어디까지가 서로 연관된 항목인지 경계를 짓기 위한 부모 tag 필요
- <ol> 숫자를 자동으로 넘버링 ordered list
- <ul> unodered list
<title> : 웹페이지 제목을 알려준다. 검색엔진이 책표지 같은 정보로 사용함.
<meta> : 웹페이지에는 표시되지 않지만 웹페이지가 무엇인지 부가 정보를 추가하는 방법
- <meta charset=“utf-8”> : uft-8로 저장된 문서이다!
- <meta name=“description” content=""> : 웹페이지의 요약 정보로 사용 됨
- <meta name=“keyword” content=""> : 문서를설명하는중요한 키워드들
<head> : 본문을 설명하는 tag. 본문이 아닌 것을 묶음
<body> : 본문을 묶음
<html> : body와 head를 감싸는 tag
<!doctype html> : html tag 위에 있는 관용적 표현. 이 문서는 html 있다!
<a> : Link tag
- <a href="" target=“_blank”> 이런식으로 사용
- target=“_blank” : 링크를 새 탭으로 열기
- title="" : 링크가 클릭하기 전에 무엇인지 알려주는 것