Github page로 포트폴리오 웹페이지 만들기
Main page를 만들고 있습니다.
이전에는 page의 Text를 svg로 저장해놓고 @svrg/webpack을 통해서 불러와 랜더링해주었습니다.
이제 구조를 잡아 보고, css와 styled-component를 통해서 간단한 스타일을 입혀보는 작업을 해주겠습니다.
그럼 먼저 , 필요한 모듈들을 설치해 주고, 설정을 해 줍니다.
1. 모듈 설치 및 설정
이번 작업에서 필요한 모듈들은 styled-components 와 css 를 사용하기 위한 style-loader 와 css-loader입니다.
설치해 줍니다.
npm install --save-dev styled-components style-loader css-loaderstyled-components는 필요에 따라 import 해서 사용하면 됩니다.
style-loader와 css-loader는 webpack → module→rules에 설정해 주어야합니다.
// webpack.config.js ... module: { rules: [ { test: /\.js$/, exclude: ["/node_modules/"], use: ["babel-loader"], }, { test: /\.css$/, use: ["style-loader", "css-loader"], }, { test: /\.svg$/i, loader: "@svgr/webpack", options: { name: "[path][name].[ext]", outputPath: "resources/images", }, }, ], }, ...설정을 하고 나서 npm run dev로 dev-server를 실행해 줍니다.
2. app.css
스타일의 경우 styled-components를 사용하지만, component들이 랜더링되는 root element인 div#App 태그에 기본적인 스타일을 css를 이용해 봅니다.
먼저 resources→css 디렉토리를 만들고, app.css파일을 만들어 줍니다.
그리고 app.css에 아래의 코드를 작성해 줍니다.
/** app.css **/ html, body, #App { width: 100%; height: 100%; margin: 0; padding: 0; }이 app.css파일을 App.js 파일에 import 시켜 줍니다.
// App.js // modules import React from "react"; import { Routes, Route } from "react-router"; // css import "./resources/css/app.css"; // Pages import Main from "./Main"; const App = () => { return ( <Routes> <Route exact path="/" element={<Main />}></Route> </Routes> ); }; export default App;html , body, #App의 margin과 padding을 reset하고, width와 height를 브라우저 크기에 맞춰 반응하게끔 했습니다.
3. Tag Structure
태그를 짜보자!
이제 태그 구조를 생각해서 짜 봅니다.
div#App 을 시작으로
Main 페이지의 div 태그가 있고,
그안에 svg들을 감싸는 div 태그들 그리고 svg 클릭시 다른 페이지로 이동해야 하기때문에 a 태그로 svg를 감싸주어야 합니다.
간략하게 보면,
div#app → div → div →div → a → svg
처럼 됩니다.
React 에서는 다른 페이지로 이동하기 위해서 Link를 사용합니다. a 태그도 사용할 수 있습니다.
svg 중 HIIO420, ABOUT,WORK의 경우 현재 도메인에서 라우팅되는 페이지로 이동을 하고,
BLOG, GITHUB 는 각각 다른 도멘인으로 이동합니다.
다른도메인으로 이동할 경우 a 태그를 사용해주고, 아닐경우에는 Link를 사용해 줍니다.
아직 다른 페이지들이 안만들어 졌고, 라우팅설정을 해주지 않았으므로 Link 의 pathname은 ‘/’로 해 줍니다.
styled-components 와 Link도 import 해주고
생각해 놓은 것 처럼 코드를 변경해 줍니다.
// src/Main.js // modules import React, { Fragment, useEffect } from "react"; import styled from "styled-components"; import { Link } from "react-router-dom"; // SVG import HIIO420 from "./resources/images/common/HIIO420.svg"; import ABOUT from "./resources/images/common/ABOUT.svg"; import WORK from "./resources/images/common/WORK.svg"; import BLOG from "./resources/images/common/BLOG.svg"; import GITHUB from "./resources/images/common/GITHUB.svg"; const Main = () => { return ( <div> <div> <div> <Link to="/"> <HIIO420 /> </Link> </div> <div> <Link to="/"> <ABOUT /> </Link> </div> <div> <Link to="/"> <WORK /> </Link> </div> <div> <a href="https://twentytwentyone.tistory.com" target="_blank"> <BLOG /> </a> </div> <div> <a href="https://github.com/hiio42O/hiio42O.github.io.git" target="_blank" > <GITHUB /> </a> </div> </div> </div> ); }; export default Main;화면은?
이제 처음에 구상한 모습으로 배치해 주기위한 스타일 작업을 진행해 봅니다.
4. styled-components
가운데로 옮기자!!
먼저 전체적인 layout을 생각해 보면, 현재 텍스트들을 화면 가운데에 배치 시켜야 합니다.
FlexCenterLayout이라는 변수에 styled를 이용해 이 안에 속하는 하위 태그들을 가운데에 배치시키는
layout 스타일을 만들어 줍니다.
width와 height 를 모두 100% 를 주고, flex를 이용해 주겠습니다.
그리고 가장 첫 div를 FlexCenterLayout으로 변경해 줍니다.
// src/Main.js ... const FlexCenterLayout = styled.div` width:100%; height:100%; display: flex; justify-content: center; align-items: center; `; const Main = () => { return ( <FlexCenterLayout> <div> <div> <Link to="/"> <HIIO420 /> </Link> </div> <div> <Link to="/"> <ABOUT /> </Link> </div> <div> <Link to="/"> <WORK /> </Link> </div> <div> <a href="https://twentytwentyone.tistory.com" target="_blank"> <BLOG /> </a> </div> <div> <a href="https://github.com/hiio42O/hiio42O.github.io.git" target="_blank" > <GITHUB /> </a> </div> </div> </FlexCenterLayout> ); }; export default Main;
가운데에 위치하게 되었습니다.
Grid를 써보자!!
이제 각 Text들의 div를 감싸고 있는 FlexCenterLayout 의 하위 태그 div를 변경해 주어야 합니다.
display grid를 이용해서 각각의 텍스트들의 위치를 잡아 줍니다.
그러기 위해서 GridColumnLayout 이라고 이름을 짓고 스타일을 만들어 주고, div 를 변경해 주겠습니다.
// src/Main.js ... const GridColumnLayout = styled.div` display: grid; grid-template-columns: repeat(4, 1fr); `; const Main = () => { return ( <FlexCenterLayout> <GridColumnLayout> <div> <Link to="/"> <HIIO420 /> </Link> </div> <div> <Link to="/"> <ABOUT /> </Link> </div> <div> <Link to="/"> <WORK /> </Link> </div> <div> <a href="https://twentytwentyone.tistory.com" target="_blank"> <BLOG /> </a> </div> <div> <a href="https://github.com/hiio42O/hiio42O.github.io.git" target="_blank" > <GITHUB /> </a> </div> </GridColumnLayout> </FlexCenterLayout> ); }; export default Main;
아직은 배치가 이상하네요.
item을 배치해보자!!
이제 GridColumnLayout의 item들을 각각 배치 시켜야 합니다.
우선 HIIO420 텍스트를 감싸는 div를 Logo라는 componenet를 만들어 수정해 주고, 스타일은 grid-column 을 이용해 Logo가 grid template 에서 차지해야하는 부분을 정해 줍니다.
// main.js ... const Logo = styled(FlexCenterLayout)` grid-column: 1/5; `; const Main = () => { return ( <FlexCenterLayout> <GridColumnLayout> <Logo> <Link to="/"> <HIIO420 /> </Link> </Logo> <div> <Link to="/"> <ABOUT /> </Link> </div> <div> <Link to="/"> <WORK /> </Link> </div> <div> <a href="https://twentytwentyone.tistory.com" target="_blank"> <BLOG /> </a> </div> <div> <a href="https://github.com/hiio42O/hiio42O.github.io.git" target="_blank" > <GITHUB /> </a> </div> </GridColumnLayout> </FlexCenterLayout> ); }; export default Main;
비슷하게 배치가 되었지만, 나머지 item들의 배치도 수정해주어야합니다.
ABOUT은 현재 위치에 놔두고 , WORK와 BLOG는 가운데로, GITHUB는 끝에 맞춰야 합니다.
그러기 위해서 FlexLayout 을 만들어 줍니다. 이 스타일은 props로 justifyContent와 alignItems의 값들을 받아 해당 값에 맞게 스타일을 지정해 줍니다.
그리고 각각 item들을 구상한 배치에 맞게 설정해 줍니다.
// src/Main.js ... const FlexLayout = styled.div` display: flex; justify-content: ${(props) => props.justifyContent ? props.justifyContent : "flex-start"}; align-items: ${(props) => (props.alignItems ? props.alignItems : "center")}; `; ... const Main = () => { return ( <FlexCenterLayout> <GridColumnLayout> <Logo> <Link to="/"> <HIIO420 /> </Link> </Logo> <FlexLayout> <Link to="/"> <ABOUT /> </Link> </FlexLayout> <FlexLayout justifyContent="center"> <Link to="/"> <WORK /> </Link> </FlexLayout> <FlexLayout justifyContent="center"> <a href="https://twentytwentyone.tistory.com" target="_blank"> <BLOG /> </a> </FlexLayout> <FlexLayout justifyContent="flex-end"> <a href="https://github.com/hiio42O/hiio42O.github.io.git" target="_blank" > <GITHUB /> </a> </FlexLayout> </GridColumnLayout> </FlexCenterLayout> ); }; export default Main;
살짝 row의 gap만 16px로 주면 좋을것 같습니다.
전체 코드와 화면 입니다.
전체 코드 && 화면
// src/Main.js // modules import React, { Fragment, useEffect } from "react"; import styled from "styled-components"; import { Link } from "react-router-dom"; // SVG import HIIO420 from "./resources/images/common/HIIO420.svg"; import ABOUT from "./resources/images/common/ABOUT.svg"; import WORK from "./resources/images/common/WORK.svg"; import BLOG from "./resources/images/common/BLOG.svg"; import GITHUB from "./resources/images/common/GITHUB.svg"; const FlexLayout = styled.div` display: flex; justify-content: ${(props) => props.justifyContent ? props.justifyContent : "flex-start"}; align-items: ${(props) => (props.alignItems ? props.alignItems : "center")}; `; const FlexCenterLayout = styled.div` width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; `; const GridColumnLayout = styled.div` display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; `; const Logo = styled(FlexCenterLayout)` grid-column: 1/5; `; const Main = () => { return ( <FlexCenterLayout> <GridColumnLayout> <Logo> <Link to="/"> <HIIO420 /> </Link> </Logo> <FlexLayout> <Link to="/"> <ABOUT /> </Link> </FlexLayout> <FlexLayout justifyContent="center"> <Link to="/"> <WORK /> </Link> </FlexLayout> <FlexLayout justifyContent="center"> <a href="https://twentytwentyone.tistory.com" target="_blank"> <BLOG /> </a> </FlexLayout> <FlexLayout justifyContent="flex-end"> <a href="https://github.com/hiio42O/hiio42O.github.io.git" target="_blank" > <GITHUB /> </a> </FlexLayout> </GridColumnLayout> </FlexCenterLayout> ); }; export default Main;
What is Next?
styled-components를 이용해 main 화면에 스타일을 주었습니다.
이제 모바일 화면에 맞춰서 잘 표현되도록 하는 작업을 다음에 이어서 해보겠습니다.
끝!!!