[태그 소개]
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags.
developer.mozilla.org
http://html5doctor.com/element-index/
Element Index | HTML5 Doctor
This is a quick reference of elements that are new or have been redefined in HTML5. For each element there is a short description, a link to the specification, and a code example. “Our prognosis” links to the HTML5 Doctor article on the element. There
html5doctor.com
https://www.w3schools.com/tags/default.asp
HTML Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
태그를 학습하거나 찾을 때 사용하면 좋은 사이트이다.
[제목과 단락요소]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>haeding tags</title>
</head>
<body>
<h1>역사 [편집]</h1> <!--가장 큰 제목 태그(title)-->
<h2>개발 [편집]</h2> <!--제목 태그(title)-->
<p>팀 버너스리<br>
<!--<br> : 개행 태그 (줄바꿈 태그)
-> <p> 태그 내 강제 개행 시 필요-->
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가
HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고
공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는
메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버
소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와
함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지
못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의
일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.</p>
<h2>최초 규격 [편집]</h2>
<p>HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를
"HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5]</p>
<p>그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한
디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인
SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히
존재한다.[6]</p>
<!--<p> : 문단 태그
1. 화면 별다른 표시 x
2. 코드로 문단 표시
3. 단락별로 줄바꿈 됨-->
</body>
</html>
<h1> </h1>
<h2> </h2>
...
<h6></h6>
: 제목 태그
1. 강조 스타일 적용
<p> </p>
: 문단 태그
1. 코드로 문단 표시
2. 단락별 줄바꿈
<br>
: 개행 태그
1. 줄바꿈
2. <p> </p> 태그 내 강제 개행 시 필요
[텍스트를 꾸며주는 요소]
<b> : 글자 굵게 표현
<i> : 이탤릭체
<u> : 밑줄
<s> : 중간선
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>haeding tags</title>
</head>
<body>
<p>
<b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
<!--<b> : 굵은 글씨
<i> : 이탤릭체-->
<u>Lorem</u> <s>ipsum</s> dolor sit amet
<!--<u> : 밑줄
<s> : 취소선-->
</p>
</body>
</html>
<a href="http://www.naver.com/">네이버</a>
앵커(Anchor) 태그
1. 링크 생성
2. href : 링크 목적지 URL
3. 앵커 태그 클릭 -> 해당 링크 이동
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
<a>: The Anchor element - HTML: HyperText Markup Language | MDN
The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
developer.mozilla.org
<target>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>a tag</title>
</head>
<body>
<a href="http://www.naver.com" target="_blank">네이버</a>
</body>
</html>
네이버 클릭 - (new 탭) naver 이동
내부링크
<a href="#some-element-id> h1으로 이동하기 </a>
<h1 id="some-element-id> h1 </h1>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>haeding tags</title>
</head>
<body>
<h1 id="top">역사 [편집]</h1> <!--가장 큰 제목 태그(title)-->
<h2>개발 [편집]</h2> <!--제목 태그(title)-->
<p>팀 버너스리<br>
<!--<br> : 개행 태그 (줄바꿈 태그)
-> <p> 태그 내 강제 개행 시 필요-->
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가
HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고
공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는
메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버
소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와
함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지
못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의
일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.</p>
<h2>최초 규격 [편집]</h2>
<p>HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를
"HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5]</p>
<p>그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한
디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인
SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히
존재한다.[6]</p>
<!--<p> : 문단 태그
1. 화면 별다른 표시 x
2. 코드로 문단 표시
3. 단락별로 줄바꿈 됨-->
<p>2. 팀 버너스리<br>
<!--<br> : 개행 태그 (줄바꿈 태그)
-> <p> 태그 내 강제 개행 시 필요-->
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가
HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고
공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는
메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버
소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와
함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지
못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의
일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.</p>
<h2>최초 규격 [편집]</h2>
<p>HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를
"HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5]</p>
<p>그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한
디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인
SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히
존재한다.[6]</p>
<p>3. 팀 버너스리<br>
<!--<br> : 개행 태그 (줄바꿈 태그)
-> <p> 태그 내 강제 개행 시 필요-->
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가
HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고
공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는
메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버
소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와
함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지
못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의
일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.</p>
<h2>최초 규격 [편집]</h2>
<p>HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를
"HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5]</p>
<p>그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한
디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인
SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히
존재한다.[6]</p>
<p>4. 팀 버너스리<br>
<!--<br> : 개행 태그 (줄바꿈 태그)
-> <p> 태그 내 강제 개행 시 필요-->
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가
HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고
공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는
메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버
소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와
함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지
못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의
일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.</p>
<h2>최초 규격 [편집]</h2>
<p>HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를
"HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5]</p>
<p>그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한
디자인이었다. 하이퍼링크를 제외한 <a href="#top">HTML</a> 태그들은 CERN 자체의 SGML 기반 문서화 포맷인
SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히
존재한다.[6]</p>
</body>
</html>
[의미가 없는 컨테이너 요소]
<div> : block-level
<span> : inline-level
스타일 주기 위해, 서버에서 보내는 데이터를 담기 위한 목적으로 주로 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>haeding tags</title>
</head>
<body>
<div> <!--block level : 라인 한 줄-->
<span>Lorem</span> ipsum dolor sit. <!--inline level : block level 요소 안 사용(주로)-->
</div>
</body>
</html>[리스트 요소]
<ul> : unordered lish / 순서 X
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>haeding tags</title>
</head>
<body>
콩나물국 레시피
<ul>
<li>콩나물</li>
<li>파</li>
<li>국 간장</li>
</ul>
</body>
</html>
<ol> : ordered list / 순서 O
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>haeding tags</title>
</head>
<body>
콩나물국 레시피
<ol>
<li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵 만든다.</li>
<li>콩나물 넣고 뚜껑 덮어 콩나물이 익을 대까지 끓인다.</li>
<li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
</ol>
</body>
</html>
<dl> : description list / 용어 설명
<dt> : definition term / 용어 구분
<dd> : definition description / 용어 정의
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>haeding tags</title>
</head>
<body>
<dl>
<dt>리플리 증후군</dt>
<dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복함</dd>
<dt>피그말리온 효과</dt>
<dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
<dt>언더독 효과</dt>
<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>
</body>
</html>
*용어 하나에 여러 개의 정의가 들어갈 수 있음
리스트 중첩
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>haeding tags</title>
</head>
<body>
<h1>월드컵 조 편성</h1>
<ol> <!--부모 태그-->
<li> <!--자식 태그-->
A조
<ul>
<li>러시아</li>
<li>우루과이</li>
<li>이집트</li>
<li>사우디아라비아</li>
</ul>
</li>
<li>
B조
<ul>
<li>이란</li>
<li>스페인</li>
<li>포르투갈</li>
<li>모로코</li>
</ul>
</li>
<li>
C조
<ul>
<li>프랑스</li>
<li>덴마크</li>
<li>호주</li>
<li>페루</li>
</ul>
</li>
<li>
D조
<ul>
<li>크로아티아</li>
<li>아르헨티나</li>
<li>아이슬란드</li>
<li>나이지리아</li>
</ul>
</li>
</ol>
<!--li 태그는 부모 태그로 ol, ul 태그를 가져올 수 있다.
li 태그 안 div, p 태그(자식 태그) 등이 올 수 있다.
ol 태그는 자식 태그로 li 태그만 올 수 있다. (div, p 태그 올 수 없음)-->
<!--list 중첩 : 헷갈려서 실수 할 수 있음 -> 들여쓰기로 실수 방지-->
</body>
</html>
[이미지 요소]
<img src="./images/pizza.png" alt="피자">1.
시각장애인은 이미지를 확인할 수 없다.
스크린 리더는 시각장애인에게 alt에 적혀 있는 이미지 정보값을 읽어준다.
따라서 시각장애인은 해당 이미지를 볼 수 없지만, 해당 이미지 정보가 피자라는 것은 알 수 있다.
서버에서 이미지를 가져오지 못하는 경우, alt에 적혀 있는 이미지 정보값을 대체 텍스트로 나타낸다.
(너무 디테일한 설명이 들어가면 혼란스러우므로 alt 값은 간략하게 적는 것이 좋다.)
2.
보통 이미지의 크기는 CSS를 통해 제어한다.
(이미지가 유동적으로 변하는 경우가 많이 있다. -> 화면 크기에 따라 다르게 보여야 하는 경우)
이미지의 크기가 고정적이여야 한다면 width / height를 통해 크기를 지정한다.
(성능적인 면에서 더 좋다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>image</title>
</head>
<body>
<img src="./bike.jpg" alt="Bike" width="700" height="500">
<!--
alt : 전달해야 하는 정보만 기재
width : 이미지 넓이, width만 지정하면 height 크기까지 같은 비율로 조정된다.
height : 이미지 높이-->
</body>
</html>
대체 이미지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>image</title>
</head>
<body>
<img src="http://via.placeholder.com/250" alt="" >
</body>
</html>
▶부스트코스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>image</title>
</head>
<body>
<img src="http://placeholder.it/500x250" alt="" >
</body>
</html>http://placeholder.it/ 그대로 적어서 실행시켰는데 대체 이미지가 나오지 않았다.
다행히 위 사이트로 입력하니 대체 이미지가 나왔다.
[placehold.it] 원하는 크기 이미지 제공 사이트
Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers
Contents1 What Is Placeholder.com?2 How To Use Our Placeholders3 How To Set Image Size4 How To Set Image Formats5 How To Set Custom Text6 How To Set Background & Text Color6.1 Popular Hex Color Codes7 New! WEBP Support8 New! HTTPS Support9 NEW! Placeholde
placeholder.com
| 상대경로 | 절대경로 |
| 현재 웹 페이지 기준 상대적 이미지 위치 나타냄 | 실제 이미지 위치한 곳 전체 경로 |
| ./ (현재 .html 파일 위치한 폴더) ../ (상위 폴더 한 번 이동 명령) ../../ (상위 폴더 두 번 이동 명령) 폴더이름/ (하위 폴더 이동 명령) |
C:/ http:// |
| GIF | JPG | PNG |
| 256색 (제한적) / 해상도 낮은 이유 용량 작음 애니메이션, 투명 이미지 가능 |
압축률 높음 자연스러운 색상 표현 가능 사진, 일반 그림 사용 투명 지원 X |
이미지 손실 X 투명, 반투명 지원 용량 높음 |
*PNG : 요즘 웹에서 자주 쓰임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>image</title>
</head>
<body style="background-color: black;">
<img src="./pizza.png" alt="pizza" width="400" height="200">
<!--png : 투명 지원-->
<img src="./goodpizza.jpg" alt="pizza" width="400" height="200">
<!--jpg : 투명 지원 X-->
</body>
</html>
https://www.pngegg.com/ko/search?q=pizza
Pizza PNG 이미지 | PNGEgg
www.pngegg.com
[테이블 요소 1]
데이터 표를 나타내는 태그
| →row | ↓column | ||
<td>, <th> : 데이터 셀
<tr> : 행 (table-row)
<table> : 표
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>table</title>
<!--CSS 사용 / table 선 추가-->
<style media="screen">
td{border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table> <!--table 만들기-->
<tr> <!--tr : 행-->
<td></td><td></td><td></td><td></td> <!--td : 셀-->
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</table>
</body>
</html>
<caption> : 표의 제목
<thead> : 제목 행을 그룹
<tfoot> : 바닥 행을 그룹
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>table</title>
<!--CSS 사용 / table 선 추가-->
<!--td만 쓰면 td 부분만 표가 그려짐-->
<style media="screen">
th,td{border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot> <!--순서 상관 없음-->
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody> <!--본문 태그-->
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
colspan : 셀 가로방향 병합
rowspan : 셀 세로방향 병합
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>table</title>
<!--CSS 사용 / table 선 추가-->
<!--td만 쓰면 td 부분만 표가 그려짐-->
<style media="screen">
th,td{border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot> <!--순서 상관 없음-->
<tr>
<td colspan="2">Sum</td>
<!--colspan : 열 데이터 병합-->
</tr>
</tfoot>
<tbody> <!--본문 태그-->
<tr>
<td>January</td>
<td rowspan="2">$100</td>
<!--*rowspan : 행 데이터 병합-->
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>
</body>
</html>
[테이블 요소 2]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>table</title>
<style media="screen">
th,td{border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<caption>Specification values</caption>
<thead>
<tr>
<th rowspan="2">Grade.</th>
<th rowspan="2">Point.</th>
<th colspan="2">Strength.</th>
<th rowspan="2">Percent.</th>
</tr>
<tr>
<th>kg/mm</th>
<th>lb/in</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hard</td>
<td>0.45</td>
<td>56.2</td>
<td>80,000</td>
<td>20</td>
</tr>
<tr>
<td>Medium</td>
<td>0.45</td>
<td>49.2</td>
<td>70,000</td>
<td>25</td>
</tr>
<tr>
<td>Soft</td>
<td>0.45</td>
<td>42.2</td>
<td>60,000</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>
<colgroup> : 테이블 내 열 그룹 정의
<col> : (colgroup 자식 태그) 테이블 내 열 정의, 모든 공통 셀에 공통 의미론 정의
scope : (웹 접근성 위함) th, td 해당 셀에게 사용.
col인지 row인지 여부 알려주는 역할.
-> 스크린 리더기 경우 어떤 순서로 읽을지 결정하게 됨
headers : 로고, 검색폼, 작성자 이름, 제목, 제목과 관련된 정보 등 담고 있음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>table</title>
<style media="screen">
th,td{border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<caption>Superheros and sidekicks</caption>
<colgroup>
<col>
<col span="2" class="batman">
<col span="2" class="flash">
</colgroup>
<tr>
<td> </td>
<th scope="col">Batman</th>
<th scope="col">Robin</th>
<th scope="col">The Flash</th>
<th scope="col">Kid Flash</th>
</tr>
<tr>
<th scope="row">Skill</th>
<td>Smarts</td>
<td>Dex, acrobat</td>
<td>Super speed</td>
<td>Super speed</td>
</tr>
</table>
</body>
</html>
[폼 요소 1] : 서버에 데이터를 전달하기 위한 요소들
input : 다양한 type 속성, 여러 종류의 입력 양식으로 나타남
(text, password, radio, checkbox, file, image, submit, reset, button, ...)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="영문으로만 써주세요"><br>
<!--placeholder : 미리보기 (가이드)-->
비밀번호 : <input type="password"><br>
<!--password : 비밀번호 값 노출 X-->
성별 : 남자 <input type="radio" name="gender" checked>, 여자 <input type="radio" name="gender"><br>
<!--name : 클릭하면 다른 radio 버튼 클릭 상태 해제 명시 (상호 배타적관계)-->
<!--checked : 값 없음, 속성이 존재하면 그것만으로 true, 속성이 없으면 false
-> 사용자가 체크하지 않더라도 미리 기본값으로 지정됨-->
취미 : 영화감상 <input type="checkbox" name="hobby" checked>, 음악감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby">
<!--checkbox : 중복 선택 가능-->
<!--name 속성 : 값 묶어줘야 값 전달 될 때 잘 구분되어서 전달 됨-->
</body>
</html>
[폼 요소 2]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="영문으로만 써주세요"><br>
비밀번호 : <input type="password"><br>
성별 : 남자 <input type="radio" name="gender" checked>, 여자 <input type="radio" name="gender"><br>
취미 : 영화감상 <input type="checkbox" name="hobby" checked>, 음악감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
프로필 사진 업로드 : <input type="file"><br>
<!--file : 컴퓨터 내 파일 업로드-->
<input type="submit" value="전송"><br>
<!--제출-->
<!--value : 값 이름 변경-->
<input type="reset" value="취소"><br>
<!--초기화 (아이디 입력 상태에서 초기화 누르면 초기화 됨)-->
<input type="button" value="등록"><br>
<input type="image" src="./sign up.png" alt="로그인" width="100" height="50"><br>
<!--image : 버튼의 모양에 이미지를 삽입할 수 있음 (src, alt 속성 반드시 필요)-->
<!--src : 이미지 경로
alt : 이미지 대체 텍스트
+width, height-->
</form>
</body>
</html>
https://www.shutterstock.com/ko/search/login+button
Login button 이미지, 스톡 사진 및 벡터 | Shutterstock
Shutterstock 컬렉션에서 HD 화질의 Login button 스톡 이미지와 수백만 개의 사용료 없는 다른 스톡 사진, 일러스트, 벡터를 찾아보세요. 매일 수천 개의 고품질 사진이 새로 추가됩니다.
www.shutterstock.com
[폼 요소 3]
select : 선택 목록상자(콤보박스)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option>강원</option>
<option selected>제주</option><!--selected = checked-->
</select><br>
</form>
</body>
</html>
textarea : 여러 줄 텍스트 입력 상자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요"></textarea>
</form>
</body>
</html>
button : 사용자가 클릭 가능한 버튼
| <button type="..."></button> | <input type="submit | reset | button"> |
| 빈태그 x | 빈태그 |
| 같은 기능 | |
| 스타일적 측면에서 자유로움 | 버튼에 이미지 요소를 넣으면 됨 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
<button type="submit">전송</button><br>
<button type="reset">취소</button>
</form>
</body>
</html>
[폼 요소 4]
label : 폼 컨트롤과 연결 시켜주기 위함, 웹 접근성 향상에 도움 됨(필수)
<label for="userid">아이디 : </label><input type="text" placeholder="영문으로만 써주세요" id="userid">화면 상 변화는 없지만, 아이디와 입력 요소는 연결 된 상태
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
<label for="userid">아이디 : </label><input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
<!--"아이디 : " 해당 부분 클릭해도 커서가 아이디 입력칸으로 이동함-->
<label for="userpw">비밀번호 : </label><input type="password" id="userpw"><br>
성별 : <label for="male"> 남자</label> <input type="radio" name="gender" id="male" checked>,
<label for="female">여자</label> <input type="radio" name="gender" id="female"><br>
취미 : 영화감상 <input type="checkbox" name="hobby" checked>, 음악감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
프로필 사진 업로드 : <input type="file"><br>
<input type="submit" value="전송"><br>
<input type="reset" value="취소"><br>
<input type="button" value="등록"><br>
<input type="image" src="./sign up.png" alt="로그인" width="100" height="50"><br>
</form>
</body>
</html>
<fieldset> : 여러 개의 폼 요소 그룹화, 구조적으로 만들기 위함 / 기본 정보
<legend> : 폼 요소 제목, <fieldset> 요소 내부에 작성 / 부가 정보
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
<fieldset>
<legend>기본 정보</legend>
<label for="userid">아이디 : </label><input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
<!--"아이디 : " 해당 부분 클릭해도 커서가 아이디 입력칸으로 이동함-->
<label for="userpw">비밀번호 : </label><input type="password" id="userpw"><br>
성별 : <label for="male"> 남자</label> <input type="radio" name="gender" id="male" checked>,
<label for="female">여자</label> <input type="radio" name="gender" id="female"><br>
</fieldset>
<fieldset>
<legend>부가 정보</legend>
취미 : 영화감상 <input type="checkbox" name="hobby" checked>, 음악감상 <input type="checkbox" name="hobby">, 독서 <input
type="checkbox" name="hobby"><br>
프로필 사진 업로드 : <input type="file"><br>
<input type="submit" value="전송"><br>
<input type="reset" value="취소"><br>
<input type="button" value="등록"><br>
<input type="image" src="./sign up.png" alt="로그인" width="100" height="50"><br>
</fieldset>
</form>
</body>
</html>
form : 폼 데이터를 그룹화하여 서버에 전송
action : 폼 데이터 처리 위한 서버 주소
method : 데이터 전송 방식 지정 (get, post)
get
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="/result.html" method="get">
<!--result.html 파일로 값 전달-->
아이디 : <input type="text" name="id"><br>
비번 : <input type="password" name="pw">
<input type="submit">
</form>
</body>
</html>
post
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="/result.html" method="post">
<!--result.html 파일로 값 전달-->
아이디 : <input type="text" name="id"><br>
비번 : <input type="password" name="pw">
<input type="submit">
</form>
</body>
</html>
form 태그는 서버 개발자가 제어하는 경우가 더 많다.
데이터를 다루는 부분이기 때문.
(알고 있어야 하는 태그는 맞다)
[질문]
1. <ul>은 순서 없이 나열하는 건데, 동그라미 말고 네모로 바꿀 수 있는지
⚫️ ...
⚫️ ...
이런 식에서
▪️...
이런 식으로
해결) css로 바꿔야 함.
2. 이미지 경로 지정할 때 구글 드라이브 주소는 가능한지
해결) 구글 드라이브에 엑세스 권한 허용하면 됨
'[Language] > VIEW' 카테고리의 다른 글
| CSS 이해하기 (0) | 2022.05.22 |
|---|---|
| 콘텐츠모델, 시멘틱마크업,블록 & 인라인 (0) | 2022.05.17 |
| [부스트코스] HTML 태그 - 2주차 미션 (0) | 2022.05.15 |
| [부스트코스] html 이해하기 / 1주차 미션 (0) | 2022.05.09 |
| HTML 이해하기 (0) | 2022.05.09 |
