안녕하세요.
"이제 실전이다, HTML5&CSS3 사이트 제작의 모든 것" 책의 내용중에서 5장에 미디어쿼리를 적용하는 부분에서 문의할 부분이 있어서 질문드립니다.
378페이지에 보면 미디어쿼리를 적용한 사이트 주소가 나와 있는데요.
여기에 소스를 확인해보면
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/basic-jquery-slider.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/main.css" rel="stylesheet" type="text/css" media="only screen and (min-width:1100px) and (max-width:1600px)">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:1000px)">
<link href="css/smartphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:200px) and (max-width:480px)">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width:768px) and (max-device-width:1000px)">
<link href="css/smartphone.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) ">
위와 같이 적용을 하고 있는데요.
이 소스에서는 기본적으로 데스크탑이던, 타블릿이나 모바일에 상관없이 main.css의 스타일시트를 적용한 다음에 데스크탑이면 다시 main.css, 타블릿이면 tablet.css, 모바일이면 smartphone.css 스타일시트를 지정하고 있습니다. 이렇게 되면 모든 기기에 대해서 main.css스타일을 입힌 다음에 다시 해당 기기에 대한 스타일을 다시 입히게 되는데요. 일반적으로 생각하기에도 스타일시트를 읽어들이는 속도나 용량면에서도 비효율적인 방법이라고 생각이 됩니다.
이렇게 구성하신 이유가 있으신지 알고 싶고요. 제가 보기에는 바로 해당 기기에 대한 스타일시트만 입히는 방식으로 하는것이 더 좋은 방법이 아닌가 해서 문의드립니다.
"이제 실전이다, HTML5&CSS3 사이트 제작의 모든 것" 책의 내용중에서 5장에 미디어쿼리를 적용하는 부분에서 문의할 부분이 있어서 질문드립니다.
378페이지에 보면 미디어쿼리를 적용한 사이트 주소가 나와 있는데요.
여기에 소스를 확인해보면
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/basic-jquery-slider.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/main.css" rel="stylesheet" type="text/css" media="only screen and (min-width:1100px) and (max-width:1600px)">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:1000px)">
<link href="css/smartphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:200px) and (max-width:480px)">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width:768px) and (max-device-width:1000px)">
<link href="css/smartphone.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) ">
위와 같이 적용을 하고 있는데요.
이 소스에서는 기본적으로 데스크탑이던, 타블릿이나 모바일에 상관없이 main.css의 스타일시트를 적용한 다음에 데스크탑이면 다시 main.css, 타블릿이면 tablet.css, 모바일이면 smartphone.css 스타일시트를 지정하고 있습니다. 이렇게 되면 모든 기기에 대해서 main.css스타일을 입힌 다음에 다시 해당 기기에 대한 스타일을 다시 입히게 되는데요. 일반적으로 생각하기에도 스타일시트를 읽어들이는 속도나 용량면에서도 비효율적인 방법이라고 생각이 됩니다.
이렇게 구성하신 이유가 있으신지 알고 싶고요. 제가 보기에는 바로 해당 기기에 대한 스타일시트만 입히는 방식으로 하는것이 더 좋은 방법이 아닌가 해서 문의드립니다.
최대한 main.css파일 즉 원본 파일의 속성을 유지한 상태에서 각 스마트 기기마다 속성을 조금씩 변경하는 것입니다.
만약에 말씀 하신대로 각 스마트 기기 마다 속성을 지정할 경우 하나의 속성이 변경될 경우, 해당 css파일을 전부 변경해야 합니다.
그렇게 되면 스마트폰 따로, PC 브라우저 따로, 타블릿용 따로 수정해야 하겠지요.
하지만 main.css파일이 몸통인 경우 main.css파일 하나만 수정하게 되면, 모든 기기들의 속성이 변경됩니다.
실전에서 미디어 쿼리를 이용한 사이트를 수정을 해 보시면 왜 이렇게 구성을 했는지 쉽게 이해 되실 겁니다.
그리고 스타일 시트는 기기에서 한번 읽힌 후에는 속성이 변경되지 않는 이상 캐시 데이터에 저장됩니다. 그렇기 때문에, 한번 읽힌 CSS 파일이 속도나 용량 때문에 문제 되진 않습니다.
답변 되셨는지요?