HTML
하이퍼텍스트:웹에서 자유롭게 오갈 수 있는 링크를 의미
하이퍼 텍스트의 줄임말이 'HT'
make up은 표시하다라는 뜻으로 웹브라우저에 내용을 보여주는 텍스트,이미지,영상 등의 위치를 표시하는 것을 의미.
약속된 꼬리표 태그를 붙이는 행위를 마크업이라고 한다.
그러한 것들을 사용한 언어라고해서 'html'이다.
'html'문서의 기본 구조
<!DOCTYPE html>:현재 문서가 HTML5 언어로 작성한 웹문서라는 뜻
<html lang="ko">: HTML은 웹문서의 시작을 나타냄. lang=ko는 이 언어가 한국어라는 것을 알려줌.
<head>~</head>:웹 브라우저가 웹문서를 해석하는데 필요한 정보를 입력하는 부분 :(이부분은 웹브라우저에 보이지 x)
<body>~</body>:실제 웹 브라우저에 나타나는 내용
</html>:웹브라우저의 끝을 나타냄
브라우저에게 정보를 주는 <head> 태그
<meta> 태그:한글로 된 내용을 표시하기 위해서 UTF-8 문자세트를 사용해야함.
<meta charset="UTF-8">
<title> 문서 제목을 나타내는 태그
<body> 웹브라우저에 내용을 표시
*대부분의 태그는 닫는 태그도 함께 쌍으로 존재함!
*컨트롤 +s가 문서저장!
*적당하게 들여써주기!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!--문서의 문자 인코딩을 UTF-8로 설정-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Internet Explorer 브라우저에서 페이지를 렌더링할 때 호환성 모드(compatibility mode)를 사용하지 않도록 설정-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--meta 태그는 viewport를 설정. viewport는 모바일 기기에서 웹 페이지를 볼 때 사용되는 뷰포트의 크기와 초기 확대/축소 비율을 지정하는 데 사용. width=device-width는 뷰포트의 너비를 기기의 화면 너비에 맞추고, initial-scale=1.0은 초기 확대/축소 비율을 1로 설정하는 것을 의미-->
<title>첫 번째 문서 연습</title>
</head>
<body>
<h1>웹 문서 만들기</h1>
</body>
</html>
웹문서 다양한 내용 입력
h1 가장 큰제목
h6 가장 작은 제목
p~/p: 텍스트 한 단락을 만듬
em:강조
strong:강조해서 진하게 표시
br:줄을 바꿔줌,닫는 태그 없음!
hr:가로줄,영역 구분,분위기 전환 용도 닫는 태그 없음!
b:굵게!,단순히 진하게..
ol:순서가 있는 목록 *(oi type="a")로도 가능~
li:ol 사이에 글을 쓰게 됨
순서가 없는 목록:ul ==>점으로 표시됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
</body>
</html>
레드향 샐러드 레시피
재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g
드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간
- 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
- 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
- 드레싱 재료를 믹서에 갈아줍니다.
- 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!
문서에 표를 삽입:
표 제목: <caption>
표 전제:<table>
<tr>:행
<td>:셀
<th>:제목 셀
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</tr>
<tr>
<td>선물용</td>
<td>3kg용</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg용</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg용</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg용</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</table>
</body>
</html>
상품 구성
| 용도 | 중량 | 갯수 | 가격 |
|---|---|---|---|
| 선물용 | 3kg용 | 11~16과 | 35,000원 |
| 선물용 | 5kg용 | 18~26과 | 52,000원 |
| 가정용 | 3kg용 | 11~16과 | 30,000원 |
| 가정용 | 5kg용 | 18~26과 | 47,000원 |
이미지 삽입하기
<img>
<img src="images/tangerines.jpg" alt="레드향" >
src=이미지 폴더 지정
alt=대체 텍스트
오디오 삽입하기/비디오 삽입하기
<audio src="medias/spring.mp3" controls></audio>
<video src="medias/salad.mp4" controls width="450"></video>
controls=컨트롤 바를 표시
autoplay=오디오나 비디오를 자동으로 실행
muted=비디오 소리 제거
loop=반복 재생
preload=페이지를 불러올때 어떻게 로딩할 것인 지 지정
width,height =사이즈 조정 너비와 높이 조정
poster="파일이름" :비디오 화면에 표시할 포스터 이미지 지정
하이퍼 링크 삽입
<a></a> 사용
<p><a href="embed.html">멀티미디어 삽입하기</a></p>
href:링크할 주소를 넣는다.
<a href="index.html"> <img src="images/tangerines.jpg" alt="레드향" width="300"></a>
이미지 링크를 만든다.
<a href="index.html" target="_blank"> <img src="images/tangerines.jpg" alt="레드향" width="300"></a>
<p><a href="embed.html" target="_blank">멀티미디어 삽입하기</a></p>
target="_blank"를 넣으면 새로운 탭으로 웹페이지링크 생성
입력 양식 작성하기
폼 삽입하기
입력란이 폼
ex.로그인 화면,검색 화면,회원 가입 등..
<form action="">
<label for="user-id"> 아이디:</label>
<input type="text" id="user-id">
<label>비밀번호:<input type="password"></label>
<input type="submit" value="로그인">
</form>
form=폼을 만드는 가장 기본적인 태그
action=태그 안의 내용을 처리해줄 서버 프로그램을 지정한다.
label=폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹브라우저가 알 수 있음.
input=사용자가 입력하는 텍스트
value=보여지는 화면
submit=서버로 전송
type은 text말고도 email과 tel로도 세분화됨
type="checkbox"
-는 여러 개 중 하나를 선택
type="radio"
-는 둘 중에 하나만 선택
-name은 반드시 같은 이름으로만 해줘야함..
얘네는반드시 value 값을 지정해야함
<form>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<ul>
<li>
<label><input type="checkbox" value="s_3">선물용 3kg</label>
<input type="number">개
</li>
<li>
<label><input type="checkbox" value="s_5">선물용 5kg</label>
<input type="number">개
</li>
<li>
<label><input type="checkbox" value="f_3">가정용 3kg</label>
<input type="number">개
</li>
<li>
<label><input type="checkbox" value="f_5">가정용 5kg</label>
<input type="number">개
</li>
</ul>
<p><b>포장 선택</b></p>
<ul>
<li><label><input type="radio" name="gift" value="yes" >선물 포장</label></li>
<li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
</ul>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
<ul>
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name">
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr">
</li>
<li>
<label for="mail">메일 주소</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
type="number"
숫자를 방향키로 지정가능
type="range"
숫자를 슬라이드 막대로 지정가능
min=최소값
max=최대값 지정
value=초기값 지정
<form>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<ul>
<li>
<label><input type="checkbox" value="s_3">선물용 3kg</label>
<input type="number" min="0" max="5">개 (최대 5개)
</li>
<li>
<label><input type="checkbox" value="s_5">선물용 5kg</label>
<input type="number" min="0" max="3" value="1">개 (최대 3개)
</li>
</ul>
<ul>
<li>
<label><input type="checkbox" value="f_3">가정용 3kg</label>
<input type="range" min="0" max="5">개 (최대 5개)
</li>
<li>
<label><input type="checkbox" value="f_5">가정용 5kg</label>
<input type="range" min="0" max="3" value="1">개 (최대 3개)
</li>
</ul>
<p><b>포장 선택</b></p>
<ul>
<li><label><input type="radio" name="gift" value="yes">선물 포장</label></li>
<li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
</ul>
</fieldset>
caniuse.com 사이트 접속
can i use에 date input type이라고 검색함
빨간색은 지원 안됨x 황갈색은 부분적으로 지원 초록색은 지원됨
resource 참고자원
known issuse:사용자들 간의 이슈가 되는 정보들이 있음
type="hidden"
사용자에겐 보이지 않지만 웹사이트가 보내는 여러가지 정보들이 숨겨져 있음
required 속성
필수 입력 필드를 지정해줌
readonly 속성
사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드
autofocus 속성
자동으로 입력 커서를 갖다 놓음
textarea
여러 줄을 입력하는 텍스트 영역
cols=가로 너비
rows=세로 길이
<form>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name">
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr">
</li>
<li>
<label for="mail">이메일</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone">
</li>
<li>
<label for="d-day">배송 지정</label>
<input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
</li>
<li>
<label for="memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
셀렉트 메뉴
<select>
사용자가 내용을 직접 입력하지 않고 여러 옵션중에서 선택하게 함
<select></select>:시작과 끝 표시
<option>태그는 value 속성을 이용해 서버로 넘겨주는 값을 지정함
<form action="">
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<label>
<select>
<option value="special_3" selected>선물용 3kg</option>
<option value="special_5">선물용 5kg</option>
<option value="family_3">가정용 3kg</option>
<option value="family_5">가정용 5kg</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<label><input type="text" list="goods"></label>
<datalist id="goods">
<option value="special_3">선물용 3kg</option>
<option value="special_5">선물용 5kg</option>
<option value="family_3">가정용 3kg</option>
<option value="family_5">가정용 5kg</option>
</datalist>
</fieldset>
</form>