placeholder
입력란에 대한 설명을 제공해준다.
autocomplete
전에 입력한 내용을 기억하여 칸 클릭 시 해당 내용을 보여준다.
required
입력하지 않은 칸이 있을 경우 제출시 필수로 입력해 달라는 메세지를 보낸다.
disabled
입력란이 입력되지 않고 name에 대한 값도 존재하지 않는 상태로 정보가 제출된다.
readonly
입력칸에 마우스를 올리면 커서의 깜빡임이 없고 입력이 불가하다.
value로 지정한 고정 값을 원할 때 사용한다.
disabled와 다르게 값이 없는 name이 전송된다.
<form action="" method="GET">
<div>
<label for="name">이름 :</label>
<input placeholder="이름입력" "type="text" name="name" minlength="3" id="name">
</div>
<div>
<label for="job">직업 :</label>
<input placeholder="직업입력" type="text" name="job" id="job" autocomplete="on">
</div>
<div>
<label for="age">나이 :</label>
<input placeholder="나이입력" type="number" name="age" id="age" required>
</div>
<input type="reset" value="intialize">
<input type="submit" value="submit">
</form>
<form action="" method="GET">
<div>
<label for="score">Score </label>
<input type="range" name="score" id="score" min="0" max="100" step="5">
<input type="reset" value="initialize">
<input type="submit" value="submit">
</div>
</form>
<form action="" method="GET">
<div>
<label for="number">Number </label>
<input type="number" name="number" id="score" min="0" max="100" step="5">
<input type="reset" value="initialize">
<input type="submit" value="submit">
</div>
</form>
속성으로의 button & 태그로의 button
스크린리더가 버튼인지 인식한다.
자바스크립트와 연동하여 기능을 부여한다.
버튼의 경우 다음과 같이 2가지 방법으로 작성해 볼 수 있다.
두 형식 모두 똑같이 기능을 한다. 차이점은 다음과 같다.
button 태그는 자식 태그를 가질 수 있기 때문에 자식 요소를 가질 수 있다.
값만을 변경할 수 있는 input의 속성으로서의 button과 달리
button 태그는 그에 비해 자유도가 더 높다.
1)
<form method="GET">
<div>
<input type="text" name="text" placeholder="값 입력">
<button>빈 버튼</button>
</div>
</form>
2)
<form>
<div>
<input type="text" name="text" placeholder="값 입력">
<button><em>빈 버튼</em></button>
</div>
</form>
👇 select 요소
여러 아이템들 중 하나의 아이템을 고를 때 사용한다.
select를 부모요소로 option을 자식요소로 함께 사용한다.
option 속성 value에 아무 값도 넣어주지 않으면 제출버튼 클릭 시 내용이 값으로 전달된다.
option에 selected 속성을 부여 할 경우 선택하기 전 해당 태그의 내용이 선택되어져 나타난다.
select에 required 속성을 부여 할 경우 value가 없는 아이템을 선택하면 제출되지 않는다.
즉 value가 있는 아이템을 선택해야한다.
optgroup 태그를 통해 라벨링을 해서 그룹별로 아이템들을 나타내 줄 수 있다.
<form>
<div>
<label for="movie">List of Movie </label>
<select name="movie" id="movie" required>
<option value="">--Please choose an option--</option>
<optgroup label="Rank 1 2 3">
<option value="legend" selected>샹치와 텐 링즈의 전설</option>
<option value="dark">맨 인 더 다크 2</option>
<option value="hostage">인질</option>
</optgroup>
<optgroup label="Rank 4 5 6">
<option value="coda">코다</option>
<option value="moga">모가디슈</option>
<option value="life">최선의 삶</option>
</optgroup>
</select>
<button>제출</button>
</div>
</form>
🧾 datalist
<datalist>
아래 코드와 같이 select 대신에 사용될 수 있다. <input>과 연동되어 사용한다.
따라서 datalist에는 id로 "movie-list"를 설정하고 input에는 list에 해당 값을 적어 사용.
<datalist>는 <select> 와는 다르게 리스트 안에 있는 아이템을 선택할 수 있을 뿐만 아니라
직접 text 칸에 값을 입력하여 제출할 수 있다.
또한 사용자가 입력한 값과 일치한 문자가 아이템 리스트에 있을 경우
해당하는 아이템들을 찾아서 띄어주는 기능을 한다.
<form>
<div>
<label for="movie">List of Movie </label>
<input type="text" id="movie" name="movie" list="movie-list">
<datalist id="movie-list">
<option>주토피아</option>
<option>인사이드아웃</option>
<option>토이스토리1</option>
<option>토이스토리2</option>
<option>토이스토리3</option>
</datalist>
<button>제출</button>
</div>
</form>
🧾 textarea
<textarea>
여러 줄의 멀티라인을 받을 수 있다.
rows와 cols 속성에 값을 할당함으로써 크기를 할당해줄 수 있다.
<form>
<div>
<label for="text">Text Area:</label>
<textarea name="text" id="text" rows="10" cols="30">
프리태그와
동일하게
작동한다.
</textarea>
<button>제출</button>
</div>
</form>
metadata의 의미
data를 설명하는 data가 metadata이다.
<meta> 태그 안에 정보를 기록하여 작성한다.
<head> 태그 안에 작성한다.
브라우저 엔진이 <meta> 태그를 참조하여 정보를 분류한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
😃 title 태그
하나의 <head>에 하나의 <title>을 작성해야한다.
타이틀을 잘 작성해야 검색 엔진 상위에 노출된다.
웹페이지를 소개할 수 있는 문장이나 간략하게 소개할 수 있는 내용으로 만들어 주어야한다.
이름 뿐만 아니라 상태 등 다른 정보도 존재할 수 있다.
<meta> 요소는 name 속성을 메타데이터 이름으로,
content 속성을 값으로 하여 문서 메타데이터를 이름-값 쌍의 형태로 제공할 때 사용한다.
<meta name="application-name" content="facebook" />
<title>Facebook -dashboard-</title>
위와 같이 페이지에서 구동 중인 애플리케이션의 이름을 적어준다.
한 어플리케이션에는 하나의 이름만 작성해주어야한다.
<title>에 대한 내용을 함께 적어주면
facebook 이라는 어플리케이션이 dashboard 페이지를 나타낸다는 의미이다.
author
문서 저작자
description
즐겨찾기 시 페이지에 대한 설명 값으로 들어가는 부분
generator
페이지를 생성한 소프트웨어 식별자
keywords
페이지의 콘텐츠와 관련된 ,쉼표로 구분한 키워드 목록(인스타그램의 해쉬태그 같은)
referrer
한 페이지에서 다른 페이지로 이동시 이동한 페이지에게 어디서 왔다는 정보를 제공하는 요소
charset
영어 컴퓨터 숫자 뿐만 아니라 세계에서 사용하는 언어를 지원한다는 개념에서
UTF-8 값을 적어준다.
<meta charset="URF-8">
viewport
애플에서 처음 나온 개념
웹 페이지를 볼 수 있는 영역을 의미한다.
content에 여러개의 값을 입력할 때 ','로 구분하여 여러개를 입력한다.
<meta name="viewport"
content="width=device-width", initial-scale="1.0",
initial-scale="1.0", user-scalabel="yes"
/>
width
device-width
디바이스 가로크기만큼을 설정한다.
initial-scale
장치너비와 뷰포트 너비의 비율을 담당하는 부분
1.0이 일반적
user-scalabel
모바일에서 확대 및 축소 기능을 지원할지 안할지 설정하는 부분
😃 link 태그
<link>
css 파일을 연결해주기 위한 태그로 많이 사용된다.
href 속성
href 속성을 통해 (절대, 상대)경로를 입력하거나 URL을 입력한다.
파비콘을 입력할 수도 있다. 파비콘이란 페이지가 열릴 때 보이는 이미지를 가리킨다.
rel 속성
rel(relation)을 통해 연결하려는 페이지와 어떤 관계인지를 입력한다.
type 속성
링크된 콘텐츠의 타입을 지정하는데 사용한다.
stylesheet 타입을 지정 할 경우 type="text/css"로 작성한다.
예시
<link href="style.css" rel="stylesheet" type="text/css"/>
😃 MIME 타입
<audio> <video> <link>를 통해 외부 파일을 불러올 때 경로를 문자열 형태로 입력할 때
해당 파일을 불러올 뿐 해석하지 않는다.
해당 파일을 인식하기 위해 type을 적어준다.
이렇게 파일을 명시해주는 작성방법이 'MIME 타입'이다.
대소문자를 구분하지 않지만 소문자로 작성하는 것이 관례다.
text/plain, text/html, text/css, text/javascript
image/gif, image/png, image/jpeg, image/bmp, image/webp
audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
video/webm, video/ogg ...
😃 style 태그
<link href="style.css" ref="stylesheet" type="html/css"> 사용하는 것을 권장
<head>
<style>
p {color: red;}
</style>
</head>
😃 script 태그
css와 마찬가지로 html에 직접 작성하거나 파일을 링크해서 사용한다.
<head> 안에 작성해 주어도 되고 <body> 안에 작성해 주어도 된다.
그러나 <script>는 <body> 마지막에 작성하는 것을 권장한다.
파일의 용량이 클 경우 페이지를 먼저 띄우는 것이 중요하기 때문.
<script src="javascript.js"></script>
<script>
alert("Hello World")
</script>
✏️ global element
id
식별 역할을 한다.
스페이스와 탭을 넣어서는 안된다.
id의 값이 중복되어서는 안된다.
숫자나 특수문자로 시작하면 안된고 영어 소문자로 시작한다.
class
식별 역할을 한다.
id와는 다르게 같은 이름을 여러 태그에 적용할 수 있다.
공백으로 구분해서 작성했을 경우 하나의 태그가 여러개의 클래스 이름을 가질 수 있다.
<div class="alph beta gamma">I have 3 class names</div>
속성으로서의 style
css를 사용하는 좋은 습관은 아니다.
일시적으로 html을 수정하여 스타일을 적용 할 일이 있을 때 사용한다.
<div style="backround-color: red;">Hello Wolrd</div>
