html 자동 생성시 viewport 지우지 말기
<meta name="viewport" content="width=device-width, initial-scale=1.0">
css 페이지 제일 위에 폰트 넣기
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
사이드바를 아래로 내려 좀더 보기 좋게 만들수 있다. 그런데 화면이 넒을때는 이대로 하면서 화면이 일정 px 이하에서만 내려가도록 한다.
이때 미디어쿼리 를 사용 합니다.
사이드바 CSS 밑에 작성
@media screen and (max-width: 700px){
.main-area,
.sidebar{
width: auto;
float: none;
}
}
적은 화면에서 즉 미디어쿼리 700px 이하에서는 제거한다.
@media screen and (max-width: 700px){
.main-area,
.sidebar{
width: auto;
float: none;
}
.main-area{
padding-right: 0;
}
}
약간의 패딩 좌우 40px도 부담이 된다.
컨테이너 아래의 새로운 미디어쿼리를 만든다.
@media screen and (max-width: 480px){
.container{
padding-left: 20px;
padding-right: 20px;
}
}
content-area의 위쪽 패딩 40px이 스마트폰환경에서는 너무 크다
@media screen and (max-width: 480px){
.content-area{
padding-top: 20px;
}
}
스마트폰 화면 이어서 넓은 화면에서는 부과적인 설명등이 있어도 부담도지 않지만 아주 작은 화면에서는 핵심만 보여주는것이 좋다.
그러므로 설명 같은 info-box 클래스의 박스및 작은 제목, 메뉴에서도 필요없는 것들을 hide-small 클래스를 넣어서 안 보여지게 한다.
@media screen and (max-width: 480px){
.hide-small{
display: none;
}
}
site-nav 클래스 CSS 찾아서 아래에 작성
@media screen and (max-width: 700px) {
.site-nav li{
width: 33.332%;
margin-right: 0;
}
.site-nav a{
padding: 15px 0;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
}
}
@media screen and (max-width: 480px) {
.site-nav li{
width: ??%; /* 절반! */
}
}
기준을 1300px로 하자
이제까지 작을때는 max-width를 사용했고
화면이 클때는 min-width(1300px) => 즉 1300보다 클때!!!
컨테이너 css 아래에 작성
큰화면에서는 폰트사이즈 17px , 컨테이너의 최대 가로 1200px
@media screen and (min-width: 1300px){
body{
font-size: 17px;
}
.container{
max-width: 1200px;
}
}