비디오 태그
동영상을 출력하는 태그
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video src="" controls="controls" type="video/mp4"></video>
</body>
</html>
폼 태그
회원가입이나 정보를 입력할 때 사용되는 태그이다.
<form action="#" method="get">
</form>
속성은 action 과 method 가 존재한다.
- action : 정보들을 입력하고 전송할 때, 그것들을 받을 주소(서버쪽의 주소)를 입력하는 곳이다. 서버는 여기서 입력된 정보들을 데이터베이스화하는 일 등을 한다!
- method : 정보가 가는 방식을 결정하는 속성이다. 속성값은 get, post 가 존재한다.
↓
get 속성값은 우리가 네이버 검색창에 "오늘의 날씨" 라고 치면
이런 식으로 뒤에 알 수 없는(?) 문자들이 이어지는데 오늘의 날씨가 코드값으로 변환되어지는 값이다. 그것이 서버쪽으로 전송되는 것이다.
반면 post 속성 값은 정보를 입력해도 https://www.naver.com/ 와 같이 도메인 주소가 변함이 없다면, 이는 서버에 갈 주소 정보가 암호화해서 가는 것을 의미한다.
→ 이로 알 수 있는 사실은, get 방식은 브라우저에 노출이 되기 때문에 보안에 취약할 수 있고 post 방식은 보안에 강하다는 것을 알 수 있다. method 속성의 디폴트 값은 get 방식이다.
예제 <회원가입 폼 작성해보기>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#" method="get">
이름 : <input type="text" name="uname" /><br />
아이디 : <input type="text" name="uid" /><br />
비밀번호 : <input type="password" name="upw" /><br />
연락처 : <input type="text" name="uphone1" size="5" /> -
<input type="text" name="uphone2" size="5" /> -
<input type="text" name="uphone3" size="5" /><br />
사진 : <input type="file" name="upic" /><br />
성별구분 : <input type="radio" name="gender" value="m" />남
<input type="radio" name="gender" value="w" />여<br />
사용언어 : <input type="checkbox" name="lan" value="kor" checked="checked" />한글
<input type="checkbox" name="lan" value="eng" />영어
<input type="checkbox" name="lan" value="jap" />일어
<input type="checkbox" name="lan" value="chi" />중국어<br />
자기소개 : <textarea rows="5" cols="20">간단하게 입력하세요.</textarea><br />
국적 : <select>
<option>KOREA</option>
<option>USA</option>
<option>JAPAN</option>
<option>CHINA</option>
</select><br />
좋아하는 음식 : <select multiple size="3">
<option>짜장면</option>
<option>피자</option>
<option>마라탕</option>
<option>치킨</option>
</select><br />
<input type="submit" />
</form>
</body>
</html>
input type : text 는 일반 문자로, passwod 는 기호로 대체해서 표시됨
name 에 uname, uid 이런 식으로 적어두면 name 에 해당하는 값을 지정하는 것이다.
size는 몇 글자를 받을 것인지 결정하는 것
input type="file" -> 파일 선택과 같은 것이 나옴
- radio 타입은 꼭 하나만 선택해야 하는것.
-> name 값이 같아야하는 것 유의! && value 값은 달라야함
- checkbox 타입은 여러개를 선택해도 되는 것.
-> name 값이 같아야하는 것 유의! && value 값은 달라야함
-> 배열로 해서 값들이 들어옴.
-> checked 속성은 default 로 선택되는 값
자기소개처럼 글을 작성하는 공간의 태그 : textarea
rows 는 행 5줄 제한해서 표현
cols 는 20칸 제한해서 표현
select : 뭔가 선택하는 것, option들로 구성한다.
select 의 타입 중 여러 개를 선택하고 싶다면 -> multiple 속성!
실행결과
↓
시멘틱 태그
<div>
table 태그에서 div 태그로 옮겨가는 추세이다. 이미 알고 있으니 생략!
시멘틱 태그를 사용하는 이유는...
검색엔진이 좀 더 빨리 할 수 있고 다른 사람들이 보기에도 편하다는 장점이 있다.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<h1>MY HOMEPAGE</h1>
<hr />
</header>
<nav>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
<hr />
</nav>
<section>
<h1>What is HTML?</h1>
<p>HTML is so goooooooooooooooooooooooooooooooooooooooooooooooooood</p>
<hr />
</section>
<footer>
<p>xxx주식회사 서울시 00구 00동</p>
</footer>
</body>
</html>
실행결과
↓
CSS 기본
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
}
h1 {
color:#2a17bb;
}
li {
background-color:#199529;
}
p {
font-size:small;
text-decoration:underline;
}
footer {
border:1px dashed #000000;
}
</style>
</head>
<body>
<header>
<h1>HEADER 입니다.</h1>
</header>
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
<section>
<p>content 입니다.</p>
</section>
<footer>
회사 주소 입력 예정입니다.
</footer>
</body>
</html>
dashed 는 점선이라는 뜻이다!
실행결과
↓
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - 반응 선택자, 상태 선택자, 구조 선택자 (0) | 2021.09.19 |
|---|---|
| CSS - tag, id, class 선택자, 속성 선택자, 후손 및 자손 선택자 등 (0) | 2021.09.19 |
| HTML 기본 태그 (0) | 2021.09.17 |
| flexbox에 대하여 (0) | 2020.05.15 |
| display: inline-block; (1) | 2020.04.27 |