범부 개발자 아등바등 살아남기

table의 길이가 길어지면 스크롤을 만들어 표현하고 싶을 때가 있습니다. 이때에 적용 방법에 대해 알아봅니다.

 화면의 테이블이 있을 때, 테이블에 들어갈 내용이 많아지면 전체 화면에 스크롤이 생기는 경우가 있다. 전체 화면의 스크롤이 생기는 방식이 아니라 테이블에만 스크롤이 생기게 만들고 싶었는데, 단순히 table에 height만 설정하는 것만으로는 예상처럼 작동하지 않았다.

1. 테이블 레이아웃 문제: 

기본적으로 tbody의 display가 table로 지정되어 있어, 특정 CSS 속성(height, overflow 등)이 제한적으로 작동한다. 이를 해결하기 위해 tbody의 display를 block으로 변경하고. "overflow-y: auto;" 속성을 추가한다.

2. Flexbox 사용: 

tbody가 가로로 꽉 안 차고 있으므로 상위 태그인 table에 display: flex; flex-direction: column;을 추가한다.

3. 행 너비 조정:

현재 tr이 가로에 꽉 안 차고 있으므로 tr에 width: 100%;을 추가한다.

4. 셀 너비 조정:

 th와 td가 tr의 너비를 모두 사용하지 않고 있으므로 상위 태그인 tr에 display: flex속성을 주고 th td에 flex: 1속성을 추가한다.

 모두 적용한 최종 코드

 카드를 뒤집는 애니메이션을 구현합니다. 앞, 뒤로 이루어진 카드를 만드는 방법과, 뒤집는 애니메이션에 대해 알아보겠습니다.

• 앞, 뒤 내용이 다른 카드를 뒤집어 각기 다른 내용을 보여주는 애니메이션을 구현
• 앞, 뒤로 구성된 카드를 구현하는 방법을 알아봄
• 카드를 뒤집는 방법을 알아봄

• Card 컴포넌트를 작성
  • 카드를 뒤집는 여부를 관리하는 상태를 작성
  • 마우스가 카드 공간에 진입했을 때, 발생하는 이벤트 함수를 작성
  • 카드를 뒤집는 여부 값에 따라 특정 class를 부여할 지 말 지 정함
  • 카드의 앞면과 뒷면은 front, back 클래스로 구분

 import React, { useState } from "react";

const Card = () => {
  const [filpped, setFlipped] = useState(false);

  // 마우스를 카드에 올렸을 때 실행되는 이벤트
  const handleMouseEnter = () => {
    setFlipped(true);
  };

  // 마우스가 카드에서 벗어났을 때 실행되는 이벤트
  const handleMouseLeave = () => {
    setFlipped(false);
  };

  return (
    <div

      // filpped 값에 따라 flipped 클래스 적용할 지 말지 선택, true일 시, flipped 클래스 적용
      className={`card ${filpped ? "flipped" : ""}`}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >

      {/* 앞면과 뒷면은 똑같은 곳에 작성하고 css를 통해 앞, 뒷면 레이아웃을 적용시킴 */}
      <div className="card-inner card-front">앞</div>
      <div className="card-inner card-back">뒤</div>
    </div>
  );
};

export default Card;

• card
  • card의 가장 상위 태그에 position: absolute; 적용, 하위 태그 card-inner의 기준점으로 삼기 위해서임
  • 자식 요소에 3d 효과 적용
  • transition으로 뒤집는 효과 설정 추가

.card {
  margin: 8px;
  width: 50px;
  height: 80px;

  /*하위 태그 card-inner가 positon: aboluste;를 사용하므로 기준점으로 삼기 위해 relative 적용 */
  position: relative;

  /*자식 요소에 3D 공간 효과 적용, 기본 값은 flat으로 3D 효과를 적용하지 않음 */
  transform-style: preserve-3d;

  /*카드 뒤집는 효과 동작 시간 설정 */
  transition: transform 0.5s;
}

• card-inner
  • absolute 사용해서 하위 태그 card-front, card-back이 겹쳐서 그려지도록 함
  • 3d 효과가 적용되었을 때 현재 보이는 화면의 뒷면이 보이지 않게끔 설정

  .card-inner {
  width: 100%;
  height: 100%;
  
  /*card-front와 card-back이 겹쳐야 하므로 사용, absolute 사용을 안할 시 card-back이 card-front 아래에 렌더링 됨 */
  position: absolute;
  
  /*뒷면을 보이게 할 것인지에 대한 설정, 해당 값을 없앨 시 앞면이 뒷면에 덮혀서 보여지지 않음 */
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  }

• card-back
  • 카드 반대편에 그려지게 끔 설정

 .card-back {
  background-color: #e74c3c;
  color: white;

  /*카드 반대편에 그려지게 됨, 만약 해당 속성이 없을 시 앞면과 똑같은 공간에 그려져서 카드 뒷면이 텅 비게 됨 */
  transform: rotateY(180deg);
}

