자바스크립트 - 반응형 웹

자바스크립트 - 반응형 웹

Insert title here .box { width: 300px; height: 300px; margin: 30px auto; border: 3px dotted #333; padding: 10px; background: green; } /* 브라우저의 너비가 0~600 인 경우 */ @media (max-width:600px) { .box { display: none; } } 반응형 웹 미디어 쿼리 : 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는것

@media 옵션을 주면 페이지의 너비나 높이가 몇이상 이하 일때의 옵션을 줄 수 있다.

@media (max-width:600px) {

.box {

display: none;

}

}

최대 너비가 600보다 작아지게 되면 display를 none으로 하겠다는 뜻

그리고 meta 부분에 이걸 추가해야 반응형으로 만들 수 있다.

Insert title here * { padding: 0; margin: 0; box-sizing: border-box; } body { font-size: 14px; font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif; } .container{ width: 1200px; margin: 20px auto 10px; border: 3px solid black; } .header { width: 100%; background: #e4f7ba; padding: 20px; text-align: center; } .body-main:after{ content: ""; clear: both; display: block; } .article { float: left; width: 75%; height: 500px; background: #eee; padding: 15px; } .side { float: left; width: 25%; height: 500px; background: #faf4c0; } .footer { width: 100%; background: #9575cd; padding: 20px; text-align: center; } /* - max-width : 데스크탑의 가장 큰 화면 사이즈의 레이아웃을 기본으로 하고, 점차 축소하는 형태로 css 작성 */ /* 화면 너비 : 0~1200 */ @media (max-width:1200px) { .container { width: 95%; border: 3px solid red; } } /* 화면 너비 : 0~768 */ @media (max-width:768px) { .container { width: 100%; border: 3px solid green; } } /* 화면 너비 : 0~480 */ @media (max-width:480px) { .container { width: 100%; border: 3px solid blue; } .header { height: 300px; } .article { float: none; width: 100%; height: 300px; } .side { float: none; width: 100%; height: 300px; } } /* 화면 너비 : 0~320 */ @media (max-width:320px) { .container { width: 100%; border: 3px solid gray; } } 헤더입니다. 메인입니다. 사이드 입니다. 푸터입니다.

전부 max-height 옵션을 줘서 각각의 최대치의 너비보다 작아졌을때의 옵션을 준 모습

Insert title here * { padding: 0; margin: 0; box-sizing: border-box; } body { font-size: 14px; font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif; } .container{ width: 1200px; margin: 20px auto 10px; border: 3px solid black; } .header { width: 100%; background: #e4f7ba; padding: 20px; text-align: center; } .body-main:after{ content: ""; clear: both; display: block; } .article { float: left; width: 75%; height: 500px; background: #eee; padding: 15px; } .side { float: left; width: 25%; height: 500px; background: #faf4c0; } .footer { width: 100%; background: #9575cd; padding: 20px; text-align: center; } /* - min-width : 스마트폰 등 가장 작은 시이즈에서의 레이아웃을 기본으로 하고, 점차 확대되어가는 형태의 css */ /* 화면 너비 : 320 px 이상 */ @media (min-width:320px) { .container { width: 100%; border: 3px solid gray; } .header { height: 300px; } .article { float: none; width: 100%; height: 300px; } .side { float: none; width: 100%; height: 300px; } } /* 화면 너비 : 480 px 이상 */ @media (min-width:480px) { .container { width: 100%; border: 3px solid blue; } .header { height: 100%; } .article { float: left; width: 75%; height: 500px; } .side { float: left; width: 25%; height: 500px; } } /* 화면 너비 : 768 px 이상 */ @media (min-width:768px) { .container { width: 100%; border: 3px solid green; } } /* 화면 너비 : 1024 px 이상 */ @media (min-width:1024px) { .container { width: 100%; border: 3px solid red; } } 헤더입니다. 메인입니다. 사이드 입니다. 푸터입니다.

max-height와는 반대의 개념인 min-height가 있다.

최소 너비가 ~~ 이상일때 의 의미이다.

Insert title here 반응형 웹 홈 스터디 공지사항 메인 화면 사이드 footer 영역

그리고 만약에 이렇게 css파일을 이용해서 했을경우

2개의 css파일이 겹칠 수 있으니까

하나의 css파일에 옵션으로 media를 줘서 너비의 옵션이 몇일때의 옵션을 주면

css파일 2개를 받고도 2개다 적용이 가능하다.

from http://heidong.tistory.com/126 by ccl(A) rewrite - 2021-10-07 22:27:05