초기 CSS설정

*{
box-sizing:borderbox;
margin:0;
padding:0;
}

css값을 초기화(다른 브라우저 마다 크기가 다를 수 있기 때문)

---

TIP

웹사이트를 작성할 때 class만 쓰는게 베스트!
div는 자동으로 width=100%이므로 굳이 작성 안해도됨.
처음에 빈 컨테이너를 만들어 차곡 차곡 넣는 느낌으로 미리 틀 짜고 코딩

레이아웃

html,body{
height:100%
}

하는 이유는 웹페이지 전체를 쓰기위해 작성!

전체를 쓸 수 있기 때문에 display:flex; 를 이용해 가운데 설정하기 편하다!
위에서 예를 들면 검색창에 돋보기와 input태그와 키보드, 마이크가 있는데
돋보기에 flex:1 , input태그에 flex:7, 키보드에 flex:1, 마이크에 flex:1 하면
부모태그 영역에서 1:7:1:1 비율로 이동한다.
그러므로 width값을 줄 필요없다.

두번째는 position:absolute; 으로 top과 left에 각각 50%씩 넣어 가운데정렬!
이때 오른쪽 하단으로 이동하는데 기준이 왼쪽 위 꼭지점이 기준이라서 그렇다.
그러므로 transform : translate(-50,-50) 적용.