おしゃれなライオンのように、フロント第2期16 Day

📖 今日の勉強内容

1.カスタム入力、選択ボックス

2.IRテクニック

3. image sprite

1.カスタム入力、選択ボックス

1) input box custom

<!-- txt-hide 라는 IR 기법이 적용된 클래스로 input 요소를 숨겨줍니다. -->
<input type="checkbox" id="inpHold" class="inp-hold txt-hide">
<label for="inpHold" class="labl-hold">로그인 상태 유지</label>

Webのアクセス性を考慮すると,IR技術を用いて入力ラベルを非表示にし,ラベルラベルを造形する方法がある.これは、画像を簡単に挿入するよりも良いコードと見なすことができる.

2) select box custom

<h2>셀렉트 박스 만들기</h2>
<button class="btn-select">당신의 에스파 최애 맴버는??</button>
<ul class="list-member">
    <li><button type="button">카리나</button></li>
    <li><button type="button">지젤</button></li>
    <li><button type="button">닝닝</button></li>
    <li><button type="button">윈터</button></li>
</ul>

上記のinput boxと同様にselectboxもIR技術を用いてh 2タグを処理し、Webアクセス性を考慮しbutton(select、optionタグを用いない)を用いて造形した.optionタグに固定されたスタイルは変わらないからである.私も最初はselect optionタグを使ってネット検索をしていましたが、CSSが効かなかったのでliタグに変更しました.😅

2.IRテクニック

🕵️‍♀️ IR技術とは?
CSSテクノロジーは、画像の代替テキストを提供するために使用されます.以下のCSSテクノロジーを使用して、画像の代替テキストを提供できます.
1.画像に意味のあるテキストの代替テキストを提供する場合
スクリーンリーダーは、画像に含まれるテキストを読み取ることができないため、作成します.
2.スクリーンリーダーは読み取る必要はありませんが、構造を表示する必要がある場合.
3.重要な画像置換テキストを使用して、画像を閉じるときに置換テキストを表示する
ϲ画像が何らかの理由でロードされていない場合、ユーザの使用を容易にするために、画像の後述の説明が表示される.

3. image sprite

🕵️‍♀️ 画像フラッシュとは?
複数の画像を1つの画像ファイルに配置する方法.
🙆‍♂️利点:複数のイメージが1つのイメージファイルに存在するため、イメージのロードにかかるコストが少なくなります.
🤦‍♂️欠点:画像は個別の位置として使用され、1つのsplight画像がWebにロードされていない場合、画像全体が使用できません.
警告:従来の表示または表示で通常の表示画像を使用すると、画質が低下する可能性があります.シャープ化またはディスプレイのピクセルは、インチに比べて圧縮され、同じインチの通常のディスプレイのピクセルよりも多くなります.ブラウザは、圧縮されたピクセルをCSSで定義されたピクセルに再拡大するため、このような状況が発生します.
🔨解決策:画像の破砕現象を改善するために、画像サイズを元の2倍に調整します.
注意:https://zinee-world.tistory.com/542