max-width와 min-width

반응형 웹에서 크기를 조절할 때 사용한다.
데스크탑, 노트북, 태블릿, 모바일 별로 최소, 최대 크기를 정해놓고
그 크기를 넘어서면 레이아웃이 바뀌거나 하도록.
설정 영역의 최대, 최솟값을 설정.

ex1) max-width 예를 들어, 화면이 커지면 %로 설정해놨던 이미지나 영역도 같이 커짐.
근데, 특정 크기 이상 키우고 싶지 않을 때
전체 화면의 20%만큼 크기를 지정하되,
500px 이상으로 커지면더 이상 커지지 마라!

width : 20%;
max-width : 500px;

요렇게 해주면 됨.

인스타그램을 보면,
화면이 작은 상태에서 점점 크게 키우면
사진이 점점 커지다가 특정 크기 이상 커지지 않음.
아마 max-width를 사용한 게 아닐까.

ex2) max-width
어떤 이미지를 ul 안에 있는 li나 div 안에 넣어 놓았을 때
부모의 크기보다 이미지 원본이 더 클수도 있음.
그럴 때, 부모의 크기를 벗어나지 않도록
이미지의 크기를 max-width로 설정해주면 부모 크기를 넘어가지 않으면서
자동으로 가로 세로 비율에 맞게 조정이 된다고 한다.

출처: 연잉크님의 블로그

디바이스 크기

모바일은 480px(max-width)
모바일 컨테이너는 360px를 자주 사용하는 듯.

태블릿은 768px(max-width)를 자주 사용한다고 함.

PC는 모니터 크기에 따라 천차만별.
하지만 컨테이너를 사용해서 안에 내용을 가두는 방법을 많이 사용하는 듯.
컨테이너는 주로 1080~1440px 내에서 해결한다고 함.

크기를 px로 정해놓고, position : absolute를 사용해서 중앙에 위치시킴.
그리고 좌우 마진을 padding으로 줘서
크기를 축소시키더라도 좌우에 마진으로 인해 여유가 있도록 하는 것이 좋음.

그리드 시스템에서 요소와 요소 사이(그리드 사이)의 영역을 ‘gutter’라고 함.
주로 20px이 적당하다고 함. 모바일로 가면 10px정도.
사실 얼마 주던 상관없음. 디자인에 따라 달라짐.

그리드 계산은 Gridcalculator.dk를 사용하면 편함.

React 관련 짤막한 내용들

메소드 내에서 this.setState를 사용하고자 한다면
해당 메소드에다가 .bind(this)를 해주는 건 꼭 잊지 말자.
메소드 그 자체로는 this가 정의되지 않기 때문에, 밖에서 .bind(this)를 통해
this를 class 자체로 잡아주는 것.

일일이 하기 싫으면 constructor에다가

this.onChangeUsername = this.onChangeUsername.bind(this);  
this.onChangeDescription = this.onChangeDescription.bind(this);  
this.onChangeDuration = this.onChangeDuration.bind(this);  
this.onChangeDate = this.onChangeDate.bind(this);  
this.onSubmit = this.onSubmit.bind(this);  

이런 식으로 선언해두는 방법도 자주 사용하는 듯.

componentDidMount는 그냥 간단하게
페이지에 내용이 보여지기 직전에 호출되는 메소드라고 생각하자.