[HTML] WHAT IS HTML
https://learn.shayhowe.com/html-css/
HTML과 CSS에 대한 기초 자료입니다. HTML, CSS에 대한 기초 지식이 없거나, 이미 알더라도 빠르게 다시 복습할 수 있는 자료입니다.
출처 : 코드스테이츠
관련문서 : CSS & SELECTOR
복습차원에서 올리는 글입니다.
WHAT IS HTML?
· HyperText Markup Language의 약자
· 웹 페이지의 틀을 만드는 마크업 언어
HOW TO USE HTML?
· HTML은 tag들의 집합
· Tag: 부등호(< >)로 묶인 HTML의 기본 구성 요소
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <h1>Hello world</h1> <div>Contents here <span>Here too!</span> </div> </body> </html> | cs |
· html 확장자 사용
비주얼스튜디오에서 html을 입력하면 simple HTML5 starting point 항목을 입력하면 자동 입력됨.
TREE STRUCTURE
· HTML 문서 시작
· html
· head
· title: Page title
· body
· h1: Hello world
· div: Contents here
· span: Here too!
SELF-CLOSING TAG
태그 내부에 내용이 없다면, (<tag></tag>와 같이 표현되는 경우) <tag/>와 같이 표현 가능
1 2 3 | <img src="codestates-logo.png"></img> <img src="codestates-logo.png" /> | cs |
div VS. span
1 2 3 4 5 6 | <div>div 태그는 한 줄을 차지합니다</div> <div>division 2</div> <span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다</span> <span>span 2</span> <span>span 3</span> <div>division 3</div> | cs |
a: 링크 삽입
1 | <a href="https://codestates.com" target="_blank">코드스테이츠</a> | cs |
target="_blank" => 새창으로 띄우기
ul, li: 리스트
1 2 3 4 5 6 7 8 9 | <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3 has nested list <ul> <li>Item 3-1</li> </ul> </li> </ul> | cs |
input, textarea: 다양한 입력 폼
1 2 3 4 5 6 7 8 9 10 | <input type="text" placeholder="type here"> <div> <input type="radio" name="choice" value="a"> a <input type="radio" name="choice" value="b"> b </div> <textarea></textarea> <div> <input type="checkbox" checked> checked <input type="checkbox"> unchecked </div> | cs |
<input type="checkbox" checked> checked
"checkbox" 옆에 checked라고 입력하면 체크된채로 나온다.
button: 버튼
1 | <button>Submit</button> | cs |
HOW TO EMBED JAVASCRIPT IN HTML
· JavaScript를 HTML에서 사용하는 방법
1. HTML 내부에 작성
2. HTML 외부에 작성
1. HTML 내부에 작성
· <script> 태그 이용
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> console.log('write your JS here'); </script> <body> </html> | cs |
<script type="text/javascript">
type을 넣어도 되지만 안넣어도 기본적으로 javascript라고 인식.
2. HTML 외부에 작성
· <script>태그의 src 속성 이용
index.html (html에서 javascript파일 불러오기)
1 | <script src="main.js"></script> | cs |
main.js
1 | console.log('write your JS here'); | cs |
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> 등의 태그를 권장하지 않는지