웹개발 1주차 정리(1)

1. 구글 검색엔진이 검색하는 제목

<h1>내 생애 최고의 영화들</h1>;

웹 개발 할 때 하나씩은 꼭 넣어주자!

2. 화면 가운데로 배치시켜주는 코드

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

위 코드에서 flex-direction은
row 가 기본이고 이때에는 가로방향 좌에서 우로,
column 으로 설정하면 세로방향 상에서 하로,
row-reverse / column-reverse는 각각 반대방향(reverse)으로 흐른다.

3. vw/vh 와 % 의 차이

width: 10vw; //vertical width
height: 10vh; //vertical height

vh와 vw는 반응형 웹페이지 구성할 때 유용하게 쓰일 수 있다.
전체 화면 크기에 비례하기 때문에 만약 전체화면 넓이가 1920px일 때 10vh라고 하면 192px이다.

width: 30%;
height: 80%;

%는 부모범위 안에서의 넓이이다.
만약 부모 범위가 200px이라고 가정할 때, 30%라고 하면 60px이라고 생각하면 된다.

4. 모바일처리

max-width: 100vw;
width: 1200px;

최대 100vw 만큼 커질 수 있지만
그 전까지는 1200px만큼만 채워져 있어야 한다.