The average web page from top twenty Google results
Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
위 사이트를 통해 나온 통계적으로 유용한 태그, 생활 코딩 및 다른 영상에서 배운 태그를 정리 해놓은 자료이다.
html,head,body
<html>
<head>
<title>제목</title>
<meta charset="utf-8">
</head>
<body>
안녕하세요!
</body>
</html>HTML을 만든 사람들은
본문은 body태그로 묶기로 하였다.
분문을 설명하는, 다시말해서 body를 설명하는 태그는 head로 묶기로 약속했다.
즉, html에 있는 모든 태그는 body또는 head태그 밑에 놓이게 된다.
그리고 body와 head태그를 감싸는 단 하나의 최고위층 태그가 바로 html태그이다.
<meta>
<meta charset="utf-8">컴퓨터는 모든 정보를 0아니면 1로 최종적으로 저장하는데
그 0과 1을 어떻게 저장할 것인지에 대한 여러가지 약속들이 존재한다.
그 약속 중 하나가 utf-8이다.
IDE에서 사용하는 약속과 웹페이지에서 사용하는 약속이 다르면 문제가 일어나기 때문에
<meta>를 이용해서 웹브라우저에게 이 웹 페에지를 열 때는 utf-8로 열라고 하는 것이다.
여기서 charset은 character = 문자, set = 규칙이라는 뜻 즉, utf-8로 문서를 읽어라라고
브라우저에게 얘기해주는 것이다.
<title>
<title>안녕하세요~</title>
웹페이지에 나오는 제목을 바꾼다.
<a>
See the Pen <a>ex by Higher77 (@higher77) on CodePen.
anchor(닻)의 줄임말로 HyperText Markup Language(HTML)의 HyperText를 의미하는 태그이다.
<a>태그는 속성과 함께사용한다.
이 링크가 어디에 앵커를 내려야 될지에 대한 정보가 부족하니까
h(hypertext)+ref(reference<참조>)를 해서 href속성을 사용한다.
클릭했을 때 새 탭이 열리게 하고 싶을 때
target="_blank"를 사용
툴팁으로 이 링크가 클릭하기 전에 무엇인지 알려주고 싶을 때
title="내용"
<strong>
See the Pen strong by Higher77 (@higher77) on CodePen.
텍스트를 굵게 변화시켜주는 기능.
<U>
See the Pen U by Higher77 (@higher77) on CodePen.
텍스트에 밑줄을 추가해주는 기능.
<h1>~<h6>
See the Pen <h1>~<h6> by Higher77 (@higher77) on CodePen.
제목의 역할을 한다. h뒤의 숫자에 따라 글씨크기 및 두께가 변하고 줄바꿈이 된다.
<br>
See the Pen <br>ex by Higher77 (@higher77) on CodePen.
줄바꿈의 역할을 한다.
<p>
See the Pen <p>ex by Higher77 (@higher77) on CodePen.
paragraph(단락)의 줄임말이다. <br>과 같은 줄바꿈의 역할을 한다.
다만, <p></p>태그 안의 내용이 한 단락이라는 것을 의미하고 <br>은 단지 줄바꿈이기 때문에
정보로써의 가치차이가 있다.
<img>
See the Pen <img>ex by Higher77 (@higher77) on CodePen.
<img>는 이미지를 불러오는 기능을 한다.
혼자 쓰이지 않고 속성과 함께 쓰며 src,width...등이 있다.