Dev log - 2, HTML #2, CSS #1

49624 ワード
テキストリンク

学習の内容


エディタ関連
  • EidtPlus, atom, VS(Visual Studio), DW(Dreamweaver), Eclipse
  • atomパケットショートカットをパケットビューcode->キーマッピングに変更
    • タグの関連付け<h1>~<h6>ラベルはなるべく1つずつ下げて使う<form>:サーバ転送関連method属性によりサーバ転送方式を特定<select>・と<option>通常一緒に使用し、それぞれnameとvalue属性はリストの名前を示す.selcted属性を設定する場合、その値をデフォルト選択値に設定する<optgroup label="">:選択できない大類を表す
    <input>
  • <select>像<form>ラベル内で使用する入力フォーム
  • 複数の属性を持つ(type,min,max,step,value等)
  • placeholder属性説明入力フォーム
  • pattern入力値設定可能範囲
  • type現在の入力値のタイプを設定
    (text, tel, email, datetime-local, time, color, fileなど)
    • <table>

  • サブラベル<tr>・<th>・<td>ラベルを使用して、ラベル数が表と一致しないことを確認
    ->任意適用cellpadding="10" cellspacing="10" border="1"属性

  • カラムマージはcolspanプロパティ、行マージはrowsapnプロパティ
    • <label>
  • for属性によるフォーカス移動<input>ラベルのid属性による連動可能
    • <dl>,<dt>,<dd>
  • 説明リスト作成時に使用
  • <dl>親タグ<dt>と<dd>それぞれ名前と値(説明)の子タグ
    • NAVER会員登録ページコピー猫
    <body>
  <h1>naver</h1>
  <form>
    <table>
      <tr>
        <td>
          <h3>
            <label for="id">아이디</label>
          </h3>
          <input type="text" id="id" name="id" required>
        </td>
      </tr>
      <tr>
        <td>
          <h3>
            <label for="pw">비밀번호</label>
          </h3>
          <input type="password" id="pw" name="pw" required>
        </td>
      </tr>
      <tr>
        <td>
          <h3>
            <label for="repw">비밀번호 재확인</label>
          </h3>
          <input type="password" id="repw" name="repw" required>
        </td>
      </tr>
      <tr>
        <td>
          <h3>
            <label for="user_name">이름</label>
          </h3>
          <input type="text" id="user_name" name="user_name" required>
        </td>
      </tr>
      <tr>
        <td>
          <h3>
            <label for="year">생년월일</label>
          </h3>
          <div class="input-group">
            <input type="text" id="year" name="year" size="4" maxlength="4" placeholder="년(4자)">
            <select id="month" name="month">
              <option value="월">월</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select>
            <input type="text" id="day" name="day" size="3" maxlength="2" placeholder="일">
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <h3>
            <label for="gender">성별</label>
          </h3>
          <select id="gender" name="gender">
            <option value="gender">성별</option>
            <option value="male">남자</option>
            <option value="female">여자</option>
            <option value="notgender">선택안함</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <h3>
            <label for="email">본인 확인 이메일<span class="select">(선택)</span></label>
          </h3>
          <input type="email" id="email" name="emlail" placeholder="선택입력">
        </td>
      </tr>
      <tr>
        <td>
          <h3>
            <label for="phone">휴대전화</label>
          </h3>
          <ul>
            <li>
              <select id="local_number" name="local_number">
                <option value="일본 +81">일본 +81</option>
                <option value="홍콩 +852">홍콩 +852</option>
                <option value="대한민국 +82" selected>대한민국 +82</option>
              </select>
            </li>
            <li>
              <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="전화번호 입력">
              <button type="button">인증번호 받기</button>
            </li>
            <li>
              <input type="text" id="auth-num" name="auth-num" maxlength="4" placeholder="인증번호를 입력하세요">
            </li>
          </ul>
        </td>
      </tr>
    </table>
    <button type="submit">가입하기</button>
  </form>

  <footer>
    <table>
      <tr><a href="#">이용약관 |</a></tr>
      <tr><a href="#"><strong> 개인정보처리방침 |</strong></a></tr>
      <tr><a href="#"> 책임의 한계와 법적고지 |</a></tr>
      <tr><a href="#"> 회원정보 고객센터</a></tr>
    </table>
    &copy;NAVER Corp
  </footer>
</body>

    CSS関連
  • CSSを使う方法は3種類
  • CSSを直接タグに適用する方法
    • <body style="background-color: blue; color: white">
  test
</body>
  • style.新しいcssファイルの作成と適用方法
    • (HTMLドキュメント)
    <head>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  test
</body>
    (CSSドキュメント)
    body {
  background-color: blue;
  color:white;
}
  • <style>ラベルで1つの文書に適用する方法
    • <head>
  <style>
    body {
      background-color: blue;
      color: white;
    }
  </style>
</head>

<body>
  test
</body>

    Doit Web規格の定義:82 p~98 p、122 p~162 p
    Python lotto, calculator Program [1]
    ManyToManyField