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

Reference

この問題について(Dev log - 2, HTML #2, CSS #1), 我々は、より多くの情報をここで見つけました https://velog.io/@kangsanz/Dev-log-2-UIUX-요구-분석-2

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Python lotto, calculator Program [1]

ManyToManyField