HTML
What is HTML?
- HyperText Markup Language의 약자
- 웹페이지의 틀을 만드는 마크업 언어
How to use HTML?
- HTML은 tag들의 집합
- Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소
- html 확장자 사용
Tree Structure
<!DOCType html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
<div>Contents here
<span>Here too!</span>
</div>
</body>
</html>
Self-Closing Tag
태그 내부에 내용이 없다면, (<tag></tag>와 같이 표현되는 경우) <tag/>와 같이 표현 가능
<img src="codestates-logo.png"></img>
<img src="codestates-logo.ong" />Most used tags in html
| 태그 | 설명 |
| <div> | Division |
| <span> | Span |
| <img> | Image |
| <a> | Link |
| <ul> & <li> | Unordered List & List Item |
| <input> | Input (Text, Radio, Check Box) |
| <textarea> | Multi-Line Text Input |
| <button> | Button |
div VS span
<div>div 태그는 한 줄을 차지합니다.</div>
<div>division 2</div>
<span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다.</span>
<span>span2</span>
<span>span3</span>
<div><division 3</div>
img:이미지 삽입
<img src="https://i.imgur.com/JAVj4tO.jpg">
a:링크 삽입
<a href="https://codestates.com" target="_blank">코드스테이츠</a>
ul, li:리스트
<ul>
<li>item1</li>
<li>item2</li>
<ul>
<li>item3</li>
</ul>
</ul>
input, textarea:다양한 입력 폼
<input type="input" placeholder="type here">
<div>
<input type="raido" name="choice" value="a">a
<input type="raido" name="choice" value="b">b
</div>
<textarea></textarea>
<div>
<input type="checkbox" checked>checked
<input type="checkbox">unchecked
</div>
button:버튼
<button>Submit</button>'TIL > Code States' 카테고리의 다른 글
| Code States 8일차 - CLI 기본 명령어 (0) | 2021.07.28 |
|---|---|
| Code States 6일차 - CSS 기초 (0) | 2021.07.26 |
| Code States 4일차 - 반복문 (0) | 2021.07.23 |
| Code States 3일차 - 문자열 다루기 (0) | 2021.07.21 |
| Code States 2일차 - 기초 (0) | 2021.07.20 |