Javascript활용 menu 제작(학습 49일차 TIL)

210823 오늘은 JS ES5문법을 사용하여 자동으로 전환되는 이미지 갤러리를 만들었다.
※ script를 작성할 때 필요한 경우의 수를 하나 하나 자세하게 생각하자(수도 코드를 작성하는 것 리마인드...)

Javascript Basic (ES5)

• img 주소를 바꿀 때 .src.replace('현재 이미지명', '바꿀 이미지명');
• .onfocus의 반대는 .onblur / .onmouseover 반대는 .onmouseout

CSS tips

• px은 고정 단위로 반응형에는 적합하지 않다.

  상대적인 em(부모 font-size의 비례), rem(root의 font-size의 비례), vw, vh, %를 활용하자.

    .text {
      font-size: 8em;
    }
    .text > p {
      font-size: 0.5em;
      font-size: 0.5rem; // 16px 의 0.5
    }
    //위와 같은 경우에 .text는 기본 font-size인 16px의 8배로 128px이 되고, .text의 자식인 p는 128px의 0.5배인 64px이 된다.

• rem은 컴포넌트가 페이지 어디에서나 크기가 동일할 경우에 적합하다.(보통 font-size)
• em은 컴포넌트가 페이지에 따라 크기가 유동적일 경우에 적합하다.(padding, margin)
• padding의 경우 글자의 정렬이 맞아야 하기 때문에

  상하는 em 좌우는 rem이 적합하다.

    .title {
      font-size: 1.75rem
      padding: 0.5em 0.5rem;
    }
    .contetnt {
      font-size: 1.5rem
      padding: 0.5em 0.5rem;
    }