React(jsx) + CSS 일반 바닥글 메뉴 만들기

바닥글 같은 걸 시원하게 만들 수 있게 되고 싶어요.하지만 지금의 자신을 많이 조사하지 않으면 해낼 수 없다.
나는 스펀지의 색깔을 바꾸어 보려고 조금 놀았지만, 바닥글 자체는 간단하게 만들었다.
어렵게 리액트로 했다면 컴포니트를 쓰세요.
그래서 공유해.
모르다

a탭의 기본 파란색을 바꾸는 방법

창 크기에 따라 가로로 배열된 문자열을 되돌려 표시하는 방법

네.

그림 완성

스펀지 초밥의 동작은 어색하지만 이런 느낌을 만들어 봤다.

간단한 일반 바닥글.

전제 조건

MacBook Air(M1200)를 사용합니다.

create-react-app에서 만든 프로그램을 가져왔습니다.

문서 구성은 주로 호하크의 영상을 참고했다.

실제 코드

1. 바닥글 구성 요소 만들기

파일이 생성된 위치와 구성 요소의 이름은 임의입니다.
src/compornents/footer/FooterBoxDetail.jsx

import React from "react";
import "../../assets/css/footerDetail.css";
import logo from "../../assets/img/src/TimeBooth_logo_row01.png";

const FooterBoxDetail = () => {
  return (
    <footer className="footer-detail-container">
      <div className="footer-detail-container--inner center-box">
        <div className="footer-detail-top--inner flex-row">
          <img className="footer-detail-logo" src={logo} alt="ロゴ画像" />
          <div className="copy-detail arial">© 2021 Rayward Inc.</div>
        </div>
        <div className="footer-detail-middle--inner flex-row">
          <div className="footer-detail-menu-text">
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              特定商取引法に基づく表記
            </a>
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              プライバシーポリシー
            </a>
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              利用規約
            </a>
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              ロイヤルティ利用規約
            </a>
            <a className="hover1" href="/policy" target="_blank" rel="noreferrer noopener">
              会社概要
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default FooterBoxDetail;

윈도우 크기에 따라 문자열을 되돌려 배열하는 방법

리로 말고 div를 flex로 가로로 잡아주세요.

  <div className="footer-detail-top--inner flex-row">

보통 l과 리로 바닥을 만드나요?조사하면 그런 인코딩이 많아요.
사용에 익숙하지 않아서 div와 flex로 강제로 했어요.
flex-row는 자주 사용하는 물건이기 때문에 공통 CSS 로그인으로 사용

.flex-row {
  display: flex;
  flex-flow: row;
  align-items: center;
}

2. CSS 사용

구성 요소별로 CSS 파일을 만들고 있습니다.
src/assets/css/footerDetail.css

/*********** footerDetail ***********/
.footer-detail-container {
  position: relative;
  background-color: #e3e3e3;
  height: auto;
}
.footer-detail-container--inner {
  width: 100%;
}
.footer-detail-top--inner {
  padding: 30px 0px 5px 10px;
}
.footer-detail-middle--inner {
  padding: 0px 0px 30px 15px;
}
.footer-detail-logo {
  width: 150px;
}
.copy-detail {
  color: #404040;
  font-size: 11px;
  padding-top: 11px;
  padding-left: 5px;
}
.footer-detail-menu-text {
  font-size: 11px;
  letter-spacing: 0.125rem;
  line-height: 1.7;
  text-decoration: none;
  color: grey;
}
.footer-detail-menu-text > a {
  display: inline-block;
  text-decoration: none;
  color: grey;
  padding: 0px 5px 5px 5px;
}

/*********** Responsive ***********/
@media screen and (min-width: 576px) {
  .footer-container--inner {
    width: 80%;
  }
}
@media screen and (min-width: 1024px) {
  .footer-detail-container {
    background-color: black;
  }
  .footer-detail-container--inner {
    width: 650px;
  }
  .copy-detail {
    color: white;
  }
  .footer-detail-menu-text {
    color: white;
  }
  .footer-detail-menu-text > a {
    color: white;
  }
}

스펀지 롤러의 포인트

미디어 쿼리

@media screen and (min-width: 1024px)

미디어 조회를 이용하여 스펀지 패드의 느낌을 강제로 조정한다.

a 태그의 기본 파란색을 바꾸는 방법

a 태그에 CSS 추가

.footer-detail-menu-text > a {
  display: inline-block;
  text-decoration: none;
  color: grey;
  padding: 0px 5px 5px 5px;
}

"CSS를 a 태그에 적용할 때"를 사용하여 요소를 지정하시겠습니까?하면 잘 될 것 같아요.

참고 자료

React 응용 프로그램에서 참조한 호랑이 하크

덧붙이다

CSS의 기술 기사를 실제 제작한 응용설명으로 살펴보면 매우 이해하기 어려운 것이 발견됐다.
쓰는 과정에서 나는 이것이 절대 다른 사람에게 도움이 되지 않는다고 생각한다(웃음)
CSS 설명용 샘플 적용을 준비하지 않거나 행위를 확인하면서 이해할 수 없는 형태는 어렵다.
이번에는 앞의 심오함을 제멋대로 느꼈다.
지금은 혼자 개발해서 문제없지만 팀이라면 CSS 디자인은 말할 것도 없고 명칭 같은 것도 합치기 힘들어요.
앞의 전공에서 기초를 배우고 싶습니다.
추천하는 영상이 있다면 댓글 등으로 공유할 수 있다면 너무 기쁠 것 같아요m()m