웹 프로그래밍 #10
💻 학습내용
💛미디어 쿼리
- 반응형 적응형 웹사이트를 만들 때 사용
- 모바일, 태블릿 환경에 맞게 자연스러운 변화를 줄 때 사용되는 css코드
적응형 : 뚝뚝 끊겨감 고정값 픽셀을 가지고 만드는거
반응형: %를 활용해서 만들어감 , 자연스러운 resize
-> 하나의 html코드를 가지고 css만 나눠서 사용
- 반응형 적응형 웹사이트를 만들 때 사용
- 모바일, 태블릿 환경에 맞게 자연스러운 변화를 줄 때 사용되는 css코드
적응형 : 뚝뚝 끊겨감 고정값 픽셀을 가지고 만드는거
반응형: %를 활용해서 만들어감 , 자연스러운 resize
-> 하나의 html코드를 가지고 css만 나눠서 사용
➕ width 크기
320px ~ 768px 미만 : 스마트폰
768px-1024px 미만 : 태블릿
1024px 이상 : Pc
@media (min-width: 300px) and (max-width: 767px) {
.pc{
color: blue;
font-size: 20px;
background-color: yellow;
}
}
▶︎ 우리가 지정한 범위가 되면 변경된 사항을 실행시킨다
💛 미디어 쿼리 주의점
- pc버전의 css를 모바일 버전에서 다르게 적용해야 되면 미디어 쿼리 바깥쪽에서 작성된 코드를 매번 확인해주면서 변경을 해줘야함
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport : 기기의 화면 웹사이트의 width값은 기기의 width크기로 지정, 비율은 1.0으로 한다
➕ 주의해야할 점
-
스마트폰 사용시 가로모드 세로모드가 들어가 있는데 Portrait는 사용자가 세로로 들었을 때 화면 자체
landscape는 가로로 들었을 때 화면 크기 -
크롬의 개발자 도구 에서 미리 확인해볼 수 있다.
-
브라우저를 늘렸다 줄였다 하면서 미디어 쿼리 코드를 확인해 주어야한다.
💛실무팁
- pc버전, mobile버전의 코드들은 다른 상황에서는 보여지면 안된다.
이럴 때 사용 할 수 있는게 display@media (min-width: 320px) and (max-width: 767px){ .pc{ display: none; } .mobile{ display: block; } }
- display: none; ▶︎ 안보이게 하는거
- 최초 제작을 할 때는 모바일 버전에 맞춰서 제작하는게 좀 더 쉽다.
왜냐하면 모바일은 중앙 정렬이 대부분이고 간결하기 때문에, 모바일로 먼저 제작한 다음에 태블릿, pc 버전으로 확장 해나가는게 일반적이다.h1{ font-size: 20px; background-color: yellow; } /*max-width 1024px 미만*/ @media (min-width: 768px){ h1{ font-size: 40px; background-color: pink; } } @media (min-width: 1024px) { h1{ font-size: 80px; background-color: gray; } }
➡️ @medai 밖에 모바일 버전 css 태그를 입력하고 ,첫 번째 media 에 태블릿 그 다음 pc버전을 입력하는 순서
📝 마무리
오늘은 미디어 쿼리를 활용하여 브라우저의 크기를 키우거나 줄이는 것에 따라 브라우저의 레이아웃들을 변형 시키는 방법에 대해 배웠습니다.
각 기기마다 설정된 width값이 있다는 사실도 알았습니다. 크롬 웹을 이용하면 내가 만든 사이트를 모바일, 태블릿 등 값을 수정하여 미리보기로 확인할 수 있습니다.
어려운 부분은 없었고 오늘도 많이 배웠습니다.
Author And Source
이 문제에 관하여(웹 프로그래밍 #10), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heo_jeongmin/웹-프로그래밍-10저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)