반응형 홈페이지

<반응형 홈페이지>
-pc, 태블릿, tv, 모바일.. 기기 사이즈에 맞춰 홈페이지 레이아웃이 반응하도록 제작
(css를 media쿼리에 맞게 설정)

▼기기에 맞춰 css설정
▷@media (화면의 크기에 해당하는 조건문){
css입력
}

>(min-width: --px) = (최소 넓이: --px)
 ㄴex)
@media (min-width: 801px){

}
= 넓이 801px '이상'일 때 적용

>(max-width: --px) = (최대 넓이: --px)
 ㄴex)
@media (max-width: 800px){

}
=넓이 800px '이하'일 때 적용

ㅇ ';' 입력 하지 않음
ㅇmin, max 크기가 겹치지 않게 설정


▼이미지, 비디오 비율 유지
▷img{object-fit:cover;}
-높이값을 주고 비율을 유지하고 싶을 때 사용
 ㄴex)
img{width:100%; height:364px; object-fit:cover;}


▼가로스크롤
▷전체 넓이에 '세로 스크롤' 넓이도 포함됨, 때문에 '세로 스크롤' 넓이를 뺀 공간에만 콘텐츠를 넣어야함
▷전체 넓이보다 콘텐츠가 클 경우 '가로 스크롤'이 생김
-'세로 스크롤' 넓이는 20px

 

▼글자 단위
▷ {font-size:--vw;}
(=view width)

▼높이 단위
▷ {--:--vh;}
(=view height)

 

▼가로 스크롤바 없애기
▷body, html{overflow-x:hidden}

▼단어별로 줄바꿈
▷body{word-break:keep-all;}

 

▼margin,padding 포함시키기
-부모에게 {box-sizing:border-box;}