Hi-Woong

<!-- 입력폼 만들 때 사용!

필수 속성 : action(어디로?), method(어떻게?)

-->

<form action="#" method="get">

 input의 속성

(1)name: 입력한 값을 구분하기 위해 이름 지정

(2)placeholder : 미리보기 텍스트

(3)autofocus : 자동커서를 설정해줌

(4)value: 기본 값을 지정해줄 수 있다

(5)readonly: 읽기 전용 지정

(6)maxlength : 글자 수 제한 지정

아이디: <input type="text" name="userID" placeholder="아이디를 입력하시오" autofocus>

<br>

비밀번호: <input type="password" name="userPW" max="10">

<br>

주소 : <input type="text" name="userAdd" value="2교육장" readonly>

<br><br>

<!-- checkbox와 radio의 필수 속성 :name, value-->

<!-- (1) checkbox -->

**<!-- table : 테이블을 만들겠다고 선언하는 공간 -->**

<table border="1px solid black" width="500px" align="center">

**<!-- 표의 제목: caption -->**

<caption>메뉴판</caption>

**<!-- tr: table row 몇줄 만들겠다! -->**

<tr bgcolor="green" height="50px">

**<!-- th : table header 표의 헤더 작성 -->**

<th >메뉴</th>

<th>가격</th>

</tr >

<tr align="center">

**<!-- td : table data 칸 수 / 데이터 -->**

<td>아메리카노</td>

<td>3500</td>

</tr >

<tr align="center" >

<td>카페라떼</td>

<td>4000</td>

</tr>

</table>

Table 실습

<table border="1px solid black"  align="center">
<!-- 1.표의 제목 -->
<caption>스마트인재개발원</caption>
<tr bgcolor="yellow">
<th>이름</th>
<!-- colspan  : column 셀이 가로로 병합된다
<th colspan="2">성별/주소</th>
<th>비고</th>
</tr>
<tr align="center">
<td>선영표</td>
<td>여자</td>
<td>광주</td>
<!-- rowspan : 셀이 세로로 병합된다
<td rowspan="2"></td>
</tr>
<tr align="center">
<td>김운비</td>
<td>여자</td>
<td>광주</td>
</tr>
</table>

가장 중요한 속성 src (source의 약자)

: 이미지의 경로,주소 등을 기재

• -><!-- (1)절대경로: 외부의 이미지를 가지고 올 때 => url -->
•  

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyIV9ZuPbDAAWYgIO4Qdeo8lsmPb8R3jeB7Q&usqp=CAU"

width="500px"

>

<!-- (2)상대경로 : 내부 파일을 가지고 올 때 -->

<img src="../../../img/photo.jpg" width="500px">

<!-- <img src="HTML/img/photo.jpg" width="500px">  최상위-->

<!-- a.현재를 기준으로 : ./ (생략가능)

b.상위를 기준으로 : ../

c.루트를 기준으로: ../../../ ex)../*안먹음

d. 최상위를 기준으로 : /->

a 태그

<!-- a태그 anchor =>페이지를 이동할 수 있다!

꼭 써야하는 속성! href 연결할 주소

• ->

<a href="https://www.naver.com">네이버로 이동</a>

<!-- 스마트인재개발원 로고를 클릭시, 메인 홈페이지로 이동 -->

<!-- 1.클릭시, 이동 -->

<a href="https://smhrd.or.kr/">

<img src="/HTML/img/logo.jpg.png" width="200px" >

</a>

<!-- ul, ol =>리스트를 만들겠다고 선언하는 공간

li=> 실질적인 데이터를 넣어주는 태그(ul,ol 모두사용)

<!-- ul(unodered list) 정돈되지 않은 리스트 -->

<ul type="square">
<li>선영표</li>
<li>김운비</li>
</ul>

<!-- ol(order list) 정돈된 리스트 -->

<ol type="A">

<li>HTML수업</li>

<li>JAVA시험</li>

</ol>

<span>구매 목록</span>

<br>
<ul type="square">
<!-- 여러가지 한꺼번에 작성 할때는 클릭+alt 후 작성 -->

<li>딸기</li>

<li>닭발</li>

<li>마라탕</li>

</ul>

<span>마라탕 순서 </span>

<br>

<ol type="A">

<!-- 원하는 태그 * 원하는 개수  li*3-->

<li>고기를 볶는다</li>

<li>육수와소스를 넣는다</li>

<li>재료들을 넣는다</li>

</ol>