반응형 그리드 사용

검색창을 하나 만들어주자. 검색창은 antd 여기서 한번 찾아보자. 그냥 버튼과 파란색 버튼이 머가 다른지 확인 하기위해 show code로 코드를 비교해서 파란색 검색창을 넣어준다.(enterbutton 추가)

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Menu, Input } from 'antd';


const AppLayout = ({ children }) => {
    return(
        <div>
            <Menu mode="horizontal">
                <Menu.Item>
                    <Link href="/"><a>노드버드</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/"><a>프로필</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Input.Search enterButton />
                </Menu.Item>
                <Menu.Item>
                    <Link href="/"><a>회원가입</a></Link>
                </Menu.Item>
            </Menu>
        </div>
    )
}

AppLayout.propTypes = {
    children: PropTypes.node.isRequired,
};

export default AppLayout;

 

배치가 이상하므로 가운데로 바꿔보자.

// AppLayout.js

<Input.Search enterButton style={{ verticalAlign: 'middle' }}/>

css 프레임워크는 그리드 시스템이 있다.

 

웹은 반응형 적응형 둘중하나를 하는데 적응형은 데스크탑 테플릿 모바일 따로따로 하는 것이고

 

반응형은 처음에는 모바일 페이지였다가 점점 늘어남에 따라 컴포넌트들이 재배치 되면서 화면이 바뀌는 것을 말한다.

 

화면을 나눌 때는 가로먼저 나누고 가로로 나눈것 중에서 세로로 나누는 것을 생각하면서 작성하자.

 

반응형으로 할 때는 먼저 모바일을 디자인한다. 모바일 - 테블릿 - 데스크탑식으로 하자.

 

xs 모바일 

sm 태블릿

md 작은 데스크탑이다.

 

xs={24} md={6}는 24개의 컬럼으로 나누고 즉 모바일이면 24칸 다 차지하는 것이고 어느정도 크기에 가면 6칸만 차지하는 것이다. 24칸중에 6칸 차지하니까 25%

 

xs={24} md={12} 50%

 

xs={24} md={6} 25%

// AppLayout.js

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Menu, Input, Row, Col } from 'antd';


const AppLayout = ({ children }) => {
    return(
        <div>
            <Menu mode="horizontal">
                <Menu.Item>
                    <Link href="/"><a>노드버드</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/"><a>프로필</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Input.Search enterButton style={{ verticalAlign: 'middle' }}/>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/"><a>회원가입</a></Link>
                </Menu.Item>
            </Menu>
            <Row>
                <Col xs={24} md={6}>
                    왼쪽 메뉴
                </Col>
                <Col xs={24} md={12}>
                    {children}
                </Col>
                <Col xs={24} md={6}>
                    오른쪽 메뉴
                </Col>
            </Row>
        </div>
    )
}

AppLayout.propTypes = {
    children: PropTypes.node.isRequired,
};

export default AppLayout;

예상을 해보자. 모바일일 때는 컬럼하나가 24칸 다 차지하면 100% 다 차지하고 있고 그 아래 100%차지하는 거 한개 더 있고 아래에 한 개 더있다. 스택처럼 3개가 쌓여있다고 생각할 수 있다.

 

md를 이용해서 화면을 좀 넓혀서 데스크탑에서도 볼 수 있는 화면이 되면 세겹으로 쌓여있던 화면이 하나는 25%

그 옆에 50% 그 옆에 25% 가로로 배치가 되게 된다.

 

즉 모바일에서는 세로로 배치가 되었던게 반응형으로 가로로 배치가 되는 것이다.

아래와 같이 쌓여있다가

 

화면을 넓히면 아래와 같이 나오게 된다. (25% 50% 25%)

즉 모바일 형태(xs) - 테블릿 형태(sm) 데스크탑형태(md)로 되는 것이다.

24등분을 한다는 것을 기억하고 중간에 sm이 태플릿이 생략되어 있다. lg나 xl같은 대화면도 있다.

정확한 픽셀은 여기를 참고하자. 24칸으로 나눈 이유가 나눌 수가 많기 때문에 나누기 좋은 숫자라고 생각하자.

            <Row>
                <Col xs={24} sm={} md={6} xl={}>
                    왼쪽 메뉴
                </Col>
                <Col xs={24} md={12}>
                    {children}
                </Col>
                <Col xs={24} md={6}>
                    오른쪽 메뉴
                </Col>
            </Row>

gutter라는게 있는데 컬럼들이 25% 50% 25% 너무 붙어있기 때문에 컬럼사이에 간격을 주는게 gutter이다.

            <Row gutter={8}>
                <Col xs={24} md={6}>
                    왼쪽 메뉴
                </Col>
                <Col xs={24} md={12}>
                    {children}
                </Col>
                <Col xs={24} md={6}>
                    오른쪽 메뉴
                </Col>
            </Row>

 

태그를 주어서 내 블로그 사이트를 넣어줘보자 target blank를 통해서 새창을 띄우게 해준다. 이 때 target="_blank"가 보안상의 위험이 있어서 rel="noreferrer noopener"을 꼭 넣어주자.

            <Row gutter={8}>
                <Col xs={24} md={6}>
                    왼쪽 메뉴
                </Col>
                <Col xs={24} md={12}>
                    {children}
                </Col>
                <Col xs={24} md={6}>
                    <a href="https://kjh950601.tistory.com/" target="_blank" rel="noreferrer noopener"></a>
                </Col>
            </Row>

 

 

 

 

 

<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의