개발자의 개발 블로그

DatePicker를 사용할 수도 있지만,

npm을 설치해서 리액트 캘린더를 사용하려고 한다.

먼저, 

https://www.npmjs.com/package/react-calendar

이 사이트에 들어가면 확인할 수 있다.

1. 설치

$ npm install react-calendar 또는

$ yarn add react-calendar으로 설치하면된다.

<Calendar /> 호출하게 되면, 달력이 나온다.

새로운 date 값을 얻기 위해서는 onChange 이벤트를 사용하면 된다.

또한, 오늘 날짜를 강조하고 싶다면, value값으로 Date() 를 주면 된다.

              <Calendar

                className={classes.calendar}

                onChange={this.onDateChange} 

                value={this.state.date}

              />

state에서는 

state= {

    date: new Date(),

}

이런식으로 있을 것이다. 

  onDateChange = date => { 

    this.setState({

      date: moment(date).format("YYYY-MM-DD")

    })

  };

이렇게 하게 되면, 선택한 날짜가 dete값으로 들어가 원하는대로 날짜를 찾을 수 있다.

이미지 배경이나 단색 배경보다, 여러 색으로 부드럽게 변하는 모습을 표현하기 위한 것이

gradient이다.

background-image나 background-color 속성으로 

한 가지 이미지 또는 한 가지 색으로 백그라운드를 적용할 수 있다. 

background-color: #ff0; // 배경이 노란색으로 변한다.

background-image: url('./dog.png'); // 개 사진이 배경으로 나온다.

https://nolboo.kim/blog/2013/07/22/beginners-guide-to-html-and-css-5-slash-10/

