95일: 2-3차 프론트작업 - 디테일

2022.04.04.Mon.

✅ 2-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);

table 간격 값