React Responsive웹 (2)
Services
-
scr/components/Services 폴더 만들기
-
index.js 와 ServiceElements.js 파일 만들기
-
index.js 에 다음과 같이 작성하기
import React from 'react'
import Icon1 from '../../images/svg-1.svg'
import Icon2 from '../../images/svg-2.svg'
import Icon3 from '../../images/svg-3.svg'
import {ServicesContainer, ServicesH1, ServicesWrapper, ServicesCard, ServicesIcon, ServicesH2, ServicesP} from './ServiceElements'
const Services = () => {
return (
<ServicesContainer id='services'>
<ServicesH1>Our services</ServicesH1>
<ServicesWrapper>
<ServicesCard>
<ServicesIcon src={Icon1}/>
<ServicesH2>Reduce expenses</ServicesH2>
<ServicesP>We help your fess and increase your overall revenue.</ServicesP>
</ServicesCard>
<ServicesCard>
<ServicesIcon src={Icon2}/>
<ServicesH2>Virtual Offices</ServicesH2>
<ServicesP>you can acess our plataform online anywhere in the world.</ServicesP>
</ServicesCard>
<ServicesCard>
<ServicesIcon src={Icon3}/>
<ServicesH2>Reduce expenses</ServicesH2>
<ServicesP>Unlock our special membership card that returns 5% cash back.</ServicesP>
</ServicesCard>
</ServicesWrapper>
</ServicesContainer>
)
}
export default Services
scr/components/Services 폴더 만들기
index.js 와 ServiceElements.js 파일 만들기
index.js 에 다음과 같이 작성하기
import React from 'react'
import Icon1 from '../../images/svg-1.svg'
import Icon2 from '../../images/svg-2.svg'
import Icon3 from '../../images/svg-3.svg'
import {ServicesContainer, ServicesH1, ServicesWrapper, ServicesCard, ServicesIcon, ServicesH2, ServicesP} from './ServiceElements'
const Services = () => {
return (
<ServicesContainer id='services'>
<ServicesH1>Our services</ServicesH1>
<ServicesWrapper>
<ServicesCard>
<ServicesIcon src={Icon1}/>
<ServicesH2>Reduce expenses</ServicesH2>
<ServicesP>We help your fess and increase your overall revenue.</ServicesP>
</ServicesCard>
<ServicesCard>
<ServicesIcon src={Icon2}/>
<ServicesH2>Virtual Offices</ServicesH2>
<ServicesP>you can acess our plataform online anywhere in the world.</ServicesP>
</ServicesCard>
<ServicesCard>
<ServicesIcon src={Icon3}/>
<ServicesH2>Reduce expenses</ServicesH2>
<ServicesP>Unlock our special membership card that returns 5% cash back.</ServicesP>
</ServicesCard>
</ServicesWrapper>
</ServicesContainer>
)
}
export default Services
1) 컴포넌트부터 추가하기
2) props만들기
import {ServicesContainer, ServicesH1, ServicesWrapper, ServicesCard, ServicesIcon, ServicesH2, ServicesP} from './ServiceElements'3) Icon들 가져오기
import Icon1 from '../../images/svg-1.svg'
import Icon2 from '../../images/svg-2.svg'
import Icon3 from '../../images/svg-3.svg'3)
ServiceCard 복붙해서 여러 개 만들기
3)
- src/pages/index.js 작성하기
import React, {useState} from 'react'
import Footer from '../components/Footer';
import Hero from '../components/Hero'
import Info from '../components/Info'
import { homeObjOne, homeObjTwo, homeObjThree} from '../components/Info/Data';
import Navbar from '../components/Navbar'
import Services from '../components/Services';
import Sidebar from '../components/SideBar'
const Home = () => {
const [isOpen, setIsOpen] = useState(false)
const toggle = () =>{
setIsOpen(!isOpen);
}
return (
<>
<Sidebar isOpen={isOpen} toggle={toggle} />
<Navbar toggle={toggle}/>
<Hero />
<Info {...homeObjOne}/>
<Info {...homeObjTwo}/>
<Services />
<Info {...homeObjThree}/>
<Footer />
</>
)
}
export default Home
1) 컴포넌트 가져오기/추가
2) Service의 경우 딱히 props의 값은 없다.
- ServiceElements.js 다음과 같이 작성하기
import styled from 'styled-components'
export const ServicesContainer = styled.div`
height: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #010606;
@media screen and (max-width: 768px) {
height: 1100px;
}
@media screen and (max-width: 480px) {
height: 1300px;
}
`
export const ServicesWrapper = styled.div`
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
grid-gap: 16px;
padding: 0 50px;
@media screen and (max-width: 1000px) {
grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 786px) {
grid-template-columns: 1fr;
padding: 0 20px;
}
`
export const ServicesCard = styled.div`
background: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border-radius: 10px;
max-height: 340px;
padding: 30px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: all 0.2s ease-in-out;
&:hover {
transform: scale(1.02);
transition: all 0.2s ease-in-out;
cursor:pointer;
}
`
export const ServicesIcon = styled.img`
height: 160px;
width: 160px;
margin-bottom: 10px;
`
export const ServicesH1 = styled.h1`
font-size: 2.5rem;
color: #fff;
margin-bottom: 64px;
@media screen and (max-width: 480px) {
font-size: 2rem;
}
`
export const ServicesH2 = styled.h2`
font-size: 1rem;
margin-bottom: 10px;
`
export const ServicesP = styled.p`
font-size: 1rem;
text-align: center;
`
1) ServicesContainer 만들기
- 전체를 감싸는 Container
- display: flex로 설정 뒤 세로를 주축으로 하고, 정중앙에 아이템을 넣는다.
- 최대 width가 768px일 경우 height 는 1100px이고, 최대 480px 일 경우 height는 1300px이다( 폭이 줄어드는 만큼 높이가 더 커진다. )
2) ServicesWrapper 만들기
- 1)에 속해 있다.
- max-width는 1000px로 고정되어 있다.
- display는 grid를 사용한다
- grid-template-columns는 1fr씩 3개다. (열이 3개라는 뜻 0 0 0 )
- grid 사이의 gap은 16px
- 최대 width가 1000px일 경우 grid-template-columm은 1fr 2개로 줄어든다( 폭이 작아지니까)
- 최대 width가 768px일 경우 grid-template-column은 1fr 1개로 줄어든다 (폭이 더 작아지니까)
3) ServicesCard 만들기
- 2)에 속해 있다.
- display: flex이며 상단 중앙에 위치한다
- flex direction은 세로다.
- border-radius는 px로 고정값을 주었다.
- 최대 길이는 340px이다. 그 이상이면 디자인이 미워지니까.
- box-shadow 값도 설정해준다.
- 전체 transition 도 설정해준다.
- hover 이벡트가 생길 경우 1.02배 커지며, 이는 transition 규칙을 따른다. cursor는 덤이다.
4) ServicesIcon 만들기
- 3)에 속해 있다.
- Img를 디자인하는 것이다.
- height는 160px로 고정이다.
5) ServiceH1 만들기
- 1) 에 속해 있다.
- font-size는 2.5rem이다.
- 최대 폭이 480px일 때 글자 크기가 2rem으로 줄어든다.
6) ServiceH2 만들기
- 3)에 속해 있다.
- 글자 크기는 1rem이다
7) ServiceP 만들기
- 3에 속해 있다.
- 글자 크기는 1rem이다
SignIn 만들기
- src/pages에 signin.js 파일 만들기
import React from 'react'
import ScrollToTop from '../components/ScrollToTop'
import SignIn from '../Signin'
const SigninPage = () => {
return (
<>
<ScrollToTop />
<SignIn />
</>
)
}
export default SigninPage
import React from 'react'
import ScrollToTop from '../components/ScrollToTop'
import SignIn from '../Signin'
const SigninPage = () => {
return (
<>
<ScrollToTop />
<SignIn />
</>
)
}
export default SigninPage
1) 컴포넌트 추가하기
라우터 추가하기
(App.js)
import './App.css';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Home from './pages';
import SigninPage from './pages/signin';
function App() {
return (
<Router>
<Switch>
<Route path='/' component={Home} exact />
<Route path='/signin' component={SigninPage} exact />
</Switch>
</Router>
);
}
export default App;
1) path 추가하기
2)
Footer 만들기
-
src/components/Footer 폴더 추가하기
-
Footer폴더에 index.js와 FooterElements.js 파일 추가하기
-
index.js 다음과 같이 작성
import React from 'react'
import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
import { FooterContainer, FooterWrap, FooterLinkWrapper, FooterLinkItems, FooterLinkContainer, FooterLinkTitle, FooterLink, SocialIconLink, SocialIcons, SocialLogo, SocialMedia, SocialMediaWrap, WebsiteRights } from './FooterElements'
import { animateScroll as scroll } from 'react-scroll';
const Footer = () => {
const toggleHome = () => {
scroll.scrollToTop();
}
return (
<FooterContainer>
<FooterWrap>
<FooterLinkContainer>
<FooterLinkWrapper>
<FooterLinkItems>
<FooterLinkTitle>About us</FooterLinkTitle>
<FooterLink to='/'>How it works</FooterLink>
<FooterLink to='/'>Testimonials</FooterLink>
<FooterLink to='/'>Carrers</FooterLink>
<FooterLink to='/'>Investor</FooterLink>
<FooterLink to='/'>Terms of Service</FooterLink>
</FooterLinkItems>
<FooterLinkItems>
<FooterLinkTitle>Contact Us</FooterLinkTitle>
<FooterLink to='/'>Contact</FooterLink>
<FooterLink to='/'>Support</FooterLink>
<FooterLink to='/'>Destinations</FooterLink>
<FooterLink to='/'>Sponsorships</FooterLink>
</FooterLinkItems>
</FooterLinkWrapper>
<FooterLinkWrapper>
<FooterLinkItems>
<FooterLinkTitle>Videos</FooterLinkTitle>
<FooterLink to='/'>Submit Video</FooterLink>
<FooterLink to='/'>Ambassadors</FooterLink>
<FooterLink to='/'>Agency</FooterLink>
<FooterLink to='/'>Influencer</FooterLink>
</FooterLinkItems>
<FooterLinkItems>
<FooterLinkTitle>Social Media</FooterLinkTitle>
<FooterLink to='/'>Instagram</FooterLink>
<FooterLink to='/'>Facebook</FooterLink>
<FooterLink to='/'>Youtube</FooterLink>
<FooterLink to='/'>Twitter</FooterLink>
</FooterLinkItems>
</FooterLinkWrapper>
</FooterLinkContainer>
<SocialMedia>
<SocialMediaWrap>
<SocialLogo to='/' onClick={toggleHome}>
dolla
</SocialLogo>
<WebsiteRights>dolla © {new Date().getFullYear()} All rights reserved.</WebsiteRights>
<SocialIcons>
<SocialIconLink href='/' target='_blank' arial-label='Facebook'>
<FaFacebook />
</SocialIconLink>
<SocialIconLink href='//www.instagram.com/leonardtcomdt/' target='_blank' arial-label='Instagram'>
<FaInstagram/>
</SocialIconLink>
<SocialIconLink href='//www.youtube.com/channel/UCF6Cz50AqAJcg6JC5LDRElg/videos?view_as=subscriber' target='_blank' arial-label='Youtube'>
<FaYoutube />
</SocialIconLink>
<SocialIconLink href='/' target='_blank' arial-label='Twitter'>
<FaTwitter/>
</SocialIconLink>
<SocialIconLink href='//www.linkedin.com/in/leonardtlauenstein/' target='_blank' arial-label='Linkedin'>
<FaLinkedin />
</SocialIconLink>
</SocialIcons>
</SocialMediaWrap>
</SocialMedia>
</FooterWrap>
</FooterContainer>
)
}
export default Footer
src/components/Footer 폴더 추가하기
Footer폴더에 index.js와 FooterElements.js 파일 추가하기
index.js 다음과 같이 작성
import React from 'react'
import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
import { FooterContainer, FooterWrap, FooterLinkWrapper, FooterLinkItems, FooterLinkContainer, FooterLinkTitle, FooterLink, SocialIconLink, SocialIcons, SocialLogo, SocialMedia, SocialMediaWrap, WebsiteRights } from './FooterElements'
import { animateScroll as scroll } from 'react-scroll';
const Footer = () => {
const toggleHome = () => {
scroll.scrollToTop();
}
return (
<FooterContainer>
<FooterWrap>
<FooterLinkContainer>
<FooterLinkWrapper>
<FooterLinkItems>
<FooterLinkTitle>About us</FooterLinkTitle>
<FooterLink to='/'>How it works</FooterLink>
<FooterLink to='/'>Testimonials</FooterLink>
<FooterLink to='/'>Carrers</FooterLink>
<FooterLink to='/'>Investor</FooterLink>
<FooterLink to='/'>Terms of Service</FooterLink>
</FooterLinkItems>
<FooterLinkItems>
<FooterLinkTitle>Contact Us</FooterLinkTitle>
<FooterLink to='/'>Contact</FooterLink>
<FooterLink to='/'>Support</FooterLink>
<FooterLink to='/'>Destinations</FooterLink>
<FooterLink to='/'>Sponsorships</FooterLink>
</FooterLinkItems>
</FooterLinkWrapper>
<FooterLinkWrapper>
<FooterLinkItems>
<FooterLinkTitle>Videos</FooterLinkTitle>
<FooterLink to='/'>Submit Video</FooterLink>
<FooterLink to='/'>Ambassadors</FooterLink>
<FooterLink to='/'>Agency</FooterLink>
<FooterLink to='/'>Influencer</FooterLink>
</FooterLinkItems>
<FooterLinkItems>
<FooterLinkTitle>Social Media</FooterLinkTitle>
<FooterLink to='/'>Instagram</FooterLink>
<FooterLink to='/'>Facebook</FooterLink>
<FooterLink to='/'>Youtube</FooterLink>
<FooterLink to='/'>Twitter</FooterLink>
</FooterLinkItems>
</FooterLinkWrapper>
</FooterLinkContainer>
<SocialMedia>
<SocialMediaWrap>
<SocialLogo to='/' onClick={toggleHome}>
dolla
</SocialLogo>
<WebsiteRights>dolla © {new Date().getFullYear()} All rights reserved.</WebsiteRights>
<SocialIcons>
<SocialIconLink href='/' target='_blank' arial-label='Facebook'>
<FaFacebook />
</SocialIconLink>
<SocialIconLink href='//www.instagram.com/leonardtcomdt/' target='_blank' arial-label='Instagram'>
<FaInstagram/>
</SocialIconLink>
<SocialIconLink href='//www.youtube.com/channel/UCF6Cz50AqAJcg6JC5LDRElg/videos?view_as=subscriber' target='_blank' arial-label='Youtube'>
<FaYoutube />
</SocialIconLink>
<SocialIconLink href='/' target='_blank' arial-label='Twitter'>
<FaTwitter/>
</SocialIconLink>
<SocialIconLink href='//www.linkedin.com/in/leonardtlauenstein/' target='_blank' arial-label='Linkedin'>
<FaLinkedin />
</SocialIconLink>
</SocialIcons>
</SocialMediaWrap>
</SocialMedia>
</FooterWrap>
</FooterContainer>
)
}
export default Footer
1) 컴포넌트 추가
2)(선행작업: 5번) props 추가
import { FooterContainer, FooterWrap, FooterLinkWrapper, FooterLinkItems, FooterLinkContainer, FooterLinkTitle, FooterLink, SocialIconLink, SocialIcons, SocialLogo, SocialMedia, SocialMediaWrap, WebsiteRights } from './FooterElements'3) SocialMedia 부분 디테일 작업하기
4) 소셜미디어 아이콘 가져오기
import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
- pages/index.js에 추가
import React, {useState} from 'react'
import Footer from '../components/Footer';
import Hero from '../components/Hero'
import Info from '../components/Info'
import { homeObjOne, homeObjTwo, homeObjThree} from '../components/Info/Data';
import Navbar from '../components/Navbar'
import Services from '../components/Services';
import Sidebar from '../components/SideBar'
const Home = () => {
const [isOpen, setIsOpen] = useState(false)
const toggle = () =>{
setIsOpen(!isOpen);
}
return (
<>
<Sidebar isOpen={isOpen} toggle={toggle} />
<Navbar toggle={toggle}/>
<Hero />
<Info {...homeObjOne}/>
<Info {...homeObjTwo}/>
<Services />
<Info {...homeObjThree}/>
<Footer />
</>
)
}
export default Home
- FooterElements.js 파일 작성
import styled from 'styled-components'
import {Link} from 'react-router-dom'
export const FooterContainer = styled.footer`
background-color: #101522;
`
export const FooterWrap = styled.div`
padding: 48px 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1100px;
margin: 0 auto;
`
export const FooterLinkContainer = styled.div`
display: flex;
justify-content: center;
@media screen and (max-width: 820px) {
padding-top: 32px;
}
`
export const FooterLinkWrapper = styled.div`
display: flex;
@media screen and (max-width: 820px) {
flex-direction: column;
}
`
export const FooterLinkItems = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
color: #fff;
@media screen and (max-width: 420px) {
margin: 0;
padding: 10px;
width: 100%;
}
`
export const FooterLinkTitle = styled.h1`
font-size: 14px;
margin-bottom: 16px;
`
export const FooterLink = styled(Link)`
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
font-size: 14px;
&:hover {
color: #01bf71;
transition: 0.3s ease-in-out;
}
`
export const SocialMedia = styled.section`
max-width: 1000px;
width: 100%;
`
export const SocialMediaWrap = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1100px;
margin: 40px auto 0 auto;
@media screen and (max-width: 820px) {
flex-direction: column;
}
`
export const SocialLogo = styled(Link)`
color: #fff;
justify-self: start;
cursor: pointer;
text-decoration: none;
font-size: 1.5rem;
display: flex;
align-items: center;
margin-bottom: 16px;
font-weight: bold;
`
export const WebsiteRights = styled.small`
color: #fff;
margin-bottom: 16px;
`
export const SocialIcons = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
width: 240px;
`
export const SocialIconLink = styled.a`
color: #fff;
font-size: 24px;
`1) FooterContainer 설정
-footer 디자인
- 배경색 설정
2) FooterWrap 설정
- padding 값 충분히 추기
- display: flex; 로 넣고
- flex-direction은 세로로 설정, 모든 아이템은 중간에 있음
- 최대 폭은 1100px
- margin 상하는 0 이고 좌우는 auto
3) FooterLinksContainer 설정
- 4개의 링크덩어리가 있고 그것들은 2개의 덩어리로 나뉘어져 있는데, 이 2묶음을 묶어주는 container
- display: flex 설정하고 가로 주축기준 중간이다.
- 반응형: 최대 폭 820px까지 padding-top은 32px로 설정한다
4) FooterLinksWrapper 설정
- 2개릐 링크덩어리를 묶는 wrapper이다
- display:flex로 설정하고
- 반응형: 만약 820px보다 낮을 경우 flex-direction을 column으로 설정한다
5) FooterLinkItems 설정
- link덩어리를 묶는 items이다
- display: flex로 설정하고, 주축은 세로로 하며, 좌측으로 정렬한다
- margin은 16px로 설정한다
- text-align은 left로 설정한다 ( 좌측정렬로 통일)
- width는 고정 px로 설정한다
- box-sizing은 border-box로 정하기
- 반응형: 420px보다 작아지면 margin은 0, width는 100%로 설정한다
6)FooterLinkTitle 설정
- 5에 속해 있다.
-h1 을 스타일링한다
-font-size는 14px로 설정한다
7) FooterLink 설정
- 5에 속해 있다.
- text-decoraton 없앤다
- font-size는 14px로 설정한다
- hover 효과가 들어갈 경우 색깔을 바꾸고, transition도 설정한다
8) SocialMedia 설정
- section 디자인
- max-width 는 1000px로 고정
- width는 100%. 즉, width는 늘 꽉 차있지만 그게 1000px를 넘어갈 수는 없다는 소리
9) SocialMediaWrap 설정
- display: flex 추가, 주축은 서로 거리를 max로 유지하지만, 세로 기준 중앙에 위치해 있다(세로 대칭)
-최대 폭은 1100px이다
-반응형: 820px보다 작은 경우, 주축이 세로가 된다.
10) SocialLogo 설정
-Link를 스타일링한다
-좌측에 위치해 있다.
- cursor는 pointer다
-font size는 1.5rem으로 설정하낟
-display는 flex로 설정하고 중앙에 위치한다.
11) WebsiteRights 설정
-small 을 스타일링한다
12) SocialIcons 설정
- display는 flex로 설정하고, 중앙에 위치하되 주축은 거리가 최대다
-width는 고정값인 240px이다
13) SocialIconLink 설정
- a를 스타일링한다
-font size는 고정값인 24px이다
-text-deco 없앤다
Author And Source
이 문제에 관하여(React Responsive웹 (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nahyunbak/React-Responsive웹-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
