HTML(HyperTextMarkupLanguage)은 웹 페이지의 틀을 만드는 마크업 언어이다. HTML의 구조를 잘 짜놓아야 우리가 자바스크립트로 개발할 때에 더욱 직관적으로 코드를 짤 수 있다.
HTML은 tag들의 집합으로 이루어져 있다.
Tag : 부등호 (<>)로 묶인 HTML의 기본 구성 요소이다.
<!DOCTYPE html> 이 문서가 HTML 문서임을 명시
<html> html 시작 태그로, 문서 전체의 틀을 구성
<head> head 태그는 문서의 메타데이터를 선언
<title>Page title</title> 문서의 제목, 브라우저의 탭에 보여짐
</head> </태그이름>은 해당 태그가 끝났음을 의미
<body> body 태그는 문서의 내용을 담는 곳
<h1>Hello world</h1> heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
<div> Contents here content division을 의미하며, 줄바꿈됨
<span>Here too!</span> 줄바꿈이 없는 content 컨테이너
</div> div 태그가 끝났음을 의미
</body> body 태그가 끝났음을 의미
</html> html 태그가 끝났음을 의미<img src="<값>"></img>
<img src="<값>" />- 태그 내부에 내용이 없다면,
<tag/>와 같이 표현 가능
<div> 태그는 한 줄을 차지한다.
<span> 태그는 컨텐츠 크기만큼 공간을 차지한다.
<img src=""> 이미지 태그는 속성=값으로 표현하며, 닫는 태그가 없다.
<a href=""> 링크 태그는 링크를 눌렀을때 그 주소로 가게된다.
<ul><li> 트리구조로 리스트를 만들 수 있다.
<ol><li> 번호순서로 리스트를 만들 수 잇다.입력폼 만들기
1.text
<input type="text" placeholder ="type hrere">줄바꿈이 되지 않는 텍스트박스
2.radio
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b a
b
3.textarea
<textarea></textarea>줄바꿈이 되는 텍스트박스
4.checkbox
<input type="checkbox" checked> 옵션1
<input type="checkbox" > 옵션2미리 체크할 수 있다.그리고 name속성으로 그룹설정을 해줄 수 있다.
옵션1
옵션2
5.button
<button>버튼</button>버튼
HTML 내부에 js사용
<!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> console.log('write your JS here'); </script> <body> </html>
HTML 외부에 js사용
index.html >> <script src="main.js"></script> main.js >> console.log("write your JS here");
나중에 정리할 것
LEARN YOURSELF: HTML
MDN HTML elements
HTML 구조 관련 태그
<html>
<head>
<body>
<style>
<script>
<meta>
HTML 컨텐츠 관련 태그
<div> vs. <span>
<a href="url">
<ul>, <li>
<img>
<iframe>
<br>
<table>, <thead>, <tbody>, <tr>, <th>, <td>
<code>, <pre>
HTML 폼 관련 태그
<form>
<input> (type: text, checkbox, color, date, password...)
<button>
<textarea>
<select>, <option>
왜 <b>, <font>, <center> 등의 태그를 권장하지 않는지
.
.
.
.
.
.
.
개발자가 되기까지