HTML(HyperText Markup Language)
마크업 언어는 대부분 태그를 이용해 구조를 표현합니다.
HTML 또한 태그를 활용하는 언어입니다.
수많은 태그 중에서 사람들이 자주 사용하는 태그들만 정리해보겠습니다.
<html>, <head>, <body>
html의 구조를 이루는 태그들입니다.
<html>로 열고 </html>로 닫는 방식으로 사용합니다.
<title>
주로 <head> 태그 영역 안에 사용합니다.
해당 문서의 이름을 표시합니다.
<title> TEST </title>을 할 경우 다음처럼 브라우저 탭에 이름이 표시됩니다.
<meta>
meta 태그는 <meta ~~~/>의 형식으로 스스로 닫습니다.
<meta charset="UTF-8"charset="UTF-8">를 자주 사용하는데 해당 문서를 어떤 방식으로 인코딩할지 알려줍니다.
그 외에는 meta라는 이름처럼 metadata를 표시하는데 이용합니다.
<meta name="author" content="Lion is not bear">
<div>
div는 특별한 기능은 없지만 제일 중요하다고 생각합니다.
제가 원하는 부분만큼 영역을 지정해줄 수 있는 태그입니다.
CSS랑 Javascript랑 같이 쓸 때 <div>를 얼마나 잘 활용하느냐가 중요합니다.
<div class = "yellow">
<a>
a 태그는 링크를 줄 때 사용합니다.
<script>, <style>
스크립트는 자바스크립트, 스타일은 CSS 태그입니다.
See the Pen qBbRREo by Kwonttt (@kwonttt) on CodePen.
<link>
다른 페이지를 삽입할 때 사용합니다.
저는 style태그로 html 파일에서 직접 사용하기보다는
따로 css 파일을 만들어서 사용합니다.
그것을 가져다 쓰기 위해 이런 식으로 표현합니다.
<link rel="stylesheet" href="styles.css">
<img>, <iframe>
이미지나 동영상을 삽입할 때 사용합니다.
<img(iframe) src = "절대 경로/웹 링크/상대 경로">
<span>
영역을 정의해주는 태그입니다.
다만 div는 block단위라면 span은 인라인 영역을 담당합니다.
<p>
글의 단락을 표시합니다.
<p> 안녕하세요 </p>
<p> HTML입니다. </p>
를 사용한다면 줄 바꿈이 되어서 나타납니다.
p 태그 없이
안녕하세요
HTML입니다.
를 하면 줄 바꿈이 되지 않습니다.
<li>, <ul>, <ol>
리스트와 관련된 태그입니다.
ol은 넘버링이 되는 리스트를 표시합니다.
ul은 넘버링이 안 되는 리스트를 표시합니다.
li는 ol ul의 하위 태그로 사용해서 세부 리스트 항목을 표기합니다.
<ol>
<li> 청소하기 </li>
<li> 블로그</li>
<li> 독서하기 </li>
</ol>
<br/>
이 태그는 줄 바꿈 할 때 사용합니다.
<h1~h6>
제목 크기를 나타냅니다. 숫자가 작을수록 크기가 커요!!
<input>, <form>
로그인할 때 사용자 정보를 입력하는 칸이 있죠??
그런 친구들을 표현합니다.
<form action="/login.jsp">
id: <input type="text" name="id"><br>
password: <input type="text" name="pwd"><br>
<input type="submit" value="Submit">
</form>
이런 식으로 사용하면 login.jsp에 사용자가 입력한 id와 pwd 값이 넘어갑니다.
해당 정보를 이용하여 데이터베이스에 저장된 결과랑 비교해서 로그인할때 사용할 수 있어요.
<nav>, <header>, <footer>
HTML에서 레이아웃과 관련된 태그입니다.
nav는 link 리스트들을 모아놓는 집합으로 사용합니다.
<strong>
강조하고 싶은 부분에 사용합니다.
<button>
네 생각하시는 그 버튼이 맞습니다.
<button name="button">Submit</button>
<i>
i태그는 이탤릭 서체.. 그러니까 기울여서 쓴 글씨를 표현합니다.
지금까지 주로 사용하는 HTML 태그들을 알아봤습니다.
저도 정리하면서 처음 보는 태그들이 많네요.
'web > html&css' 카테고리의 다른 글
| css 파일 수정 후 적용 X (0) | 2020.07.11 |
|---|---|
| CSS 문법 (0) | 2020.06.27 |
| HTML 실습 환경 준비하기 (0) | 2020.06.08 |
