かっこいいライオンみたいFEスクール第2期-4月19日

12475 ワード
TIL おしゃれなライオンのように テキストリンク

今日のキーワード📌

  • IR技術
  • Spriteテクノロジー
  • Retinaディスプレイ応答方法

    • 1.IR技術


    IR技術とは?これは画像の代替テキストを提供するためのCSS技術である.デザイン的に見えないが、スクリーンリーダーやブラウザに情報を伝えるテキストをhtmlの各位置に隠す方法を学びます.

    1-1. ココアの使い方


    PC向け


    使用する画像に意味のあるテキストの代替テキストを提供する場合.
    .ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

    移動可能


    使用する画像に意味のあるテキストの代替テキストを提供する場合.
    .ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
  /* transparent 키워드는 IE9부터 사용 가능하기 때문에 PC에서는 빠져있음
 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent */
}

    寸法構造が必要


    スクリーンリーダーは読み込む必要はありませんが、構造を表示する必要があります.
    .screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

    テキストの置換


    画像が重要な画像置換テキストとして閉じても、置換テキストを表示します.
    .ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}



    1-2. ネイバーの使い方

    .blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

    IEの旧バージョンで認識できない場合があるため、margin: -1pxを使用します.
    要素はclip属性で切り取ることもできます.

    2.Spriteテクノロジー


    これは、複数の画像を1つの画像ファイルに配置することによって、画像ロードの負担を軽減する方法である.


    画像を編集する場合は、オンラインエディタを使用するか、editing app(photoshop、pigma、sketchなど)を直接開発者が編集することができます.

    .icon-google::before {
  width: 22px;
  height: 22px;
  background: url("./images/css_sprites.png") -10px -10px;
}

.icon-naver::before {
  width: 22px;
  height: 22px;
  background: url("./images/css_sprites.png") -10px -52px;
}

.icon-kakao::before {
  width: 22px;
  height: 22px;
  background: url("./images/css_sprites.png") -52px -10px;
}

.icon-facebook::before {
  width: 13px;
  height: 24px;
  margin-left: 2px;
  background: url("./images/css_sprites.png") -94px -10px;
}

    リファレンス


    image sprite generator
    済州コード大本営-画像フラッシュ技法

    3.レティナ表示対応法


    3-1. レティナ?


    これは、特定の視野範囲内で、人の目では画素を区別できない画素密度(300 PPIを超える)を持つアップルのIPS LCDとOLED製品のブランド名です.

    3-2. その他のメーカーの用語


    レティナという概念の単語はアップル社が作ったものなので、他の製造企業はそれぞれの語彙を使っています.三星はデジタルデバッガを内蔵したOLEDパネルを描く際、「SUPERAMOLEDディスプレイ」を好んだ.

    3-3. 発生の原因


    レティナ(高解像度スクリーン)に入ると、論理画素と物理画素の間に差が生じます.
  • 論理画素:cssの画素のデフォルト単位
  • 物理画素:デバイスが実際に処理可能な画素のデフォルト単位
    • ただし、ブラウザはcssで定義されたピクセルに従って画像をレンダリングする必要があるため、物理ピクセルに基づいてレンダリングされる画像は論理ピクセルと同じ大きさになります.

    すなわち、100 pxのサイズの元の画像が表示されると、retinaディスプレイは、論理的な100 pxを表すために物理的な200 pxを使用する.論理100 pxを表すために、物理200 pxを埋め尽くし、水を飲むようにぼやけているように見えます.

    3-4. 解決策


  • サンプリングダウン:画面に描画する画像の2倍を用意し、1/2サイズ(html resize)に縮小します.(問題は解決できますが、使いすぎるとページのロード性能が低下します.)

  • image-rendering:CSS WD(Working Draft)プロパティの1つとして、画像の反転を強制的に禁止するプロパティを適用して、画像品質を改善することができます.image-rendering: crisp-edgescan i use : image-rendering

  • retina.js:Retinaディスプレイであれば、画像に対するネットワーク要求が2倍になるので、これはお勧めしません.
  • @media 
    .rtna { background:url(retina1.png); }
 @media (min-resolution:192dpi) {
   .rtna { background:url(retina2.png); }
 }
    インチのcss画素数が192個を超えると、retina2.png画像を背景に表示されます.(重複画像は不要です.)
  • <picture> [draft]

    • 知らない場所

  • Retinaディスプレイ
  • KACA,NAVERが使用するIR技術

    • 今日一日を整理します..。🌃


    おしゃれなライオンのようにFE学院で教育を受けずに一人で勉強すると、Retinaディスプレイ対応、画像フラッシュ、IR技法など、多くの情報や知識を逃す可能性があります.
    講師さんたちの豊富な経験を通して、実務で使われている例が、より深く学べてよかったです!本物のおしゃれなライオンのような人を選ぶのが一番いい選択で、教育生に選ばれるのが一番ラッキー!
    私もできるだけ早く優秀な開発者になって、皆さんに良い情報を伝えたいと思います.
    Python学習ノート(3)デバッグテスト
    tensorRT5.1.5.0実践EfficientNet+Pytorchの変換試行即ち精度テスト