본문 바로가기
프로그래밍/HTML

HTML - 기초

by hustle-ing 2023. 3. 30.

HTML(HyperText Markup Language)

웹 페이지의 틀을 만드는 마크업 언어

 

 

여러가지 tag를 이용한 HTML 예시

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <!-- 기본 셋팅 -->
<body>
<div>div</div> <!-- 한줄을 차지한다 -->
<span>span</span> <!-- 컨텐츠 크기만큼 공간을 차지한다 -->
<span>sapn</span>
<img src = "./IMG_0713.JPG"> <!-- 닫는 태그를 쓰지 않아도 된다 -->
<a href="https://google.com" target="_blank">구글</a> <!-- 링크를 만든다 -->
<ul> <!-- unodered list -->
<li>1</li>
<li>2</li>
</ul>
<ol> <!-- odered list -->
<li>1</li>
<li>2</li>
</ol>
<input type = "text" placeholder="type here"> <!-- text. 아이디, 비밀번호 같은 입력폼에 유용 -->
<input type = "checkbox" name="check" value="d"> d <!-- checkbox. 모두 선택 가능 -->
<input type = "checkbox" name="check" value ="c"> c
<input type = "radio" name="choice" value="a"> a <!-- radio. 하나만 선택 가능. name 속성을 이용하여 그룹나눔-->
<input type = "radio" name="choice" value="b"> b
<textarea></textarea> <!-- 줄바꿈이 가능한 입력폼 -->
<button>submit</button> <!-- 버튼 -->
</html>

 

 

'프로그래밍 > HTML' 카테고리의 다른 글

HTML - Sementic Element  (0) 2023.04.02
HTML에서 JavaScript를 body의 끝부분에 연결하는 이유  (0) 2023.03.07

댓글