태그
#HTML
HTML - 기본 사용법 & 기본 태그
2021년 6월 4일 01:28
기본 틀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</style>
</head>
<body>
</body>
</html>
기본 태그
- 줄바꿈 태그
안녕하세요<br>
HTML<br>
- 문단 태그
<p>
안녕하세요 첫 번 째 문단입니다<br>
안녕<br>
하이
</p>
- 제목 태그
<h1> 제목 1 </h1>
<h2> 제목 2 </h2>
<h3> 제목 3 </h3>
<h4> 제목 4 </h4>
<h5> 제목 5 </h5>
<h6> 제목 6 </h6>
- 수평선 태그
<hr>
- 입력하는 내용이 그대로 표현되는 태그
<pre>
안녕하세요
문단을 나눠보겠습니다
새로운 문단입니다
가나다라마
바사아자차
카타파하
</pre>
- 글씨를 진하게(굵게) 하는 태그
<b>굵은 글씨</b><br>
<strong>굵은 글씨2</strong>
<p>
태그 중간에 <strong>굵은 글씨</strong>를 넣어 강조할 수 있다
</p>
- 앵커 (anchor) : 하이퍼링크 태그
<a href="http://marondal.com" target="_blank">marondal로 갑니다</a>
- 이미지 태그
<img src="파일경로 또는 이미지 링크" alt="짱구">
- 리스트 태그
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
- 리스트 태그 2 (숫자 목록)
<ol>
<li>홍</li>
<li>채</li>
<li>민</li>
</ol>
- 리스트 안에 리스트 태그
<ul>
<li>과일의 종류</li>
<ul>
<li>사과</li>
<li>복숭아</li>
<li>파인애플</li>
</ul>
</ul>
- select 태그 :
- 속성 - attribute 속성명 = "값"
- property 프로퍼티명 : 값이 없는 애들
<b>좋아하는 과일은?</b> <br>
<select name="fruit" id="fruit">
<option selected>선택</option>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="strobery">딸기</option>
<option value="bluebery">블루베리</option>
</select>
- textarea 태그 : 텍스트 상자를 만듦
<b>자기소개</b> <br>
<textarea></textarea>
input 태그
- type="text" : 텍스트를 받을 수 있음
<b>ID</b> <input type="text">
- type="password" : 텍스트 박스인데 비밀번호 받는 것 처럼 받을 수 있음
<b>Password</b> <input type="password">
<b>Password 확인</b> <input type="password">
- type="radio" : name이 같으면 같은 이름의 태그 중 하나만 선택된다
(label은 글자를 눌러도 선택이 될 수 있게 해주는 태그)
<b>성별</b> <br>
<label><input type="radio" name="gender" value="male"> 남자 </label>
<label><input type="radio" name="gender" value="female"> 여자 </label>
- type="checkbox" : radio와 달리 여러게를 선택 할 수 있다
<b>취미</b> <br>
<!-- 정확히 하기 위해서는 아이디 만들고 아이디 이름을 라벨에다가 넣어준다 -->
<label for="Reading"><input type="checkbox" id="Reading" name="hobby" value="Reading"> 독서</label>
<label><input type="checkbox" name="hobby" value="Game"> 게임</label>
<label><input type="checkbox" name="hobby" value="Health"> 헬스</label>
<label><input type="checkbox" name="hobby" value="mountain"> 등산</label>
- type="file" : 파일을 업로드 할 수 있는 타입
<b>프로필 사진 업로드</b> <br>
<input type="file">
- type="submit" : data를 서버에 전송하는 버튼
<input type="submit" value="작성 완료">
일반 버튼
<button type="button"> 버튼 </button>
<!-- type을 submit으로 넣으면 얘도 서버로 보내주는 역할을 함 -->