css : media query, 과제 피드백, z-index

1.media query

미디어 쿼리의 유형

1. all : 모든 장치를 대상으로 한다.
2. print : 출력물을 대상으로 한다.
3. screen : 스크린이 있는 기기를 대상으로 한다.

@media print {
    abbr::after {
        content: ' ('attr(title)')'
    }
}

<abbr title="world wide web consortium">w3c</abbr>

미디어 쿼리의 조건

1. webkit-min-device-pixel-ratio, webkit-max-device-pixel-ratio :
   출력 장치의 최소, 최대 픽셀 비율. css의 1px 안에 들어가는 디바이스의 스크린 픽셀의 숫자를 값으로 한다.
2. min-width, max-width : 스크롤바를 포함한 vp의 넓이기준
3. orientation: 뷰포트의 방향 (landscape,portrait) 등

논리 연산자

1. and : 조건을 모두 만족하는 경우
2. not : 조건을 반전하는 경우
3. 컴마( , ) : 조건중 하나라도 만족하는 경우
4. only : 미디어쿼리를 지원 하는 브라우저에서만 작동

body{background:black;}

@media screen and (min-width:481px) and (max-width:1280px){
  body{background:red;}
}

@media screen and (max-width:480px){ 
  body{background:green;}
}

@media not screen and (orientation : landscape){ /* not은 항상 @media 뒤에 옵니다. 기본값은 portrait */
  body{background:pink;}
}

@media screen and (-webkit-device-pixel-ratio : 2){ 
  body{background:royalblue;}
}

2. 1만시간의 법칙 피드백

한재현 강사님이 피드백을 해주셨다.

의미없는 alt는 비우고 의미있는 alt는 자세히 적어라.

      <!-- title -->
      <section class="title-wrap">
        <!-- 피드백 : alt 값이 필요 없을 것 같다. 포지션 속성이 너무 많다.-->
        <img src="./img/clock.png" alt="clock-transparent" class="img-clock" />
        <!-- 피드백 : 텍스트 이미지라 하고 alt를 더 자세하게 하는게 좋다.-->
        <img src="./img/title.png" alt="title" class="img-title" />
      </section>

1. 뒤에 투명한 시계그림은 의미가 없는 이미지이니 alt를 비우는게 좋다.
2. 1만시간의 법칙 이미지는 이미지 텍스트라 불리며 중요한 이미지 쪽에 속하니 alt를 자세하게 적어야 한다.

.title-wrap {
  display: flex;
  position: relative;
  width: 33%;
  height: 265px;
  margin-bottom: 50px;
}

.title-wrap .img-clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 275px;
}

.title-wrap .img-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
}

3. 난 이런식으로 두 이미지를 wrap으로 싸고 두 이미지를 position으로 고정시켰는데 position을 많이 사용하는 것은 좋지 않고 한다.

p태그 남용보단 div에 속성을 줘라

<section class="input-section">
        <!-- 피드백 : p태그에 스타일 주는거보다 input-line div에 주는게 좋다.-->
        <div class="input-line">
          <p>나는</p>
          <input type="text" placeholder="예)프로그래밍" />
          <p>전문가가 될 것이다.</p>
        </div>
        <div class="input-line">
          <p>그래서 앞으로 매일 하루에</p>
          <input type="text" placeholder="예)5" />
          <p>시간씩 훈련할 것이다.</p>
        </div>
      </section>

p태그를 다 빼고 텍스트로 집어넣고 input-section에 스타일을 주는것이 더 좋다.

필요없는 이미지는 가상요소로 주는것도 좋다.

<section class="btn-section">
        <!-- btn에 꼭 type을 줘라 -->
        <button class="btn-submit">
          나는 며칠 동안 훈련을 해야 1만 시간이 될까?
        </button>
        <div class="click-wrap">
          <!-- 가상요소를 사용하여 구현하였으면 더 좋았을 것이다.-->
          <img src="./img/click.png" alt="click" class="img-click" />
        </div>
      </section>

