it 수업 4주차 (49) MEDIAQUERY 반응형

폴더를 만들어 html 파일과 css파일을 구별하여 연결시켜 줬다.

 

 

 

(1) MQ1.html

 

● Media Query Device Options

    all : 모든 미디어 유형에 적용

    print : 인쇄를 위한 미디어 타입

    screen : 화면 기반의 미디어 타입(주로 컴퓨터, 태블릿...)

    speech : 음성 출력 장치를 위한 미디어 타입

 

 

 

<실행화면>

제일 크게 했을 땐 박스 색깔이 오렌지색이 었다가

 

화면을 조금 줄이면 박스가 초록색으로 바뀌고

 

더 줄이면 파란색으로 바뀐다.

 

 

 

(2)MQ2.html

 

 

(3)LayOut.html

 

기존에 만들었던 Layout html파일에 반응형을 추가 해보았다.

 

 

 

<실행화면>

데스크탑 화면으론 이렇게 보이는 것이

화면을 줄이면 모바일 화면으로 변하게 된다.

 

 

 

(4) desktop.css

 

 

(5) mobile.css

 

 

(6) tablet.css