[MernStack] Blog 만들기 14. [React] Header 작업

너무 급하게 마음을 먹지않고 천천히 공부하니 프론트딴에 재미가 들렸다.
요즘 회사에서도 틈틈히 공부를 하고 있지만 턱 없이 부족하다 ㅜㅜ


footer까지 작성했고 이제  head를 작성할 차례이다.
head는 내 블로그의 이름이 들어가고 이미지를 박아둘 수 있다.
사용차 관점에서 Header부분은 아주 중요하다.
만약 사용자가 내 블로그를 방문했다가 디자인이 너무 딱딱하고 보잘것 없다면 바로 창을 닫아버릴게 뻔하다.
사람을 처음 볼때 첫 이미지와 같은 느낌이랄까..?

---

1.Header 작성

[components/Header.js]

import React from 'react';
import {Row,Col} from 'reactstrap'

const Header = () => {
    return (
        <div id="page-header" className="mb-3">
            <Row>
                <Col md="6" sm="auto" className="text-center m-auto">
                    <h1>Read Our Blog</h1>
                    <p>Wuny's side project Work Blog</p>
                </Col>
            </Row>
        </div>
        )
    
};

export default Header;

 

<Col md="6" sm="auto" className="text-center m-auto"> 
 midium size일땐 6
small size일땐 auto로 자동으로 반응형으로 사이즈를 잡아준다.
여기서 기준은 12이다.
ex )  6일때 
 웹 가로 크기(colums)는  12가 기준이므로 12칸 중
1 2 3 | 4 5 6 7 8 9 | 10 11 12  
4~9 사이에 우리가 작성한 UI가 보여진다.
자세한 내용은 클릭

2. Header의 Css작성

[assets/custom.scss]

#page-header {
    height : 230px;
    background:url('../assets/img/LoadView_At_night.jpg');
    background-position: 50% 72%;
    background-attachment: fixed; //고정
    color : #fff;
    border-bottom: 1px #eee solid;
    padding-top: 60px;
}

• assets에 img 폴더생성 후 마음에 드는 이미지 로드한 후 background url로 불러온다.
  unsplash라는 사이트에서 많은 고화질의 이미지를 무료로 다운로드 할 수 있다.
• background-position:  가로 시작지점% 세로 시작지점%  이다.
  (이 포인트는 이미지에 맞게 설정해주자)
• border-bottom :  경계선을 bottom에만 그린다.

---

---