데일리 코딩

코딩 7일째

파푸가 2016. 10. 25. 13:48


*form은 블럭. 그 안에는 인라인 요소

*가장 많이 사용되는 것은 input 태그 <input type="">

*radio: 답 하나 체크

*checkbox: 답 다중 체크


*ntt 코드

&nbsp; = 스페이스


*한 줄 이상 입력할 때 사용 <textarea></textarea> 크기 조절 가능!


*지원 안되는 것

<input type="datetime">


*단독 사용 불가(유효성 검사)

<input type="email">

<input type="search">

<input type="tel">

<input type="url">


*select 태그는 모바일 UI가 끝내줘욧!!!

<select>

<option></option>

</select>


--------------------------------------------------------------------------------------------


<!DOCTYPE html>

<html lang="ko">

<head>

 <meta charset="UTF-8">

 <title>양식태그</title>

 <link rel="stylesheet" href="css/normalize.css">

 <link rel="stylesheet" href="css/main.css">

 <script src="js/modernizr-custom.js"></script>

 <script src="js/script.js"></script>

</head>

<body>

<!--HTML4 까지 p.99~-->

 <form>

  <input type="text"><br>

  <input type="password"><br>

  <input type="file"><br>

  <input type="submit"><br>

  <input type="reset"><br>

  <hr>

  <input type="radio"><br>

  <input type="checkbox"><br>

 </form>

 <br>

 <form>

  <label>아이디 : </label>

  <input type="text">

  <br>

  <textarea>글씨</textarea>

 </form>

 <hr>

 <form>

  <input type="color"><br>

  <input type="date"><br>

  <input type="datetime-local"><br>

  <input type="email"><br>

  <input type="month"><br>

  <input type="number"><br>

  <input type="range"><br>

  <input type="search"><br>

  <input type="tel"><br>

  <input type="time"><br>

  <input type="url"><br>

  <input type="week"><br>

 </form>

<!-- HTML5 p.109-->

 <select>

  <option>김밥</option>

  <option>튀김</option>

  <option>라면</option>

  <option>순대</option>

  <option>어묵</option>

 </select>

</body>

</html>


--------------------------------------------------------------------------------------------


*<fieldset></fieldset>

테두리

fieldset과 legend는 세트다!!


*<input type="text" id="name" placeholder="이름" required value="표기값" readonly disabled>

placeholder는 칸 안에 적힌 것

value는 미리 적인 값

readonly 수정불가능, 읽기전용

disabled 사용불가

size 처음 나온 크기

maxlength 제한글자

autocomplete 자동완성

autofocus 자동 커서


----------------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="ko">

<head>

 <meta charset="UTF-8">

 <title>form</title>

 <link rel="stylesheet" href="css/normalize.css">

 <link rel="stylesheet" href="css/main.css">

 <script src="js/modernizr-custom.js"></script>

 <script src="js/script.js"></script>

</head>

<body>

<!--p.113-->

 <form>

 <br><br>

  <fieldset>

  <legend>입력양식</legend>

  <table>

   <tr>

    <td><label for="name">이름</label></td>

    <td><input type="text" id="name" placeholder="이름" required value="표기값" readonly disabled ></td>

   </tr>

   <tr>

    <td><label for="mail">이메일</label></td>

    <td><input id="mail" type="email" placeholder="이메일" required size="12" maxlength="12" autocomplete="on" autofocus></td>

   </tr>

  </table>

  <input type="submit" id="post">

  </fieldset>

</body> 

</html>


--------------------------------------------------------------------------------


css는 디자인을 바꾸는 것


* 전체선택자


h1, li 태그선택자


cf) <ul><li></li></ul>의 경우 ul에 적용할 경우 적용되지 않는다. li에 직접 적용하여야 한다.



--------------------------------------------------------------------------------


index.html


<!DOCTYPE html>

<html lang="ko">

<head>

 <meta charset="UTF-8">

 <title>CSS선택자1</title>

 <link rel="stylesheet" href="css/normalize.css">

 <link rel="stylesheet" href="css/main.css">

 <script src="js/modernizr-custom.js"></script>

 <script src="js/script.js"></script>

</head>

<body>

 <h1>css 선택자</h1>

 <ul>

  <li>전체 선택자</li>

  <li>tag 선택자</li>

  <li>id 선택자</li>

  <li>class 선택자</li>

 </ul>

</body>

</html>


--------------------------------------------------------------------------------


*gnb

global navigation bar


*lnb

local navigation bar


--------------------------------------------------------------------------------

교재 131~133 연습

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------