• flipped
  • 마우스를 올렸을 시 반대편으로 뒤집는 효과 적용

.flipped {
  /*마우스를 올렸을 시 반대편으로 뒤집는 효과*/
  transform: rotateY(180deg);
}

• 전체 css 코드

.App {
  display: flex;
}

.card {
  margin: 8px;
  width: 50px;
  height: 80px;

  /*하위 태그 card-inner가 positon: aboluste;를 사용하므로 기준점으로 삼기 위해 relative 적용 */
  position: relative;

  /*자식 요소에 3D 공간 효과 적용, 기본 값은 flat으로 3D 효과를 적용하지 않음 */
  transform-style: preserve-3d;

  /*카드 뒤집는 효과 동작 시간 설정 */
  transition: transform 0.5s;
}

.card-inner {
  width: 100%;
  height: 100%;

  /*card-front와 card-back이 겹쳐야 하므로 사용, absolute 사용을 안할 시 card-back이 card-front 아래에 렌더링 됨 */
  position: absolute;

  /*뒷면을 보이게 할 것인지에 대한 설정, 해당 값을 없앨 시 앞면이 뒷면에 덮혀서 보여지지 않음 */
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

.card-front {
  background-color: #3498db;
  color: white;
}

.card-back {
  background-color: #e74c3c;
  color: white;

  /*카드 반대편에 그려지게 됨, 만약 해당 속성이 없을 시 앞면과 똑같은 공간에 그려져서 카드 뒷면이 텅 비게 됨 */
  transform: rotateY(180deg);
}

.flipped {
  /*마우스를 올렸을 시 반대편으로 뒤집는 효과*/
  transform: rotateY(180deg);
}

 진동하는 애니메이션을 만듭니다. 에러가 났을 경우 해당 애니메이션을 사용하여 사용자에게 에러를 쉽게 인지할 수 있도록 합니다.

• 의도치 않은 동작 시 사용자에게 이를 알리기 위해 시각적으로 눈에 띄는 애니메이션을 적용
• 입력한 정보가 적절하지 않거나, 오류 메시지 등을 나타낼 때 사용 가능

• 회전, 역회전 애니메이션을 구현 후, 이를 반복

index.css

.modal {
  background: whitesmoke;
  position: absolute;
  width: 300px;
  height: 100px;
  border-radius: 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  animation: vibration 0.1s 3;  
  // 적용 애니메이션, 적용 시간, 반복 횟수
}


// 2도 회전, 2도 역회전 애니메이션 반복하기
@keyframes vibration {
  from {
    transform: rotate(2deg);
  }

  to {
    transform: rotate(-2deg);
  }
}

flex를 이용해 header, main, footer를 배치하는 방법을 알아봅니다. flex를 이용할 경우, 특정 크기를 지정하지 않고 남은 공간에 알아서 배치되기 때문에, 유지 보수에 용이합니다.

• footer는 화면 제일 하단에 고정시켜야 함.
• flex를 사용하면 header, footer의 특정 값을 부여하지 않아도 되기 때문에 수정이 용이함

• Head, Main, Footer생성

import Head from "./component/Head";
import Main from "./component/Main";
import Footer from "./component/Footer";

function App() {
  return (
    <div className="app">
      <Head></Head>
      <Main></Main>
      <Footer></Footer>
    </div>
  );
}

export default App;

• flex 배치 후, main에만 flex: 1 속성 부여

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.app {
  display: flex;
  flex-direction: column;

  // 화면 꽉 채우기 위해 최소 높이 설정
  min-height: 100vh;
}

.head,
.main,
.footer {
  border: 1px solid black;
  padding: 10px;
}

.main {

  // head, footer를 제외한 모든 공간을 main이 차지하도록 함
  flex: 1
}

tailwindcss를 사용하는 방법을 알아봅니다. tailwindcss는 미리 지정된 클래스를 적용하여 스타일을 빠르게 구현할 수 있습니다.

• css 프레임워크
• 스타일이 적용된 클래스를 사용하여 스타일을 빠르게 적용 가능

• 빠른 개발 속도
  • 이미 지정된 클래스를 사용하므로 빠른 구현 가능

• 문서화
  • 문서화가 잘 되어 있어 관련 자료 찾기가 수월

• 클래스가 많아질 시 코드의 복잡성 증가
  • 스타일이 많이 적용될 경우, 적용되는 클래스가 많아지고 결과적으로는 HTML 코드가 길어지게 됨

• tailwindcss 설치 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• 스타일 적용하기

  /** index.css 파일. 최상단에 추가 */
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

• 사용하기

  export default function App() {
  return (
    <h1 className='text-3xl font-bold underline'>
      Hello world!
    </h1>
  )
  }

• 공식 문서 검색하기

• vscode의 Tailwind CSS IntelliSense 익스텐션 설치