[TIL]フリープラン#5

10694 ワード
JavaScript CSS html TIL テキストリンク
知らないことが急増しているのが「ツイッター」の課題そこで、今日はHTLMとCSSを勉強し、週末は他の概念を勉強します.

<今日の学習目標>

  • HTMLを使用してWebページを作成できます.
  • CSSを使用して基本的なWebデザインを行うことができます.

    • 1. HTML


    まず、基本的なHTMLの文法を見てみましょう.
    HTMLは不等号(<>)からなるタグの集合と考えられる.
    <html>
<head>
  <title> test page </title>
</head>
<body>
  <span> test </span>
</body>
</html>
    この親ノードと子ノードからなる構造をツリー構造と呼ぶ.そして、上記のHTMLを作成した結果、
    上記のページが表示されます.
    1)テキストの追加
    <h1...6> </h1...6> // 가장 큰 1부터 가장 작은 6까지 크기를 설정해 입력할 수 있습니다.
                   // 자동으로 줄바꿈이 일어납니다. 

<span> </span> // 줄바꿈 없이 텍스트를 같은 줄에 입력할 수 있습니다.
    2)リスト作成
    <ol>
    <li> 테스트 </li>
    <li> 입니다. </li>
    <ul>
      <li> 하위 </li>
      <li> 리스트입니다. </li>
    </ul>
  </ol>
    olという名前の親ノードでは、liタグはulに対して番号で表すことができます.


    • これらのリストを作成できます.
    3)チェックボックスの作成
      ID <input type="text" placeholder="비어있음">
  <div>
  Password<input type="password">
  </div>
  <div>
        <input type="checkbox"> ID 저장하기
        <input type="checkbox"> PASSWORD 저장하기
  </div>
  <div>
  <input type="radio" name="choice"> YES
  <input type="radio" name="choice"> NO
  </div>

  <textarea></textarea>
  <div> 
    <button> 로그인 </button>
  </div>
  • IDとPASWORDを入力するために、各タイプのボックスを作成しました.
  • チェックボックスは、複数のチェックボックスで選択できますが、radioは1つしか選択できません.
  • ログインボタンの場合、クリックすると無効になります.この点については、これからも勉強を続け、ブログを書き続けます.
    • 目的の内容を簡単に入力できます.しかし,白い背景と黒いテキストはユーザの立場では面白くない.だからCSSで飾ることができて、今日は簡単な方法しか勉強しません.

    2. CSS


    1)クラス、アイデンティティ設定
    div{
background: ---;
}
    このように1つ1つ選んで飾ることができますが、各ラベルは
    IDまたはCLASSを入力して詳細にロードできます.
    HTMLにIDとCLASSを入力します.
    # ID{
...
}
. CLASS{
...
}
    このように歌って設定することができます
    このほか、さまざまな設定を簡単に閲覧できます.しかし、レイアウトボックス、特に位置合わせに関する部分は、聞くにしても聞くにしても理解しにくい.
    2)レイアウトボックス

  • margin: auto; 使用
    中央揃えは簡単ですが、固定されているため、必要に応じて複数の項目を動的に設定するのは難しいです.

  • displayプロパティの使用
    display: inline - block;
    • 何度も試して、いくつかの検索を行い、いくつかのソート方法を試しました.しかし、私はその原理をよく理解していないので、これ以上説明するのは難しいかもしれません.週末の間、私たちは概念の補充を行って、さらなるブログの記録を行います.
    完全性を実現するためにコードを最適化
    サービス層、DTO