서론
오늘은 HTML 기본 태그와 속성을 정리하는 시간을 갖었습니다.
HTML은 기본으로 익혀야 하는 만큼 기본적으로 많이 사용하는 태그들을 정리를 해두면 도움이 될것 같습니다.
본론
HTML은 크게 head와 body로 section이 나뉩니다.
그리고 head 와 body의 구성요소로 다양한 태그들이 사용됩니다.
01.head
head 태그는 웹페이지가 어떤 문서인지 알려주는 태그입니다.
head 태그 아래에 title, link, meta 태그가 들어갑니다.
01. title
title태그는 웹페이지의 이름을 지정해줍니다.
<title>jake</title>
02. link
link 태그를 활용해 다른 곳에 저장되어있는 파일을 불러올 수 있습니다.
<link href="styles.css" rel="stylesheet">
href 속성은 파일의 위치를 표시해주며
rel 속성은 파일이 어떤 타입인지 알려줍니다.
03. meta
meta 태그는 웹사이트가 어떤 정보를 갖고 있는지 확인시켜주는 용도로 쓰입니다.
<meta charset="UFT-8">
02.body
body 태그의 내부 구성요소들을 통해 본격적으로 HTML을 만들어 갈 수 있습니다.
body 태그는 텍스트, 미디어, 테이블, 목록, 구역설정, 인풋 태그로 크게 나뉘어 집니다.
1.텍스트 관련 태그
01.h태그
제목을 설정해줄 때 쓰입니다. 크기는 1~6까지 순서대로 작아집니다.
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
02.b태그
굵은 글씨를 표현할 때 쓰입니다.
<b>굵은 글씨</b>
03.i 태그
기울은 글씨 를 표현할 때 쓰입니다.
<i>_기울은 글씨_</i>
04.p 태그
p태그는 글의 한 문단을 표현할 때 쓰입니다.
<p>글의 한문단을 나타냄</p>
2.미디어 관련 태그
01.img 태그
웹페이지의 이미지를 가져오거나 파일의 이미지를 가져올 때 쓰입니다.
<img src ="images/Jake.jpeg" </>
02.video 태그
웹페이지의 영상 파일을 가져오고 재생 시킬 때 쓰입니다.
<video src="https://~~~" controls/>
03.a 태그 href 속성
웹페이지에 다른 웹페이지나 파일을 부를때 쓰입니다.
<a href=“google.com”>구글</a>
3.테이블(표) 관련 태그
01.table 태그
table 태그는 웹페이지에 표를 만들 때 쓰입니다.
<table boder="1">
02.thead 태그,tbody 태그 (tr,td)
thead 태그는 표 상단 제목을 표시해주며 tbody태그는 표의 내용을 표시해줍니다.
4.목록 관련 태그
웹페이지에 목록을 만들 때 사용합니다.
01.ol 태그와 li 태그
숫자가 필요할 때 씁니다.
<ol>태그의 목록</ol> <li>b<li> <li>p<li>
02.ul 태그와 li 태그
숫자가 필요없을 때 씁니다.
<ul>태그의 목록</ul> <li>b<li> <li>p<li>
5.구역 설정 태그
01.div 태그
한줄 전체 공간을 다 차지 ,block element라고 합니다.
<div> 상단 </div> <div> 중단 </div> <div> 하단 </div>
02.span 태그
자기 내용물 만큼의 공간만 차지 inline element라고 합니다.
<span>안녕하세요</span>
6.input 태그
input 태그는 텍스트, 레크박스,라디오,색깔,여러문장, 드롭다운,로그인 폼 등 다양하게 활용이 가능합니다.
해당 태그는 내용이 길어져 다음편 HTML(2)에 이어가겠습니다.
결론
TIL 정리)
01. HTML은 head와 body로 나뉘며 각 섹션 아래 다양한 태그가 존재한다.
02. 웹페이지를 만들면서 각 태그들에 익숙해지자!
참고_ 코딩하는 테크보이 워니 https://www.youtube.com/channel/UC0uDM1xZMNBAoW2xnzhAQ7g
