Front-end/HTML
HTML 태그 종류
OlttaeMelona
2022. 9. 1. 00:12
🌟HTML의 <Tag> 종류를 알아보자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- IE브라우저의 최신버전 엔진을 사용하라는 뜻-->
<meta http-equiv="x-ua-compatible" content="IE-edge">
<!-- 10초마다 페이지를 새로고침 하라는 뜻-->
<meta http-equiv="refresh" content="10">
<!-- 문서 제작자 -->
<meta name="author" content="올때메로나">
<!--페이지에 대한 요약. 브라우저 즐겨찾기 페이지 기본설정 값-->
<meta name="desciption" content="올때메로나의 TIL블로그">
<!-- 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록-->
<meta name="keywords" content="자바, 스프링, 깃허브, html, css, 해쉬태그같음">
<!-- viewport : 기기별 배율이 다르기때문에 대응하기 위함-->
<!-- 뷰포트 너비를 단말기에 맞추고, 초기 배율을 1로 한다-->
<mata name="viewport" content"width=device-width, initial-scale=1.0">
<title>태그 종류</title>
</head>
<body>
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
<p>
글
줄바꿈<br>
공 백
<strong>굵은글씨<strong>
<em>이텔릭체<em>
<mark>글에 형광색 칠하기<mark>
</p>
<textarea
name="write"
rows="100" cols="20">
여러줄을
작성해도 그대로
출력 한다 textarea 최고!
길어지면 자동으로 스크롤이 생긴다
알아두자~~!
</textarea>
<!--1. src는 sources의 약자-->
<!--2. alt는 alternative의 약자 대체 택스트
- 시각장애인을 위해 사용 - 텍스트를 음성으로 읽어줌 -->
<!--3. 서버에 위치한 이미지파일, 내 컴퓨터에 저장된 이미지 파일-->
<img
src="이미지파일경로"
alt="이미지설명"
width="너비값px"
height="높이값px" />
<!-- 컨테이너 : 컨텐츠나 레이아웃에 영향이 없는 요소 -->
<div>블록 컨테이너/ 여러 요소를 묶는 역할</div>
<span>인라인 컨테이너/ 여러 요소를 묶는 역할</span>
<!-- 전역 속성 : 모든 HTML 태그에서 공통사용 속성 -->
<div
id="#고유이름부여"
class=".그룹으로 묶는 식별자"
style="css스타일 적용"
title="요소의 추가 정보/툴팁">
</div>
<!-- a태그는 anchor의 약자 -->
<!-- target 속성 : 문서를 현재탭에서 열지 새로운 탭에서 열지 결정-->
<a href="url" target="_self">
현재 탭에서 열기(기본값)
</a>
<a href="url" target="_blank">
새 탭에서 열기
</a>
<a href="tel:010-1234-5678" target="_self">
전화 걸기 (진짜 걸림)
</a>
<a href="mailto:abc@naver.com" target="_blank">
메일 쓰기
</a>
<!--순서없는 목록-->
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
<!--순서있는 목록-->
<ol>
<li>항목1</li>
<li>항목2</li>
<ol>
<!-- input은 인라인요소-->
<!-- name 속성 : JavaScript와 Server로 사용자가 입력한 데이터를 처리할때 사용-->
<input type="기본값은 text, 20여 종류" name="식별자" />
<input
type="text"
maxlength="5,글자수 제한"
placeholder="미리 써있는 텍스트"
readonly/>
<input type="password"
required="필수로 채워야함" />
<input
type="button"
value="버튼에 써지는 값, 이름"/>
<input type="color"/>색상 선택
<input
type="range"
max="100"
min="0"
step="10"
value="50"/>값의 범위지정
<input
type="date"
min="2000-01-01"
max="2022-12-31"/>날짜 선택
<!-- 옵션 선택 메뉴 -->
<!-- value는 서버가 처리할때 사용하는 값-->
<!-- multiple 속성 : 옵션을 여러개 선택할 수 있음, 펼쳐짐-->
<select name="research" multiple>
<option value="all">전체</option>
<option value="title">제목</option>
<option value="writer">작성자</option>
</select>
<!-- form : 사용자가 입력한 데이터를 서버로 보내기 위한 태그-->
<!-- action 속성 : 서버로 보낼 경로지정 -->
<!-- submit 누르면 입력된 아이디와 비밀번호가 서버로 전송(요청)
서버측에서 데이터 처리 결과를 클라이언트로 보내줌 (응답)-->
<form action="서버의 url, 매핑값" method="전송방식:get,post">
<input name="id" type="text" placeholder="아이디"/>
<input name="pw" type="password" placeholder="비밀번호"/>
<input name="login-submit" type="submit" value="로그인"/>
</form>
<form action="animal.jsp" method="전송방식:get,post">
<input name="name" type="text" placeholder="name">
<select name="animal">
<option value="dog">강아지</option>
<option value="cat">고양이</option>
<option value="lion">사자</option>
</select>
<input type="submit" value="전송">
</form>
</body>
</html>