TIL 1. HTML

27052 ワード
TIL html テキストリンク
Web学習の起点ともいえるHTMLについて、学習内容の中核的な内容を整理してみましょう.

Structure

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTML 학습하기">
  <title>문서 제목</title>
</head>
<body>
  <h1>컨텐츠 제목</h1>
  <p>컨텐츠 내용</p>
  <img src="이미지 경로">
</body>
</html>
  • <!doctype>:文書型を指定するための宣言
  • <html><html>:Webドキュメントの開始および終了フラグ
  • <head><head>:ブラウザに情報を提供するためのタグ
  • <meta>:文書情報ラベル
    • ,文字セットを含む
  • <body><body>:実際のブラウザに表示されるコンテンツタグ

    • Tags


    1. Text


  • <hn>:~太字と厚めのテキスト
  • <p>:改行文字付きテキスト段落
  • <strong>,<b>:テキストの太さ(*コンテンツ強調表示用)
  • <em>,<i>:テキスト斜体で表示(*コンテンツで強調表示する場合は)
  • <u>:下線テキスト
  • <mark>:テキスト蛍光ペン効果
  • <ul>:無秩序リストの作成
  • <ol>:作成順序リスト
  • <li>:リスト

    • 2. Table / Image / Links

    <table>    <!---- Table ---->
  <tr>
    <th> 제목 셀 </th>
    <td> 1행 2열 </td>
    <td> 1행 3열 </td>
  </tr>
  <tr>
    <th> 제목 셀 </th>
    <td> 2행 2열 </td>
    <td> 2행 3열 </td>
  </tr>
</table>
<img src="이미지 경로">  <!---- Image ---->
<figcaption>이미지 설명</figcaption>
<a href="링크 주소">텍스트</a> <!---- Links ---->

    3. Form

    <form> element </form>

    1) Attributes

    <form>ラベルは、ユーザーが入力したデータがサーバにどのように転送されるか、およびサーバがどのプログラムを使用して処理されるかを指定するために、複数の属性を使用します.
  • <method>:サーバにデータを転送する方法を指定します(*属性値:get or post)
  • <action>:サーバ上のプログラムを指定して
    タグのデータを処理
  • <target>:actionプロパティで指定したスクリプトファイルを現在のウィンドウ以外の場所で開くことを指定

    • 2) Elements


    :: label & input

    <label for="id이름">레이블</label>
<input id="id이름" type="유형">
    <label>とは、フォーム要素入力ウィンドウの横に置かれたテキストのことです.<input>は、ユーザが入力したデータを受信し、type属性に従って使用するために使用される.<label>および<input>は、それぞれのforおよびid属性値を使用して接続される.
    type="text"
    テキスト行を入力するフィールドが表示されます.
    <form>
  <label for="name">이름</label>
  <input type="text" id="name" required> <!---- 작성 필수 필드 ----> 
</form>
    名前.
    type="password"
    入力したデータがマスク処理されて表示されます.
    <form>
  <label for="pw">비밀번호</label>
  <input type="password" id="pw">
</form>
    パスワード
    type="range"
    スライドバーを移動して数値を入力します.min、max、step、valueプロパティ設定バー.
    <form>
  <label for="volum">음량</label>
  <input type="range" id="volum" min="0" max="100" step="1">
</form>
    おんりょう
    type="checkbox"
    指定した複数のアイテムから複数のアイテムを選択するときに使用するフォーム要素.
    個々のアイテムを選択する場合はradioを使用します.
    <form>
<p> 좋아하는 색은?</p>
  <label><input type="checkbox" name="color" value="green">green</label>
  <label><input type="checkbox" name="color" value="white">white</label>  
  <label><input type="checkbox" name="color" value="red">red</label>  
</form>
    好きな色は?
    green
    white
    red

    :: Select & Option


    ドロップダウン・リストのラベルを使用して、ユーザーがさまざまなオプションで選択できるようにします.<select>TAGはリストの開始と終了を表示し、<option>TAGは選択する項目を追加します.
    <form>
<label for="fruit">과일</label>
<select size="5" id="fruit" multiple> <!---- 한 번에 5개 표시, 중복 선택 가능 ---->
  <option value="banana">바나나</option>
  <option value="apple">사과</option>
  <option value="melon">메론</option>
  <option value="grape">포도</option>
  <option value="pear">배</option>
</select>
</form>

    :: Textarea


    1行または複数行の文を入力するタグ.name,cols,rowsは属性により入力領域を指定する.
    <form>
  <textarea name="memo" rows="20" cols="10"></textarea>
</form>
    けさ25?出力?
    script Keyword - This