위에 보이는 그래프는 html을 작성할 시 자주 쓰이는 태그를 순위매긴 것이다.
이는 아래 링크첨부해놓은 사이트에서 들고온 것인데,
https://www.advancedwebranking.com/html/
www.advancedwebranking.com
html에 대해 잘 분석되어 있으므로, 한번 쯤 참고할 법하다!
그러면 위 사이트를 토대로 자주 쓰이는 태그에 대해 내 방식대로 다시 정리해보겠다 :)
1. HTML의 기본 구조
<HTML>
<HEAD>
<TITLE>문서의 제목</TITLE>
</HEAD>
<BODY>
내용
</BODY>
</HTML>
2. 자주 쓰이는 태그들
<html>~~</html>
: 웹 페이지의 시작과 끝을 정해주는 태그
<head> ~~ </head>
: 해당 웹 페이지의 정보나 문서에서 사용하는 외부 파일들을 링크할 때 사용
<title> ~~ </title>
: 타이틀바에 새겨질 글자를 정의해준다.
<link>
: css 파일을 연결해준다.
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/CSS/style.css">
<body> ~~ </body>
: 브라우저에 실제 표시되는 내용들을 적어주는 부분
<meta>
: 문자 인코딩 및 문서 키워드, 요약 정보 등을 적어준다.
가장 많이 볼 수 있는 것은 <meta charset=“utf-8”>로, 한글이 웹 페이지에서 깨지지 않도록 설정해주는 것이다.
<div> ~~ </div>
: 컨텐츠를 하나로 그룹핑해주기 위해 사용하는 태그. 줄바꿈이 된다.
<span>~~</span>
: 컨텐츠를 특정한 목정에 따라 그룹핑해줄때 사용하는 태그. 자동줄바꿈이 되지 않아서 신경써줘야한다.
<article> ~~ </article>
: 시각적인 효과를 주는 태그는 아니지만, 태그 안의 부분이 본문이라는 것을 명시해주기 위해 사용한다.
<a> ~~</a>
: 웹 페이지나 외부 사이트를 연결하기 위해 사용한다.
<a href = “연결할 링크의 경로”> 내용</a>
<img>
: 웹 페이지에 이미지를 넣을 때, 해당 이미지를 연결해주는 태그. <img> 태그 하나 당 1개의 이미지를 삽입할 수 있다.
<p>
: 단락. 사용하면 내용 앞 뒤로 빈줄이 생기면서 단락이 형성된다.
<li>
: <ul>와 <ol>안에서 각 항목을 나열할때 사용해준다.
<ul>는 글머리 기호가 앞에 붙고(기호를 없애고 싶으면 css에서 설정가능하다.), <ol>는 앞에 순서대로 번호가 붙어서 목록을 만든다.
<br>
:줄바꿈을 위해 사용한다.
<hn>
:<h1>부터 <h6>까지 있으며, 제목을 만들 때 사용해준다. ,<h6>로 가까울수록 크기가 작아진다.
<input>
: form의 요소 중 하나로, 사용자가 정보를 입력해야하는 부분을 만들 때 사용한다.
<footer>
: 저작권 정보와 제작 정보 등을 표시해주는 부분이다.
<button>
:버튼을 만들 때 사용
'Develop > web publishing' 카테고리의 다른 글
| 웹 퍼블리싱(web publishing)이란? (2) | 2020.01.21 |
|---|