링크
현재 문서에서 다른 문서로 이동할 수 있는 수단
a태그
다른 페이지, 전화번호, 이메일 주소 등 다양한 유형의 콘텐츠로 연결되는 링크 역할을 함
타겟 특성을 추가하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정 가능
<a href="url"></a>
<body>
target="_self">
네이버로 가볼게요</a>
<br>
target="_blank">
네이버로 가볼게요</a>
<br>
<a
target="_blank"
href="profile.html">
내가 만든 프로필로 이동</a>
</body>
목록
연관 있는 항목들을 나열한 것
html 목록은 '순서 없는 목록'과 '순서 있는 목록'으로 구분
순서 없는 목록 : <ul></ul>
순서 있는 목록 : <ol></ol>
<li>목록에 들어가는 항목 하나하나 표기(감싸는 태그에 따라 기호가 달라짐)
<body>
<ul>
<li>강아지</li>
<li>고양이</li>
<li>거북이</li>
</ul>
<ol start="1" type="a">
<!--start 시작숫자-->
<!--type 다섯가지 종류-->
<li>배고파</li>
<li>졸려</li>
<li>행복해</li>
</ol>
<hr>
<h1>반려동물들의 특징</h1>
<ul>
<li>강아지</li>
<ul>
<li>귀엽다</li>
</ul>
</ul>
</body>
표 만들기
<table> 하나의 표 나타내는 태그
<tr> 하나의 행
<th> 행 안에서 제목에 해당하는 셀
<td> 행 안에서 콘텐츠에 해당하는 셀
<caption> <table>태그의 안쪽에서 설명을 나타내는 역할 수행
<thead> 표의 제목이나 주제
<tbody> 표의 본문
<tfoot> 표의 요약글이나 맺음말
<table border="1">
<caption>
<strong>고등학생</strong>
수학 커리큘럼
</caption>
<thead>
<tr>
<th>고1</th>
<th>고2</th>
<th>고3</th>
</tr>
</thead>
<tbody>
<tr>
<th>수학상</th>
<th>수학1</th>
<th>확률과통계</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>수학하</th>
<th>수학2</th>
<th>미적분</th>
</tr>
</tfoot>
입력
<input type="데이터유형">
<head>
<meta charset="utf-8">
<title>링크 표시하기</title>
</head>
<body>
<h1>로그인 해주세요</h1>
<label>
아이디<input type="text"
placeholder="아이디">
</label>
<br>
<label for="pw">비밀번호</label>
<input type="password"
placeholder="비밀번호" id="pw">
<!--아이디로 명시해주는 방법-->
<hr>
<input type="color">
<input type="number">
<input type="range">
<input type="checkbox"> 제육볶음
</body>
<select> 다수의 옵션을 포함할 수 있는 선택 메뉴
<input> 태그 한 줄밖에 입력받지 못함
<textarea>태그 사용하면 여러줄 텍스트 입력 가능
<progress>작업이 진행된 정도
<button>클릭을 입력으로 받는 버튼 요소를 만드는 태그
<head>
<meta charset="utf-8">
<title>링크 표시하기</title>
</head>
<body>
<fieldset>
<legent>음료주문</legent>
<h2>음료를 고르세요</h2>
<select>
<!--select 뒤에 multiple size 하면
여러개 보임-->
<option value="coffee">커피</option>
<option value="coke">콜라</option>
<option value="juice">쥬스</option>
<option value="water">생수</option>
<!--value 반드시 추가하기-->
<!--selected 먼저 선택하는 것-->
</select>
<br>
<h2>기타 음료 원한다면 자유롭게 써주세요</h2>
<textarea cols="38" rows="10"></textarea>
</fieldset>
<progress max="100" value="80"> </progress>
<br>
<button>호출</button>
<br>
<input type="button" value="호출">
</body>
양식을 만들고 값 전송하기
ex) 로그인, 회원가입, 검색어 입력 페이지
서버: 정보를 제공하는 호스트
<form>태그가 입력 값을 서버 측으로 제출할 수 있다
get: 서버로부터 정보를 가져오겠다는 요청
post: 서버에 요청을 보내어 작업을 수행한다
form 요소 안에는 반드시 name을 추가해 항목의 역할 구별 가능
<body>
<form action="none.com" method="post">
<label for="name">이름</label>
<input id="name" type="text" name="name">
<br>
<label for="age">나이</label>
<input id="age" type="text" name="age">
<br>
<label for="char">성격</label>
<textarea id="char" name="character">
</textarea>
<br>
<input type="submit">
</form>
</body>
name 지정 잊지 말기
action, method, submit 필요함~!
시맨틱 태그
시맨틱: 의미론적인
<의미>콘텐츠</의미>
=> 검색 엔진에게 좋은 단서가 됨
=>요소가 가진 목적이나 역할은 무엇인가?를 나타낸다
장점: 가독성 굿, 검색 엔진의 중요한 단서, 남용 방지(div 줄일 수 있음)
시맨틱 태그는 구성을 갖추고 각각의 의미를 가지고 있을 때 사용하게 됨
<header>
<main>
<footer>
<nav> 웹 페이지 메뉴 만들 때
등….
meta- HTML 문서에 대한 정보(메타데이터) 정의함
charset: 문자 인코딩에 대한 요약 정보 기입하는 속성
http-equiv: 인터넷에서 데이터 주고받을 수 있는 프로토콜
name을 이름으로, content 속성을 값으로 하여 문서 정보를 이름+값 쌍 형태로 제공할 때 사용 (가장많이사용)
<head>
<meta charset="utf-8">
<meta
http-equiv="x-ua-compatible"
content="IE=edge"
>
<meta name="author" content="daramdi">
<meta name="description" content="연습용 페이지">
<meta name="keywords" content="공부,HTML,실습">
<title>문서 정보 관리하기</title>
</head>
느낌표로 자동완성가능
