생활코딩 HTML

• 이미지 삽입

<img src="image.jpg" width="200" height="300" alt="그림">

• 표만들기

<table border="5">
   <tr>
  <td>이름</td>  <td>성별</td>  <td>주소</td>
</tr>

<tr>
    <td>최진혁</td>  <td>남</td>   <td>청주</td>
</tr>

</table>

• 구조

굵게     가장 밑으로
<th>     <tfoot> 

• 표 병합

행병합    열병합
rowspan  colspan

• form - 사용자가 입력한 정보를 서버로 전송할때 사용하는 것

<form action="https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com">
    <p>아이디:<input type="text" name="id"></p>
    <p>비밀번호: <input type="password" name="pwd"></p>
    <p><input type="submit" name="address"></p>
</form>

• form - 문자입력

<form action="">
    <p>text:<input type="text" name="id" value="아이디를 입력하여주세요"></p>
    <p>password:<input type="password" name="pwd" value="비밀번호를 입력하여주세요"></p>
    <p>textarea</p>
    <textarea cols="50" rows="5">아무거나 입력하여주세요</textarea>
</form>

• form - dropdown list(제한된 공간안에서 여러개의 선택지를 선택할 수 있는 기능)
  select - 선택박스

<form action="">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">푸른색</option>
    </select>
    <h1>색상2(다중선택)</h1>
    <select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">푸른색</option>
    </select>
<input type="submit">
    </form>

• form - radid, checkbox

<form action="">
<p>
<h1>색상</h1>
붉은색:<input type="radio" name="color" value="red">
검은색:<input type="radio" name="color" value="black">
파란색:<input type="radio" name="color" value="blue">
</p>
<p>
    <h1>사이즈(다중선택)</h1>
95:<input type="checkbox" name="size">
100:<input type="checkbox" name="size">
105:<input type="checkbox" name="size">
</p>
</form>

• form - button

<form action="">
        <input type="text">
    <input type="submit" value="로그인">
    <input type="button" value="버튼">
    <input type="reset">
    </form>

• form - hidden filed

<form action="">
     <input type="text" name="id">
     <input type="hidden" name="hide" value="nackzy">
     <input type="submit">
 </form>

• form - label(클릭영역을 넓혀줌)

<form action="">
     <p>
         <label for="id_txt">text</label>:
         <input id="id_txt" type="text" name="id" value="default value">
     </p>
     <p>
         <label for="id_pwd">password</label>:
         <input id="id_pwd" type="password" name="pwd" value="default value">
     </p>
     <p>
         <label>textarea:
         <textarea  cols="50" rows="2">default value</textarea>
         </label>
     </p>
     <p>
         <label>
             <input type="checkbox" name="color" value="red">붉은색
         </label>
         <label for="color_blue">
             <input id="color_blue" type="checkbox" name="color" value="blue">푸른색
         </label>
     </p>
 </form>

• form-method(전송방법 선택 - get(url방식, post(데이터를 숨겨서 전송))

<form action="" method="post">
    <input type="text" name="id">
     <input type="password" name="pwd">
     <input type="submit">
 </form>

• form - 파일 업로드
  -파일 업로드 할때 필수(method="psot" enctype="multipart/form-data")

<form  action="업로드 할 서버" method="psot" enctype="multipart/form-data">
    <input type="file" name="profile">
    <input type="submit">
</form>

• HTML - meta (웹페이지를 설명하는 데이터)

<meta charset="UTF-8">
    <meta name="description" content="생활코딩의 소개자료">
    <meta nema="keywords"
          content="코딩,coding,생활코딩,프로그래밍,html,css,javascript">
    <meta name="author" content="egoing">
    <meta http-equiv="refresh" content="30">

• HTML - 모바일

<meta name="viewport" content="width=device-width,initial-scale=1.0">