[TIL]タグとスタイルの研究

1.ログインモードのアクセス性🥸

第一に、上記のモードで閉じるボタン「x」が表示の直後に「登録または登録会員」が正しいかどうかを考察する.これは,Webを視覚的に利用するユーザへの苦悩ではなく,スクリーンリーダーでWebを利用するユーザへの苦悩である.
スクリーンリーダーで情報を取得するユーザーにとって、「このウィンドウはログインまたは会員ログインのページです」が終了すると、「ウィンドウクローズボタン」のヒントが少し不適切です.
少なくとも矢印が指すところに「ウィンドウクローズガイド」があればいいです.
この時私たちができる方法は簡単です.
寸法構造では、その閉じるボタンを下に置いて、右上隅にスタイルで送れば解決します.(使用場所)
第二に、Webページを視覚的に使用するユーザーにとって、閉じるボタンは小さすぎるのではないでしょうか.ボタンの大きさは16 pxで、小さいサイズに属します.選択肢が大きければ、便利に利用できるはずです.
処理方法は以下の通りです.
ボタンにダウンジャケットの値を1つ与え、視覚的には同じように見えますが、選択範囲を広げることができます.
box-sizeがborder-boxの場合はcontent-boxに変更します.

.cont-form-login .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 22px 24px;
    box-sizing: content-box;
    background-color: transparent;
}

2.ライン内ブロックへの切り替え

inline要素position: ablsolute;私floatブロック要素に変換可能.
行の要素の典型的な特徴として使用されます.
不可値width・height・marginで、値を指定できます.になりました!
上記のスタイルがある場合
コード中display値変更不要

3.Tabキーを使用したフォーカスの問題

3.1『a』の子として『img』を持つときの話題

<a>
  <img src="./경로작성구간" alt="이미지불러오기실패시텍스트">
</a>

画像をクリックすると、画面が反転した場合、tabキーフォーカスの問題が発生する可能性があります.
上部のモードで、閉じるボタンが<a>「x」が画像の場合、
画像ラベルに位置を合わせるposition: absolute;アンカーマークの起動自体にホットスポットはありません.
しかし、アナウンサーのラベルには子供のイメージが見つからない.(widthheightゼロ)
(理解を助けるための例)
このとき、tabキーでピントが合わないという話題が出た.
フォーカスの問題を解決するには、下図のように修正します.
画像には、寸法に関連するスタイルのみが表示されます.
また、位置調整は<a>ラベルで行います.

3.2「データム入力-チェックボックス」でのフォーカスの問題

/* 탭키로 포커싱이 안되는 이슈 발생!!!! */
.form-login .label-hold {
    display: inline-block;
    float: left;
    cursor: pointer;
}
.form-login .label-hold::before {
    display: inline-block;
    content: '';
    width: 22px;
    height: 22px;
    background-image: url(./check-box-unchecked.png);
    background-size: 22px;
    vertical-align: -5px;
    margin-right: 8px;
}
.form-login .inp-hold:checked+.label-hold::before {
    background-image: url(./check-box-checked.png);
}
/* 포커싱 이슈 해결 부분 */
.form-login .inp-hold:focus+.label-hold::before {
    /* 보더와 유사 하지만, 박스모델에 영향을 안미치는게 아웃라인이다. */
    outline: 2px solid black;
    /* 아웃라인과 비포요소에 보더에서부터의 공간을 지정 */
    outline-offset: 5px;
    border-radius: 5px;
}

チェックボックスのデフォルトスタイルではなく、カスタムデザインを実装します.input科labelの特性で処理できます.
しかし、これはinputラベルを画面から消してしまったため、ピントが合わないという話題が出てきました.
(実施画面)inputにフォーカスすると、兄弟要素label-holdという要素の仮想要素にスタイルを追加します.
3.1フォーカス問題自体を解決した.
3.2はトランプをしたような感じのプログラムです.
これは近接性に関するテーマのうち「認識の容易さ」に相当する部分である.

[原句]なに:なに。

<p> <strong>자동차</strong> : 바퀴로 굴러가는 기계 </p>意味でタイトルを強調する感覚は「クルマ」.dl・dt・dd・あまりにも強迫的な観念を抱いてはいけません.
データのリストではないので、このように表現できます.

5.どのエリアも生活化して自分の首に入れる

レイアウトを作成するときは、分割中に見えないために区画タイトルを漏らさないでください.
ヘッディングラベルを積極的に使って、各パーティションに+457914、処理を行います!!

<section>
  <h2 class"sr-only">구획의 의미를 분명히 작성하세요.</h2>
</section>

6.リストの余白

sr-onlyの場合は、上記のようなスタイルを与える方法を知っておきましょう.
黒い糸はダウンジャケットで、青い糸は毛で処理されています.

6.1マージンの使用-下部

ul>li*4与える、li {margin-bottom:10px}最後li:last-child margin-bottom:0ゼロを与える.

6.2 marging-topの使用

li兄弟要素を利用した選択者.これは2番目のリストから利益塔を与える方法です.
再利用すると、リスト間の間隔がすべて異なる場合があります.

最後に!

表記構造、ウェブアクセス性、同じスタイルの様々な方法など、ウェブページの基本要素であるli+li {margin-top:10px}HTML・無限の学習内容を生み出す.初期の考え方は3週間後の現在の考え方とは全く同じではありませんが、最終的には「そうするしかない」ということになります.
そうしましょう.🥶