「HTML、CSS」ログインページを発行する際に注意すべきタグと属性.

🗒 この投稿は、htmlとcssのみを使用して簡単なログインページを作成するときに学んだ良いラベルと属性をまとめた記事です.

📌 block vs inline

blockラベルにはwidth、height、marignコンテキストプロパティのみが適用されます.
インラインは適用されません!(例外:input)

.login label {
  display: inline-block;
  /* label은 inline태그이므로 "display:inline-block"으로 변경해서 적용함 */
  width: 60px;
  margin-bottom: 20px;
}

width、height、marginコンテキストプロパティを適用しないinlineタグには、次のものがあります.
inline-blockプロパティに変更して有効にすることができます

[注]ブロックvsインラインラベルテーブル

📌 Inputプレースホルダの位置を調整するには「text-indent:」が必要です。

Inputタグのプレースホルダテキストの位置を調整しようとした場合.
paddingを使用すると、幅を増やしたり、幅を増やしたりできます.
text-indentを使用すると、横幅は変更されず、文字のみが移動します.

📌 Inputクリック時に発生した枠を削除(+色を変更)

アウトラインプロパティ:html要素の一番外側の部分
borderプロパティのようにstyle、width、colorプロパティがあります.
formラベルやaラベルなど、カーソルの位置に使用できます.

input:focus { outline:none; } /* 테두리 없애기 */
input2:focus { outline: 2px solid #f00; } /* 색상 바꾸기 */

📌 input placeholderフォント色の変更

input { color: #f00; } /* placeholder글자색 변경-> 익스, 파이어폭스에서만 적용되고, 입력시에도 글자가 빨간색이 됨 */ 

::-webkit-input-placeholder { color: #f00; } /* placeholder 글자색 변경(크롬 적용) -> 접두사를 반드시 붙여야 적용됨 */

📌 指の形を表示する場合は、「cursor:pointer」を使用します。

要素にマウスカーソルを合わせると👆(指)成形しない場合、
私を出して欲しい時~

.loginbtn:hover { cursor: pointer; }

📌 アイデンティティ/パスワードテキストとinputウィンドウの間で日付でソートするには、次の手順に従います。

上の図に示すように、アイデンティティ/パスワードを右側の列に整列+inputウィンドウに整列させるには、(text)にwidth値を設定し、text-alignに整列すればよい!

.login label{
	display: inline-block; /* label 태그는 inline 태그이므로 width, height, margin 상하가 적용되지 않으므로 inline-block 속성으로 변경해주는 것이 우선이다!*/
    width: 60px;
    text-align: right;
}

📚 Reference

:公費支援課