background: linear-gradient(#e66465, #ffff00);

- 위에서 아래로 색이 변화한다.

- 두 개뿐만 아니라 여러개로 색 변화가 가능하다

- 

그렇게 많이 사용되는 속성은 아닌 듯 하다.

여기

블로그에 가면, 자세하게 설명하고 있다.

솔직히, 읽어도 모르겠다.

뭔말인지..

소개

text-rendering CSS 속성은 렌더링 엔진에 텍스트 렌더링시 최적화 할 정보를 제공합니다.

속성값

auto

브라우저는 텍스트를 그리는 동안 속도, 판독성 및 기하학적 정밀도를 언제 최적화 할 것인지에 대해 숙련 된 추측을합니다. 이 값을 브라우저에서 해석하는 방법의 차이점에 대해서는 호환성 표를 참조하십시오.

optimizeSpeed

브라우저는 텍스트를 그릴 때 가독성 및 기하학적 정밀도보다 렌더링 속도를 강조합니다. 그것은 커닝과 합자를 사용할 수 없습니다.

optimizeLegibility

브라우저는 렌더링 속도와 기하학적 정밀도에 대한 가독성을 강조합니다. 이렇게하면 커닝과 선택적 합자가 가능합니다.

geometricPrecision

브라우저는 렌더링 속도와 가독성보다 기하학적 인 정밀도를 강조합니다. 커닝과 같은 글꼴의 특정 측면은 선형으로 확장되지 않습니다. 따라서이 값을 사용하면 해당 글꼴을 사용하는 텍스트가 잘 보입니다.

텍스트가 렌더링될때 최적화를 통해서 더욱 선명하게 나오게 하기 위해서 사용되는 속성인 것 같다.

아니면 말고..

굳이 사용할 필요... 사용해야 할 경우가 있을까? 

많이 없을 듯 하다..

일 / 월 / 년을 구하고 싶다면, Date() 를 커스텀하여 사용해야한다.

const date = new Date();

const curr_date = date.getDate();

const curr_month = date.getMonth() + 1; //Months are zero based

const curr_year = date.getFullYear();

이렇게하면

일

월

년

을 각각 구할 수 있다.

참고로 월은 +1을 해줘야한다. 1월은 0부터 시작하기 때문이다.

그 다음,  

const changeFormat = `${curr_year}-${curr_month}-${curr_date}`;

이런식으로

YYYY-MM-DD로 할 수 있다.

하지만, moment 를 사용하여 더욱 쉽게 구할 수 있다.

먼저, npm install moment로 설치해준 뒤,

이런식으로 format을 설정해주면,

동일한 결과가 나온다.

100원 200원도 아니고...

커피값이 쑥 올랐네요.

12월들어 이디야 매장을 처음 방문했는데요.

항상 먹던 카페라떼를 시키고 카드를 내밀다가 당황해서 메뉴판을 봤어요.

뭐지?

뭔가 비싼 느낌인데?

3700원이었나?

하고 검색을 해보니 역시나 12월 이후 엄청난 인상

아메리카노 400원.

라떼류 500원

우유값, 라면값, 커피값 다 오른다더니... 소리소문없이 다 오르는 것 같아요. 

월급빼고 다 오른다는 말이 정말이네요... 

씁쓸해지는 순간.

이디야 티라미슈 ICE CAKE로 기분을 풀어보아요.

결론!!

먹지말자.ㅋㅋㅋㅋㅋ

이ㄱ ㅔ 뭐야

아이스크림도 아니고. 양도 적고. 가격은 3000원에 육박하는...

달달해 맛있긴 한데. 가성비 ㄴㄴ

다시는 내 돈 주고는 안 먹는다!

이디야 애용하던 메리트가 없어졌다..

더 싸고 괜찮은 곳을 찾아봐야겠다.

div는 블록 엘리먼트이다.

div안에 있는, div를 움직이려고 한다.

<div id="big"> 

<div id="small">HI</div> 

</div>

#big { width:500px; height:500px; background-color:#ffff00; }

#small { width:50px; height:50px; background-color:#ff0000; }

이렇게 하면, 다음과 같이 나온다.

이렇게 나온다.

여기서, 빨간색 박스를 정중앙으로 이동하고 싶다면?

일단, 가로 중앙으로 이동하는 방법은

1. margin: 0 auto

이렇게 해서, 

상 우 하 좌   순서를 0 auto 0 auto 로, 즉, 상하의 마진을 0으로, 그리고 우좌의 마진을 auto로 하게 되면,

양 쪽에 자동(auto)으로 알맞게 margin이 적용되면서 가운데 정렬이 된다. 

2. text-align:center; 

참고로, text-align 속성은 텍스트의 정렬 방향을 의미한다.

속성값으로

left: 왼쪽 정렬

right: 오른쪽 정렬

center: 중앙 정렬

justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

이렇게 하면... 안 된다. 왜냐하면 ,text-align은 블록 엘리먼트 안에 들어있는 inline 요소들을 정렬하는 명령어이다.

하지만, 위 같은 경우 HI 박스도 같은 블록 엘리먼트인 div이므로 이동하지 않는다.

그래서, 블록을  inline 엘리먼트와 같이 보이도록 변경을 해줘야하는데, 이것이 바로 

display: inline-block이다.

이것을 small에 집어넣으면, inline으로 표현되기 때문에, 

big에 들어있는 text-align에 의해 가로 기준 중앙으로 이동한다.

주의할 점은  display: inline으로 하면 안된다는 것이다.

이렇게 하게 되면, small이 가진 블록만의 너비와 높이뿐만 아니라 마진 적용을 할 수 없으며, 내용물만 블록이 된다.

사진을 보면 다음과 같다.

위 두 가지 방법 중 하나를 사용하면, 가로 정렬이 완성된다. 

그렇다면 세로 정렬은 어떻게 해야할까?

1. 노란색 big div에서 display: table-cell; 으로 표의 셀처럼 설정한 뒤, vertical-align: middle; 으로 작성하면 된다.

이렇게 하면, 세로 정렬이 된다.

class App extends Component {

  render() {

    return (

      <div className="body">

        <Login />

    );

  }

}

이렇게 있는데, 가로 100%, 세로 100%로 크기를 지정하고 싶다면,

쉽게 생각하면

가로 width : 100%

세로 height : 100%

로 하면 될 것 같다. 하지만, 가로는 적용되지만, 세로는 적용되지 않는다.

위에 사진의 경우 아랫쪽 배경이 흰색이라 보이지 않지만, 로그인 폼 부분의 높이만 aqua색이 적용된 것이다.

그렇다면, 어떻게 높이를 전부 바꿀 수 있을까?

HTML이라면, body를 바꾸면 되지만, React에서는 다른 방법이 존재한다.

바로, 단위를 % 말고, 다른 것으로 하면 된다.

여기서 답을 찾았다.

https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

바로 vh와 vw 단위를 사용하면, 너비값과 높이값을 부모 요소에 맞게 사용할 수 있다. 

vh 요소는 높이값의 100분의 1의 단위입니다. 

예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이다. 즉, 100vh는 브라우저 높이의 전체이다.

이와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다. 따라서, 100vh는 브라우저 너비 전체이다.

즉, 최대 높이값이를 제작할때 100vh로 사용하면 된다.

height를 px등으로 지정하는 것과 달리, 브라우저의 높이가 줄어들거나 늘어나도

vh단위는 1/100 이므로 100vh 설정을 했기 때문에 항상 전체 높이를 잡을 수 있다.