레이아웃 리셋
HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되는 경우
- 박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데,
<body>태그가 가진 기본 스타일에 약간의 여백이 있다 - width, height 계산이 여백을 포함하지 X
-> box-sizing관련 CSS정리했던 페이지 - 브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다름
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}전에 정리했듯(위 링크) 페이지 레이아웃 시
보통 flex-box 이용 flexible한 상자를 만든다.
반응형 웹디자인
해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것
웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 한다.(화면이 작은 스마트폰이나 태블릿 등 모바일 기기등)
@media
그러한 작업을 할 수 있게 해주는 것
@media ( max-width: 768px ) {
body { color: red; }
}웹브라우저의 가로 해상도가 768px 이하일 때 글자색을 빨간색으로 바꾼다. 즉, 모바일 기기의 해상도를 고려하여 적절히 CSS를 수정하거나 추가하는 것이 가능.
주의할 점은 가로폭 조정을 위해서 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 넣어야 한다는 것입니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
Creative Developer