✔ TODAY
오늘은 미디어쿼리의 개념과 간단한 이용방법, 제작시 좋은 팀 등을 학습하였다.
✔ 학습한 내용
미디어쿼리
모바일 테블럭 자연스러운 변화를 줄때 사용하는 css 코드
- 적응형- 브러우저 폭을 줄이면 끝어가면서 구조가 바뀌는 것.
뚝뚝 긇어가며 사이즈변경.
고정값을 가진 픽셀단위 가지고 제작 - 반응형- 브라우저 폭을 줄이면, 공간이 자체가 리사이즈되면서 모바일구조로 변화
%단위 사용.
요즘은 픽셀단위와 %단위를 썪어서 사용.
하나의 html파일에 css코드를 모바일버전 pc버전으로 나누어서 작성하는 경우가 많음.
html자체를 모바일따로 pc따로 만드는 경우는 레이드아웃이 180도다른경우.(모바일 앞에m을 붙임)
반응형 만들기
기준을 만들어줘야 한다.
사용자가 모바일인지 타블렛인지 구분하기 좋은 기준은 위드값(넓이)이다.
대체로
320이상 ~ 768미만 : 스마트폰
768이상 ~ 1024 미만 : 테블렛
1024이상 ~ : pc 로 나누어 작업한다.
미디어 쿼리는 width값의 크기를 기준으로 분기점 작업을 사용
미디어쿼리 안의 설정값으로 움직임.
또 다른 설정으로 미디어쿼리를 작동하고 싶을때 밑에 또 만들면됨
@media (min-width: 600px) and (max-width: 767px) {
.pc {color: blue; font-size: 20px;
background-color: yellow;}}
@media (min-width: 100px) and (max-width : 599px){
.pc{color: pink; font-size: 10px;
background-color: gray;}}미디어 쿼리안에 min-width와 max-width를 설정을 하는 것으로 pc와 테블럿 맞춤형 css를 작업할 수 가 있음.
💥주의점
미디어쿼리 밖을 코드를 확인하면서 미디어 쿼리안 코드를 수정하기
밖을 코드를 안의 코드가 상속하기 때문.(안의 별도의 코드가 없는 한)
귀찮으면 모바일요 테블릿용 따로 css파일은 만드는 방법도 있음.
- 미디어쿼리를 사용한다면 반드시 넣어야 하는 메타테그
<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport: 웹사이트를 접하는데 이용되는 기기화면
width=device-width:웹사이트의 위드값은 접속 디바이스의 위드값으로 접속.
initial-scale=1.0: 비율은 항상 1.0을 유지.
위의 meta테그의 기능은
- 자연스러운 스케일업
옛날사이트를 스마트폰으로 접근하면 확대하면서 봐야함.
모든 디바이스의 위드값을 알고 싶을때
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
위의 링크를 참조하면됨.
orientation
- 스마트 폰을 사용할때 가로모드와 세로모드 들어가 있는데
portrait 세로/landscape가로
보통은 세로모드가 많음 아니면 오리테이션 말고새로운 기준점을 더 추가해서 세로.가로를 대체함.
각 디바이스별 화면을 확인하는 방법
1) 모바일버전을 확인하고 싶을때 서버에 올려서 도매인주소쳐서 확인히는 게 정확도가 좋음
단점은 개인과 회사가 가진 디바이스와 버전이 다양함.(비용부담이 크고 확률이 희박함)
2) 구글 검사 > 에리멘터 다바이스별 화면을 확인.
💖tip
미디어 쿼리 확인하는 법
미디어 쿼리설정에 적용이 됬을때 css코드를 확인 할 수 가 있다.
화면에 모바일버전과 pc버전별 별개의 정보를 출력해야되는 경우
모바일에 맞게 텍스트 정보제공, 그리고 pc에 맞게 턱스트 정보를 제공해야되는 경우가 있음.
즉, pc로 접속시 모바일 텍스트정보를 노출를 시켜서는 안되는 경우를 말한다.
'display :none'를 전달하면 피시 화면에서 사라질 수 가 있는 속성을 이용한다.
(내가 원하는 정보는 내가 원하는 기기에 맞춰서 보여줄 수 가 있다.)
'display :none'을 이용한 미디어쿼리 예제
.pc{color: red;
font-size: 50px;
background-color: pink;}
.mobile{display: none;}
@media (min-width: 320px) and (max-width: 767px){
.pc{display: none;}
.mobile{
display: block;
inline도 가능
none이외의 속성를 넣으면, none이외으 값이 출력되게 됨.
}
}똑같은 속성값을 이용하는 것이 좋기떄문에 여기에서는 block값을 설정하는 것이 좋다.
하지만, 위의 케이스가 좋은 것은 아니다.
하나의 html에 비슷한 의미를 두고 있는 글자정보가 2개가 있다는건 유쾌한 것은 아니기 때문.
양쪽 모두 고려해서 콘테츠 작성하는 것이 좋다.
미디어퀘어 응용사용 케이스
모바일>테블릿>pc순으로 제작하는 것이 쉬움.
(간단한것에서 복잡한 것으로 제작하는 것이 쉬운 거랑 같은 원리)
- html하나로 모바일/pc 버전를 css으로 처리함.
- 최초제작을 할때는 모바일을 맞춰서 하는 것이 좋음. 그리고 나서, 타블렛 피시로 확장해서 나가는 것이 일반적.
모바일> 타들릿. 피시 자작할때 미디어쿼리 작성기법
미디어쿼리 기준점을 잘 사용을 하면선 피시버전을 잘 만들수가 있다.
h1{
font-size: 20px;
background-color: yellow;
}
@media (min-width: 768px) {
h1{
font-size: 40px;
background-color: pink;
}
}미디어쿼리안이 pc, 밖이 모바일버전이 됨.
위의 코드에서 추가해서 더 큰 수치를 넣은 경우.
멕스위드는 작성하지 않았지만, 자연스럽게 멕스 1024미만이 됨.
h1{font-size: 20px;background-color: yellow;}
@media (min-width: 768px) {
h1{font-size: 40px;
background-color: pink;}
}
@media (min-width: 1024px) {
h1{font-size: 80px;
background-color: gray;}
}밑에서 부터 pc >테블릿> 미디어 쿼리 순이며,
밖은 모바일버전으로 css코드 작성을 할 수 있다.
장점은 코드분량이 많이 줄어들게 됨.
✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들
-
내용자체에서 어려운 것은 없었다. 하지만 마지막 응용부분이였던 , 모바일>테블렛>pc순의 미디어쿼리의 순서는 조금 복잡한 것 같다.
✔ 해결방법작성
- 복습과 실습! 그것만 답이다!!!
✔ 학습 소감
오늘은 내용자체도 어렵지도 않았고, 컨디션도 괜찮아서 수월하게 학습을 마무리 지을 수 있었다.
학습중 display부분이 어김없이 나와서, 다시 한 번 해당부분의 중요성을 알게 되었고, 그리고 모든 공부한 내용들은 이어져 있다는 것도 실감하였다.
추가로 ... 주변에 친하게 지내는 디자이너 지인들이 있으니 '필드에 나가면 ! 난 협동과 중재를 잘 할 것이다!'라는 믿음이 있었는 데... 오늘 학습내용으로 그게 왜 힘든 것인지 살짝(...) 알 수 있었다...
