95日:2～3回目のフロント・タスク-詳細

2022.04.04.Mon.

892-3次フロントタスク

詳細スナップ

メディアクエリ

<style>
@media all and (min-width:320px) {
    #wrap div{
      width:100%;
    }
  }
  @media all and (min-width:768px) {
    #wrap div{
      width:50%;
    }
    #wrap div:nth-child(5){width:100%;}
  }
  @media all and (min-width:1024px) {
    #wrap div{
      width:20%;
    }
    #wrap div:nth-child(5){width:20%;}
  }
</style>

バビコン
img alt値充填✔
option selected disabled ✔
input:focus , style: none?

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

var form = document.getElementById("form");
form.addEventListener("focus", function( event ) {
  event.target.style.background = "pink";
}, true);
form.addEventListener("blur", function( event ) {
  event.target.style.background = "";
}, true);

表間隔の値