(HTML,CSS) 조건별 서로 다른 CSS 적용하기

드코엘 강좌를 보다가 CSS로 서로 다른 상황에 대한 이해가 안 가는 부분이 있었다. 한참을 고민하다가 사용법에 대해 이해하고 익혀서 까먹지 않기 위해 작성한 포스팅이다.

 

#1 요구사항 

왼쪽의 썸네일 이미지를 클릭하면 오른쪽과 같이 보이도록 만들어야 했다.

조건은: 클릭 했을 때, 2줄이 한 줄로 보이도록 만드는 것.

위 이미지에 해당하는 코드 일부분을 가져왔다. 

 

어떻게하면 위처럼 이미지를 클릭했을 때 다른 레이아웃이 보이는지

코드를 분석해 보자

import React from "react";
import styles from "./video_item.module.css";

//video>item>snippet
const VideoItem = ({ video, video: { snippet }, onVideoClick, display }) => {
  const displayType = display === "list" ? styles.list : styles.grid; //displayType에 display타입이 리스트면 stylelist를쓰고 아니면 grid를 써
  return (
    <li
      className={`${styles.container} ${displayType}`}
      onClick={() => onVideoClick(video)}
    >
      <div className={styles.video}>
        <img
          className={styles.thumbnail}
          src={snippet.thumbnails.medium.url}
          alt="video thumbnail"
        />
        <div className={styles.metadata}>
          <p className={styles.title}>{snippet.title}</p>
          <p className={styles.channel}>{snippet.channelTitle}</p>
        </div>
      </div>
    </li>
  );
};

export default VideoItem;

<전체코드>

#2 코드 분석

const displayType = display === "list"? styles.list : styles.grid;

 

displayType변수를 선언하고 (const display)

인자 값 display타입이 리스트면 style.list를 쓰고(타입 비교는 === 사용)

아니면 styles.grid를 쓰라는 뜻 (item? a :b )

 

 #3 CSS 다루기

className={`${styles.container} ${displayType}`}

이전에 postcss를 사용하여 styles.로 이름 명시

위 코드 블록은 상황별 css를 주기 위한 코드 선언 부분이다.

1. ` `과 $으로 감싸고

2. container와

3. displayType이 있다

 

여기서 displayType은  #2 코드 분석에서 다뤘던 과 같이  특정 조건에 따라 className. list  or. grid가 반환된다.

 

즉 조건에 따라. container와. list가 합쳐지고,. container와. grid가 합쳐진 2가지 케이스를 사용할 수 있다.

 

#4 CSS선언

.container.grid {
  width: 50%;
}

.container.list {
  width: 100%;
}

css를 적용 모습

 

 

#5 느낀 점

이전에 혼자 웹사이트를 만들며 CSS를 처음 접했을 때 개고생 하며

위와 같이 조건별 CSS를 선언할 수 있으면 좋겠다는 생각을 했었다.

그러나 나의 인사이트는 너무나 부족했고, 구르고 구르며 css를 습득할 수밖에 없었다.

즉 매우 구린 CSS파일과 HTML구조가 나왔다

 

이번에 드코엘 강의를 보면서 조건별 CSS를 줄 수 있는 방법을 얻게 되어 매우 만족한다.