HTML 2
색
배경색 (background)
전경색 (foreground)
알려진 이름으로 처리가능 ( red | green | ... ) 16진수로 색상 표시가능 (RGB) R(0~255) G(0~255) B(0~255) ==> #ff00ff
파일 - 경로
절대경로 - 드라이브명 ... 작업파일위치
(c:/~~~~~/~~.png)
상대경로 - 작업위치부터 ... 작업파일위치
(/~~~~/~~.png)
. : 현재
.. : 부모
ex ./images/imgfile.png
jpg - 사진
gif - 아이콘
=> 사진
Hypertext - link
<!-- 절대경로, 상대경로, 웹경로 사용가능 -->
<a href="./tabletest01.html" target="_blank">테이블 보기</a><br><br>
<!-- target black 속성으로 새탭으로 열기 글자들어가는구간에 img src로 이미지 삽입 가능-->
<a href="https://www.daum.net" target="_blank"><img src="./images/20200723055344399.png"></a>
<a href="https://www.naver.com" target="_blank"><img src="./images/chrome_Gwv5N4omst.png"></a>
<!-- 이미지나 텍스트 파일은 브라우저가 형식을 알면 브라우저 자체가 뷰어가된다.-->
<a href="./images/20200723055344399.png">다음 아이콘</a>
<!-- 다운로드도 가능 -->
<a href="./download.7z" target="_blank">다운로드</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--글자 입력-->
<form>
<input type="text" /><br>
<input type="text" size="50"/><br>
<!--maxlength 최대입력수-->
<input type="text" size="50" maxlength="20"/><br>
<!--초기값 지정-->
<input type="text" size="50" maxlength="20" value="초기값"/><br>
<!--초기 글자 수정 불가-->
<input type="text" size="50" maxlength="20" value="초기값" readonly/><br>
<!--글자를 입력하면 안내글 지워짐-->
<input type="text" size="50" maxlength="20" placeholder="값입력"/><br>
</form>
</body>
</html><body>
<!--글자 입력-->
<form>
<input type="text" /><br>
<input type="text" size="50"/><br>
<!--maxlength 최대입력수-->
<input type="text" size="50" maxlength="20"/><br>
<!--초기값 지정-->
<input type="text" size="50" maxlength="20" value="초기값"/><br>
<!--초기 글자 수정 불가-->
<input type="text" size="50" maxlength="20" value="초기값" readonly/><br>
<!--글자를 입력하면 안내글 지워짐-->
<input type="text" size="50" maxlength="20" placeholder="값입력"/><br>
<!--비밀번호 입력모드-->
<input type="password" /><br>
<!--여러줄 입력-->
<textarea rows="5" cols="50">초기값</textarea><br><br>
<!--여러줄 입력 안내글-->
<textarea rows="5" cols="50" placeholder="값입력"></textarea><br><br>
</form>
</body>
</html><body>
<form>
<!--체크박스-->
<input type="checkbox">사과<br>
<input type="checkbox">참외<br>
<input type="checkbox">수박<br>
<input type="checkbox">딸기<br>
<input type="checkbox" checked>이건체크되있음<br>
<hr>
<!--
동그라미 형태의 체크박스
radio + name으로 같은 이름지정시
하나만 체크가능
-->
<input type="radio" name="radio">사과<br>
<input type="radio" name="radio" checked>참외<br>
<input type="radio" name="radio">수박<br>
<input type="radio" name="radio">딸기<br>
<input type="radio" name="radio">이건체크되있음<br>
<hr>
<select>
<option>사과</option>
<!--참외선택되어있음-->
<option selected>참외</option>
<option>수박</option>
<option>딸기</option>
</select>
</form>
</body><body>
<form>
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer" label="인터넷 익스플로러"></option>
<option value="Firefox" label="파이어폭스"></option>
<option value="Chrome" label="크롬"></option>
<option value="Opera" label="오페라"></option>
<option value="safari" label="사파리"></option>
</datalist>
</form>
</body><body>
<form>
<fieldset>
<legend>정보 설정</legend>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name">
</li>
<li>
<label for="email">이메일</label>
<input type="text" id="email">
</li>
</ul>
</legend>
</fieldset>
</form>
</body>
Programmer