HTML & CSS
2023.04.07 HTML 기본 개념(1)
오류확인자
2023. 4. 7. 00:00
Hypertext Markup Language(HTML)
아래는 HTML의 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
</body>
</html>아래와 같이 태그를 넣었을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<h1>Headingh1</h1>
<h2>Headingh2</h2>
<button>Click Me!</button>
</body>
</html>아래와 같이
첫번째 h1 태그
두번째 h2 태그
세번째 button 태그로 나타난다.
HTML에는 여러가지 태그가 존재한다. 그 중에서 section으로 나뉠 수 있는 태그와 사용자들에게 보여지는 태그로 나뉜다.
그 중 section으로 나뉘는 태그의 종류는 아래와 같다.
header / section
footer / article(여거래가 들어갈 수 있고, 반복/재사용이 가능하다.)
nav / div(아무 곳에서나 사용할 수 있는 태그 / 묶을 수 있음)
aside / span
main / form
ITEM(사용자들에게 보여지는 태그)
a / video
button / audio
input / map
laber / canvas
img / table
Block
Block에 태그에 두개라고 하면 한 줄 에 한개
Inline
Inline은 태그를 두개 한다고 하면, 공간이 있다면 한 줄에 두개도 가능
Box vs Item
Box
<header></header>
<footer></footer>
<section></section>
<div></div>
<span></span>Item
<h1></h1>
<button></button>a 태그
<a href="링크할 주소" target="어디에 홈페이지를 열지"></a>Inline 줄 바꿈 x
<p>This is sentence. <b>That</b> is..</p>
<p>This is sentence. <span>That</span> is..</p>Block 자동으로 줄 바꿈 O
<p>This is sentence. <div>That</div> is..</p>ol, ul, li
<ol> - ol>li*3 / type="i"-> 로마자 변경 / reversed -> boolean값을 거꾸로 표시
<li>1</li>
<li>2</li>
<li>3</li><ul> - ul>li*3 -> dot으로 표시
<li>Hello</li>
<li></li>
<li></li>
</ul>
</ol>Input Inline
<label for="이름 정해줘서 그룹">Name: </label>
<input id="이름을 정해줘서 그룹" type="text">