폼 관련 태그,output, 다운로드 진행상태 보여주는 태그 등 and 리액트에서 스타일 수정 방법

김현준·2024년 4월 2일
0

html/css

목록 보기
3/27

https://daegwonkim.tistory.com/8

해당 컴포넌트에서만 스타일을 적용하는 방법
meter태그의 바 색을 검정색으로만 보이게 변경해보았다.

function CharacterInfo() {
  const meterStyles = `
    meter::-webkit-meter-bar {
      background: #000;
    }
    meter::-webkit-meter-optimum-value {
      background: #000;
    }
    meter::-webkit-meter-suboptimum-value {
      background: #000;
    }
    meter::-webkit-meter-even-less-good-value {
      background: #000;
    }
    meter::-moz-meter-bar {
      background: #000;
    }
    meter {
      background: #000;
    }
  `;

  return (
    <>
    <style>{meterStyles}</style> //이렇게 하면 스타일이 이 컴포넌트에서만 적용된다.
    <main>
    .
    .
    .
    </main>
    </>
  );
}

export default CharacterInfo;
profile
기록하자

0개의 댓글

관련 채용 정보