css-반응형 웹

권기찬·2022년 5월 23일

📆 2022-5-23

-학습내용-

🍕반응형 웹?

A: 반응형 웹 디자인은 다양한 디바이스, 창, 화면 크기에서 원활하게 렌더링되는 웹 페이지를 제작하는 것. 웹 사이트를 반응형으로 설계하면, 어떤 디바이스에서 어떤 방식으로 접속하든지 웹 사이트의 일관성을 유지할 수 있다.

-좋은 반응형 웹 디자인?

데스크탑과 모바일이 화면 크기만 다른 것이 아니라 둘을 이용하는 소비자의 태도도 다르다는 점을 인식하고 이를 반영한 디자인.

반응형 웹 제작을 위해 미디어쿼리 사용 (view포트나 다른 방법도 있음)

🍔미디어 쿼리

기본적인 미디어 쿼리 문법

@media screen and (max-width: 768px) { 
body { background-color: lightgreen; 
	} 
}

미디어쿼리 중단점

미디어쿼리 중단점: 모바일/ 태블릿/ 데스크탑

모바일기기 레이아웃을 기본으로 CSS 만들고 이 후 데스크탑 쪽으로 맞추는 방식: 모바일 퍼스트
-> 모바일 기기 제약을 고려해 처리속도, 화면크기 최적화를 먼저 진행

320px ~ 768px미만: 모바일기기
768px ~ 1024px미만: 태블릿
1024px~ : PC

input

@media (max-width:99px){
    .pc { display:none;}
    .mobile{display:block;}
}
@media (min-width:600px) and (max-width:767px){
    .pc{
        color: blue;
        font-size:20px;
        background-color: green;
    }
}

@media (min-width:100px) and (max-width:599px){
    .pc{
        color: white;
        font-size:10px;
        /* background-color: green; */
    }
}

/*  landscape : 단말기 가로 방향 
    portrait: 단말기 세로 방향 */
@media screen and (orientation:landscape){
    body{
        background-color: orange;
    }
}
@media screen and (orientation:portrait){
    body{
        background-color: crimson;
    }
}