[Front-end🦁] #16拡張機、Login Model終了!/CSS実践ヒント

1. Vending Machine

1-1. 授業に出る

CSSを統一的に作成しましょう.floatならfloat!line-heightで中央に位置合わせする場合は、line-heightで位置合わせを続けます.

mediaquery:面倒で、所定の設計寸法でしかうまく操作できませんが、細分化と調整が必要です.

@media screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
    /* 기기의 넓이가 320px~ 480px */

}

2. Login Modal

前回はモジュール化しただけで、ログインした最初のウィンドウは、モードに処理して、中の画面をつかみます.
tips✨

- 요소의 높이를 웬만하면 지정하지 말자...! padding을 이용해서 안의 contents의 높이에 종속되도록 하자.
-
- position을 줄 때 가장 바깥에 있는 요소에 주자. 특히 button>img, a>img 의 경우 button이나 a에 줘야함. 기능에는 문제가 없으나 focusing이 안돼서 접근성에 문제가 생김.
-
- inline 요소에 position을 주면 display: block 이 된다. 두 번 명시할 필요 없다.
-
- modal dim 처리할 때는 after를 이용해서 배경 주고, z-index를 줘서 뒤에 것을 클릭하지 못하게 하자.

.modal-login::after{
    display: block;
    content:"";
    position:fixed;
    top:0; right:0; left:0; bottom:0;
    background-color: black;
    opacity: .3;
    z-index: 10;
}

- 넓이, 높이 모를 때도 ```transform: translate(-50%, -50%);``` 중앙으로 땡길 수 있다!
-
- 중간에.. 잘 따라가다가 진짜 제대로 다 줬는데 꼬여서 모든 스타일이 날아가고 그래서... 그냥 날리고 선생님이 주신 파일을 넣었다...... 백업의 중요성을 알았다.
-
- 의미없는 html 요소는 최대한 가상요소로 만들자.
-

/* 접근성을 위해 아이콘 같은 가상요소에 focus 됐을 때 outline 만들어주자 */
.form-login .inp-hold:focus + .labl-hold::before {
    outline: 2px solid black;
    outline-offset: 5px;
}

3.CSS実戦提示

3-1. ダイレクトインプリメンテーションの選択

select,option styleを適用し,異なるブラウザに異なるカスタマイズ可能な領域があり,サプライヤー接頭辞を適用する必要があるため,ul>li>buttonを直接使用して実現した.

3-2. image replace

1.PCで使用する画像に意味のあるテキストの代替テキストを提供する場合

.ir_pm{
    display:block;
    overflow:hidden;
    Font-size:1px;
    line-height:0;
    text-indent:-9999px;
}

2.移動画像に意味のあるテキストの代替テキストを提供する場合

.ir_pm{
    display:block;
    overflow:hidden;
    font-size:1px;
    line-height:0;
    /* IE6,7에서 지원이 안됨.....*/
    color:transparent; 
}

3.スクリーンリーダーは読む必要はありませんが  寸法構造が必要

.screen_out {
    overflow: hidden;
    position: absolute;
    /* width, height 0으로 만들면 스크린리더가 안읽음 */
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}

4.重要な画像置換テキストを使用して、画像を閉じるときに置換テキストを表示する

.ir_wa{
    display:block;
    overflow:hidden;
    position:relative;
    z-index:-1;
    width:100%;
    height:100%
}

5.緑のウィンドウで使用する方法

.blind {
    position: absolute;
    clip: rect(0 0 0 0); /* clip은 absolute가 있어야만 작동함 */
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

3-3. Sprite image

サーバからダウンロードされる画像の数を減らすため、loginモードのSNS iconをsprite画像で置き換えてみます.常に変化するイメージには、使わないほうがいいです!

background: url('이미지주소') 0 -20px; 
// 왼쪽 끝이 0, 0 이므로 position을 밀어서 사용해야 한다.

3-4. Retinaディスプレイに対応

りんご...画像が小さくなったり、画質が悪くなったりします.2倍横2倍縦2倍の画像を用意し、2倍の画像の大きさ、位置、1倍の画像のサイズと同じように入れればいいです.

のすべてのstyle tagにCSSが作成されていますが、CSSファイルが受信できないためhtmlのみが表示されないようにする場合があります.

4. JS Chaellenge

addEventListenerにif-else構文が追加され、さまざまな操作を実行できます.
スタイルを変えるのは普通CSSでやろう
なるべくjsは使わないようにしましょう逆に、元のStringではなく変数を定義します.
イベントのスタイルを変更するためにelementにclassを追加する

<h1 class="font">Click Me!</h1>

h1 {
    color: cornflowerblue;
}
.clicked {
    color: pink;
}
.font {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

次のjsコードは同じ動作をします.

// 1. 정직하게 style 이용 -> style은 CSS에서 바꾸는게 좋다.
// 2번 이상 쓰이면 변수로 만들자.
const h1 = document.queryString("h1");
function handleTitleClick() {
  const currentColor = h1.style.color;
  let newColor;
  if (currentColor === "cornflowerblue") { newColor = "pink"; }
  else { newColor = "cormflowerblue"; }
  h1.style.color = newColor
}

// 2. className 을 바꿔줌 -> 원래 가지고 있던 class가 날아감.
const h1 = document.queryString("h1");
function handleTitleClick() {
  const clickedClass = "clicked"
  if (h1.className === clickedClass) { h1.className = ""; }
  else { h1.className = clickedClass; }
}

// 3. classList 이용. -> 굿
const h1 = document.queryString("h1");
function handleTitleClick() {
  const clickedClass = "clicked"
  if (h1.classList.contain(clickedClass)) { h1.classList.remove(clickedClass); }
  else { h1.classList.add(clickedClass); }
}

// 4. 그치만 우리에게는 토글이 있다!!!
function handleTitleClick() {
    h1.classList.toggle("clicked");
}

5.回顧

生活が忙しいので、たぶん振り返ってみます.感覚で毎日振り返りを書いているので、質がますます悪くなっています.改めてMakerJunの言う通りに書きましょう

事実-何が起こったのか、何をしたのか.

は今日、進行中の2つのプロジェクトを終了し、Webアクセス性に関するCSSヒントを学びました.

feel-何かを感じて、
find-はどんなウェブサイトがあります

スクリーンで見たものはグーグルの助けでそのまま体現できるので、プロジェクトの講義の復習は無視しましたが、自分で書いた最終マシンコードのコメントを受けて、結局スクリーンで見たものを終わらせませんでした.自慢するな.

future action-行動計画があるかどうか

今日の2つの項目は、CSSにマークアップされ、あなたが示した方法で行い、私のコードに対するコメントを整理し、

を直接修正します.

新しいコードを作成する場合は、対応する要約を参照し、最初から作成する考えで

に参加してください.

ページのアクセス可能なコードもどこからコピーされたのか分からないが、コードをプロジェクトに入れるときに、画面に表示されないようにどの属性を考慮しなければ読み取れないのかを見ない.

フィードバック-上記の内容による動作に計画をフィードバックする-1120

コードのコメントを見ると、flexやgridを使用しているというよりwidth、height、paddingなどの面で多くの改善があります.

と昨日作成したアクション計画コードをすべてフォローするのに時間がかかりすぎて、html、CSS、Pigma画面を置いて、構造をつかむ方法、クラス名を与える方法、およびこれらの属性を提供するためにどのCSS属性を与えたかをすばやく閲覧し、復習しました.有効な復習方法を探し続けましょう.