HTML 요약
<!DOCTYPE html> 웹 브라우저에 어떤 표준에 따르는 html인지 알려주는 용도
<html> 은 문서의 head와 body를 감싸야 함
<head> 는 html의 첫 소개를 감싸야 함
<body> 는 html의 본문을 감싸야 함
<title> html의 인터넷 창 위 제목
한글 요류 발생 -> <meta charset="utf-8"> 추가
<strong> 해당 구역 문자 굵게
<a href="링크" html 실습> 해당 문자(html 실습) 클릭 시 해당 링크로 이동
<a href="링크" target="_blank" html 실습> 해당 문자(html 실습) 클릭 시 새로운 창 열고 링크된 링크로 이동
<a href="링크" title="링크로 이동합니다" html 실습> 해당 문자(html 실습)위에 커서 올리면 title 문장 보여줌
<ol> 은 html의 각 문단.주제를 나눠줄 때 씀
<li> 는 숫자 리스트로 표현
<!DOCTYPE html>
<html>
<head>
<title>수업 소개</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML</h1>
<ol>
<li>기술소개</li>
<li>숫자 리스트</li>
<li>EX 1. 2. 3. ~</li>
</ol>
</body>
</html>
• <p>
↪ 단락을 나눠줌
• <br>
↪ 줄바꿈
↪ </br> 을 하지 않음 (닫지 않아도 됨)
• <img>
↪ <img src="img.jpg" width="100" height="50" alt="산 이미지">
↪ </img> 를 하지 않아도 됨
↪ 만약 이미지 경로가 잘못 되면 alt의 "산 이미지" 텍스트를 보여줌 (alternative text)
↪ <img src="img.jpg" width="100" alt="산 이미지" title="산 이미지">
title 태그로 인해 이미지에 커서를 붙이면 "산 이미지" 텍스트를 보여줌
• <table>
↪ 표
↪ <table border="2">: table의 테두리 정하기
↪ <tr> : table row (행)
↪ <td> : table의 한 칸
↪ <thead> : 표의 카테고리 -> 진하게 바꿔줌
↪ <tbody> : 표의 정보
↪ <tfoot> : 표의 가장 아래에 위치하게 됨
<html>
<body>
<table border="2">
<thead>
<tr>
<td>이름</td> <td>성별</td> <td>주소</td>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td> <td>남</td> <td>청주</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>서울</td>
</tr>
</tbody>
</table>
</body>
</html>
↪ 표 병합
↪ <td rowspan="2">청주</td>: 두 개의 행이 병합됨 (해당 칸과 바로 밑의 칸 병합)
↪ <td colspan="3">합계</td>: 세 개의 열이 병합됨 (오른쪽 두 칸과 병합)
• <span>
↪ 특별한 기능을 가지고있지는 않음
↪ CSS와 쓰임
↪ display속성이 inline (= 줄바꿈이 안 됨)
• <form>
↪ 사용자가 입력한 정보를 서버로 전달하는 역할
↪ <input type="password"> : 몇 글자를 입력했는지만 알 수 있음 ( • 으로만 출력됨 )
↪ <input type="submit"> : 서버에 제출할 수 있는 버튼 생성
↪ <form action="보낼 곳"> : form data를 서버로 보낼 때 해당 데이터가 도착할 URL 명시
↪ 아이디 : <input type="text" name="id"> : 서버에 전달 될 때, name의 값으로 전달 됨
↪ <input type="text" name="id" value="default value"> : 입력할 칸에 기본적으로 써져있는 문자
↪ <textarea> : 여러 줄을 입력 가능한 공간
<html>
<body>
<form action="">
<p>아이디 : <input type="text" value="default value" name="id"></p>
<p>비밀번호 : <input type="password" value="default value" name="pwd"></p>
<p>주소 : <input type="text" name="address"></p>
<p>textarea:
<textarea cols="50" rows="10">default value</textarea>
<input type="submit" name="">
</form>
</body>
</html>
↪ Dropdown List
: 제한된 공간 안에서 여러가지 선택지를 선택 가능하게 하는 것
↪ <option value="red">붉은색</option> : value로 설정한 red가 전송됨
↪ <select name="color2" multiple> : 다중 선택 가능 (multiple)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://localhost/color.php">
<h1>색상1</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<h1>색상2 (다중선택)</h1>
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit" name="">
</form>
</body>
</html>↪ radio
<input type="radio" name="color">
<input type="radio" name="color">
↪ 둘 중 하나만 선택 가능 ( 둘 다 color 라는 이름을 가졌기 때문)
아래 코드는 단일 색상만 선택 가능한 코드
붉은색: <input type="radio" name="color" value="red">
검은색: <input type="radio" name="color" value="black">
↪ checkbox
↪ 다중 선택 가능
↪ 기본적으로 선택되어져 있는 상태 => <input type="checkbox" name="size" checked>
↪ radio도 마찬가지
<h1>사이즈(다중 선택)</h1>
95: <input type="checkbox" name="color2">
100: <input type="checkbox" name="color2">
105: <input type="checkbox" name="color2"><html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="https://localhost/order.php">
<p>
<h1>색상(단일 선택)</h1>
붉은색: <input type="radio" name="color" value="red">
검은색: <input type="radio" name="color" value="black">
</p>
<p>
<h1>사이즈(다중 선택)</h1>
95: <input type="checkbox" name="size" value="95">
100: <input type="checkbox" name="size" value="100">
105: <input type="checkbox" name="size" value="105" checked>
</p>
<input type="submit">
</form>
</body>
</html>↪ 버튼
↪ <input type="reset"> : 입력칸에 채워져있던 내용이 빈칸이 됨 (재설정)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" value="버튼" onclick="alert('hello world')">
<input type="reset">
</form>
</body>
</html>
↪ hidden field
↪ <input type="hidden" name="hide" value="egoing"> : UI가 없지만 서버로 전송해야 하는 경우
↪ label
↪ <label>text</label> : text는 무언가의 이름표라는 것을 표시
↪ for=" ... " : ...의 이름표라는 의미
<label for="id_txt">text :</label>
<input id="id_txt" type="text" name="id">
위와 동일함
<label text:
<input type="text" name="id">
</label>
↪ method
<form action="http://localhost/method.php" method="post">↪ post 방식으로 데이터를 전송 => url에 뜨지 않음
↪ *get 방식은 url을 통해서 데이터를 전송하는 것
↪ 파일 업로드
↪ type="file"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<!-- type="file" : 사용자가 파일을 전송할 수 있는 UI를 만듦 -->
<input type="file" name="profile">
<input type="submit">
</form>
</body>
</html>
• <meta>
↪ 어떠한 데이터가 있으면 그 데이터를 설명하는 데이터를 메타데이터라고 함
<meta name="description" content="생활코딩의 소개자료">↪ 검색 시, 검색 결과의 요약에 meta 태그의 description이 요약자료로 나올 확률이 높음
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="생활코딩의 소개자료">
<meta name="keywords" content="코딩, coding">
<meta name="author" content="egoing">
</head>
</html>
• <의미론적 태그 semantic>
↪ <header> : 사용해도 아무런 변화도 없음
↪ <footer> : header가 있을 경우 footer도 있는 경우가 많음
↪ <nav> : 네비게이션 역할을 하는 정보라는 표시
↪ <article> : 해당 영역이 본문이라는 표시
↪ <section> : article을 포함한 문서의 구획들을 정의
• <검색엔진 최적화 (SEO)>
↪ 의미론적으로 작성하는 것이 최선
↪ rel="canonical" : 같은 문서가 여러개라면 한 가지 형태의 URL을 제공
• <모바일 지원>
<meta name="viewport" content="width=device-width", initial-scale=1.0">↪ name="viewport"
↪ content="width=device-width" : 내용을 화면 폭에 맞춤
↪ initial-scale=1.0" : 화면을 확대•축소하지 않은 상태에서 시작함
• <HTML5의 새로운 제출양식>
↪ <input type="number"> : 사용자가 number만 입력 가능
- <input type="hidden">
사용자에게 보이지 않는 숨겨진 입력 필드를 정의
숨겨진 입력 필드는 렌더링이 끝난 웹 페이지에서는 전혀 보이지 않으며, 페이지 콘텐츠 내에서 볼 수 있게 만드는 방법도 없음
=> 숨겨진 입력 필드는 폼 제출 시 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용됨
• <div>
특별한 기능을 가지고있지는 않음
스타일을 지정해주는 태그
display속성이 block (=줄바꿈이 됨)
<div style="background-color:red">예시1</div>
<div style="width:100px; height:100px; border:3px solid black; float:right>예시2</div>| width | 가로 크기 |
| height | 세로 크기 |
| border | 테두리 크기 |
| background-color | 배경 색상 |
| float | 정렬 |
| margin | 여백 |