[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] 반응형 미디어, grid

Today I Learn - 2024.05.14

* 유연하게 미디어(이미지, 비디오) 다루는 법

(1) 반응형 이미지

- div / span 요소

  <div>
    <img src="이미지주소" alt="이미지" />
  </div>
  <span>
    <img src="이미지주소" alt="이미지" />
  </span>

- figure 요소(1)

<figure>
  <img src="이미지주소" alt="이미지" />
</figure>

- figure 요소(2) : alt=""를 안쓰고 figcaption 내용이 긴 경우 aria-describedby로 연결

<figure>
  <img src="이미지주소" alt="" aria-describedby="imgCaption">
  <figcaption id="imgCaption">이미지 캡션</figcaption>
</figure>

- picture, source 요소

- 브라우저는 각 하위의 source 요소를 고려하고 그 중에서 가장 일치하는 항목을 선택함

- source 요소에 일치하는 항목이 없을 땐 picture의 url이 선택됨

<figure>
  <picture>
    <source srcset="svg이미지" />
    <source srcset="bitmap이미지" />
    <source srcset="avif이미지" />
    <img src="jpg이미지" alt="이미지" />
  </picture>
</figure>

 ⭐ ⭐ ⭐ ⭐ ⭐ 레이아웃과 컴포넌트는 분리해서 작성하자 ⭐ ⭐ ⭐ ⭐ ⭐

<div class="box">
  <figure>
    <img class="rwd-img" src="이미지주소" alt="이미지" />
  </figure>
</div>

/* 레이아웃 */
.box {
  width: 50%;
  inline-size: 50%;
}

/* 비트맵 이미지 */
.rwd-img {
  max-width: 100%;
  height: auto;
}

/* 벡터 이미지 */
.rwd-svg {
  width: 100%;
  height: auto;
}

/* 이미지 컴포넌트 */
.box {
  width: 50%;
  inline-size: 50%;
}

(2) 반응형 비디오

- 레이아웃과 컴포넌트를 구분해서 만들자

<div class="box">
  <!-- figure요소 -->
  <figure class="video-container">
    <video class="video" controls poster="./../media/poster.jpg">
      <source src="../src/media/google-developer-stories.webm" type="video/webm" />
      <source src="../src/media/stories.mp4" type="video/mp4" />
      <track src="../src/media/stories-en.vtt" kind="captions" srclang="en" label="English" />
      <!-- track : 비디오의 자막파일 -->
    </video>   
  </figure>
</div>

/* layout : 실제 크기를 갖고 있음 */
.box {
  width: 50%;
  margin: 0 auto;
}

/* video component */
.video-container {
  padding: 20px;
  border: 1px solid #000;
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5);

  .video {
    width: 100%;
    inline-size: 100%;
  }
}

(3) 반응형 iframe

- aspect-radio 사용 : 예) 16:9 일 경우 16/9, 1:1일경우 1/1 ...

<div class="box">
  <figure class="iframe-container">
    <iframe width="560" height="315" src="iframe url" title="iframe 제목" frameborder="0" allowfullscreen></iframe>
  </figure>
</div>

/* layout */
.box {
  width: 50%;
  margin: 0 auto;
}

/* iframe component */
.iframe-container {
  background-color: yellow;
  margin: 0;
  aspect-ratio: 16/9;

  iframe {
    width: 100%;
    height: 100%;
    vertical-align: top;
    /* !! iframe은 inline-block이기 때문에 vertical-align 이나 display:block으로 변경 */
  }
}

- position 사용

<div class="box">
  <figure class="iframe-container">
    <div class="iframe-wrapper">
      <iframe width="560" height="315" src="iframe url" title="iframe 제목" frameborder="0" allowfullscreen></iframe>
    </div>
  </figure>
</div>

.box {
  width: 50%;
  margin: 0 auto;
}

/* iframe component */
.iframe-container {
  background-color: yellow;
  margin: 0;

  .iframe-wrapper {
    position: relative;
    padding-top: 56.25%;
  }

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

---

* grid

- 브라우저의 페이지를 여러 주요 영역으로 나눌 때 사용

- 테이블과 마찬가지로 세로 열과, 가로 행 기준으로 요소를 정렬 but, 테이블보다 레이아웃을 구현하기 더 쉬움

- flex와 같이 item을 배치하는 grid-item 요소와 이것을 감싸는 grid-container 요소가 있다.

💬 예시

<div class="container">
  <div class="grid-cell-1">그리드 박스 1</div>
  <div class="grid-cell-2">그리드 박스 2</div>
  <div class="grid-cell-3">그리드 박스 3</div>
  <div class="grid-cell-4">그리드 박스 4</div>
</div>

.container {
  /* grid layout 선언 */
  display: grid;
  /* 각각의 column의 사이즈 */
  grid-template-columns: 150px 150px 150px 150px;
}

.grid-cell-1 {
  background-color: red;
}
.grid-cell-2 {
  background-color: orange;
}
.grid-cell-3 {
  background-color: yellow;;
}
.grid-cell-4 {
  background-color: greenyellow;
}

---

오늘 반응형으로 미디어를 다루는 것과 grid layout에 대해 배웠다..

사이트를 만드는데 반응형은 정말 중요하다고 생각한다. 예전에는 무조건 미디어 쿼리만을 사용하여 하나하나 다 적용을 해줬었는데 오늘 배운내용은 정말... 손목과 시간을 아껴주는 내용이였다.

레이아웃을 구성할 때 flex를 좋아하는 나에게 있어서 grid는 무슨 내용인지는 알고 있었지만 깊게 공부한 적은 없어서 이해하기 어려웠다.

레이아웃과 컴포넌트를 따로 구성해야 한다는 것도 리액트에서만 그러는줄 알았는데 그냥 처음부터 중요했다..😱

그리고 오늘 처음으로 조원분들과 클론코딩 하기로 한 것을 발표한 후 피드백을 주고받았다. 하나씩 작은 컴포넌트와 레이아웃부터 만들어 가기로 했는데, 다른분들이 짠 코드도 구경하고, 수업에서 배운 내용과 과제에서 선생님께 받은 피드백을 토대로 팀원분들과 얘기할 수 있었다는게... 같이 성장한다는 기분이 들어서 너무 좋았다..😙