1. 아래에 클릭이미지는 의미가 없는 이미지니 가상요소를 이용하여 넣는것이 좋을수 있다
2. btn에 꼭 type을 넣어야 한다.

레이아웃

나는 마크업을 할때 레이아웃을 크게 메인 - 풋터로 잡았는데 타이틀을 헤더로 떼와서 헤더-메인-풋터로 가는것이 좋을것 같다고 해주셨다.

폰트

@font-face {
  font-family: "OTEnjoystoriesBA";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "GmarketSansBold";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2")
      format("woff2"),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff")
      format("woff"),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf")
      format("opentype");
}

1. 이 클론코딩엔 4가지의 폰트가 사용되었는데 실무에선 많아도 2가지 정도까지만 사용한다고 한다.
2. 그 외 필요한 폰트는 이미지로 떠서 사용한다.
3. 폰트는 용량이 다른 웹 파일에비해 거대하기 때문에 많이 사용하지 않는다 한다.

media query

1. 보통 하나의 기기의 크기를 기준으로 잡는다고 한다. 나는 그냥 글씨가 잘리기 시잘할 때 부터 작아지게 하였다.
2. 모바일 우선으로 작업하고 점점 넓혀가면서 해야한다고 함
3. 실무에서는 회사마다 디바이스의 기준이 있을것이다.

유효성 검사

유효성검사 사이트 >> W3C

새로 알게된 사실

1. ip-adreess:port/ 로 접속하면 같은 네트워크에 있는 다른 기기로 로컬호스트에 접근 가능하다.

2. 어제 해결 못한 문제 : after와 before는 자식요소로 들어간다. div에 태그없이 텍스트만 들어있어도 자식요소로 들어간다.
   z-index가 음수이면서 position 속성이 있는 요소는 쌓임 맥락에서 가장 먼저 쌓이게 된다. 즉 모든 요소들보다 뒤에 있게된다. 이는 자신의 부모를 포함한다. 따라서 부모에게 도 z-index 0 이상을 주어 자식들을 포함해 앞으로 나오고 before와 after에 z-index -1의 값을 주어 자식들 중 가장 아래로 깔리게 한 것이
   다.

<body>
    <div class="box">내용</div>
  </body>

z-index 설정이 없을 때 )

가상요소에만 z-index 음수값을 주었을 때 )

      div {
        position: relative;
        width: 200px;
        height: 50px;
        background-color: red;
        border: 3px solid black;
        border-radius: 20px;
        overflow: hidden;
        text-align: center;
        font-size: 32px;
        font-weight: 500;
        /* z-index: 1; */
      }

      .box::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: orange;
        left: 0;
        bottom: 0;
        transform: rotateX(90deg);
        transition: all 2s;
        z-index: -1;
      }
      .box:hover::before {
        transform: rotateX(0deg);
        z-index: -1;
      }

개발자 도구로 hover를 활성화 시켜도 나오지 않는다. 높이를 %로 해놔서 그런가 했지만 고정시켜도 전혀 보이지 않는다. body뒤로 가버린 것 같다.

부모에 auto를 주고 가상요소에 음수를 줬을 때 )

hover되었을 때 부모의 뒤로 가려졌다.

부모에 0이상의 값을 주고 가상요소에 음수를 줬을 때 )

원하는데로 나오고 있다.
아래 블로그에서 많이 배웠다. 아래 블로그 글을 인용해 보자면 "z-index는 아주 간단해 보인다. z-index가 높은 게 z-index가 낮은 것보다 앞에 나온다. 그렇지 않나? 흠, 실제로는 아니다. 이건 z-index의 문제 중 하나다. 되게 간단해 보이고, 그래서 많은 개발자들이 규약을 읽어 보지 않는다는 거다." 라고 쓰여 있다. 이 문제를 만나고 나도 생각대로 되지 않는다는 걸 느꼈고 지금도 확실히 어제보단 낫지만 완벽하게 이해하지 못하고 있다. 오늘 정리를 바탕으로 앞으로 잘 적용 해봐야겠다.

출처>> z-index에 문제가 생겼을때 또 읽어보자 ..