1) 학습한 내용
반응형 적응형 웹사이트를 만들때 사용하는 미디어쿼리.
모바일 태블릿 환경에 맞게 자연스런 변화를 줄때 사용되는 CSS코드
미디어쿼리
모바일 버전 : 320px~768px 미만
태블릿버전 : 768px~1024px 미만
PC버전 : 1024px ~
미디어쿼리 주의점
1. PC버전 CSS를 모바일버전에선 다르게 적용
PC버전 CSS코드 즉 미디어쿼리 바깥쪽에서 작성된 CSS코드를 매번 확인하면서 변경해야한다 안 그러면 미디어쿼리 바깥에 있는 백그라운드컬러가 그대로 미디어쿼리 안 쪽에 상속된다. (이것이 번거롭다면 PC, 모바일 CSS파일을 따로 만든다.)
- 반드시 넣어줘야 하는 메타태그코드
viewport / width-deivce-width,
viewport : 웹사이트를 접속하는데 이용되는 기기 화면
width-deivce-width : 웹사이트 위드값을 디바이스의 위드값으로 적용
initial-scale=1.0 : 비율은 항상 1.0 유지
orientation: portrait : 스마트폰 사용시 세로모드
orientation: landscape : 스마트폰 사용시 가로모드
display: none;을 사용해서 원하는 정보를 원하는 기기에 보여줄 수 있다.
미디어쿼리 코드 적용방법 3가지.
1. @media (min-width: 320px) and (max-width: 539px) (실무에서 가장 많이 사용)
2. 모바일 버전용 파일 따로 만들기 (mobile.css)
<.!DOCTYPE html>
<.html>
<.head>
<.meta charset="utf-8">
<.link rel="stylesheet" type="text/css" href="css/style.css">
<.link rel="stylesheet" type="text/css" href="css/mobile.css">
<./head>
<.body>
<./body>
<./html>
3. style 태그 사용
<.style media="(min-width: 300px) and (max-width: 700px)">
body {
background-color: red;
}
<,/style>
2) 학습내용 중 어려웠던 점
별게 다 어렵고 어렵네요 집가고싶어요
3) 해결 방법
복습을 해도 모르겠으면 역시 실전 아니겠어요?
4) 학습소감
분량이 적어보인다는 것은 제가 몸이 아파서 잘 못 적었기 때문이죠.
