렝무식
🤍 반응형 웹 맛보기 🍽️ 본문
인터넷과 브라우저라는 개념이 세상에 나온 것은 그리 먼 과거가 아닙니다.
그리고 더더욱이 스마트폰과 태블릿이 나온 건 거의 최근이라고 봐도 무방하죠.. ㅎㅎ 핸드폰이 없던 시절을 살던 사람과, 스마트폰이 없는게 이상한 세대의 아이들이 한 집에 살고있으니까요
잠깐 딴 소리 한 번 하자면, 요즘 가정에서는 부모님의 핸드폰 뒷자리가 다른 경우가 많다구합니다.. 저만해도 가족들 뒷자리가 모두 동일한데 말이죠!!
그 이유는 저희 부모님 세대는 핸드폰이 없던 세대라서 모두 결혼 하신 후에 핸드폰을 개통했기 때문에 뒷자리가 같은 반면에, 요즘 결혼하신 분들은 모두 본인 가정에서 핸드폰을 개통하고 나서 만나신 분들이라 부모님의 핸드폰 번호 뒷자리가 다르다는 거예요 ㅋㅋ ㅠㅠ
저는 가족이면 당연히 뒷자리가 다 같은거아니야??? 라는 생각이 그냥 디폴트로 박혀있어서 저런 생각은 아예 해보지도 않았는데.. 생각해보니 저도 결혼하면 동거인과 핸드폰 뒷자리가 다르겠네요 낄낄..
아무튼 간에 다시 돌아와서..
원래는 인터넷 브라우저를 보는 환경이 pc화면 딱 하나였지만, 스마트폰이 개발되면서 작은 화면으로 웹 브라우저를 볼 일이 생겨버렸습니다 😳
이렇듯 반응형 웹은 스마트폰 보급에 따라 생겨난 개념인데요
pc화면 뿐만 아니라 해상도가 작은 핸드폰 화면에서도 웹페이지를 보기 편하게 만들고자 생겨난 개념입니다.
따라서 ..
👉반응형 웹이란!
달라지는 해상도에 맞춰 브라우저 안의 요소들의 크기가 유동적으로 변하는 웹페이지를 말합니다.
스마트폰의 경우 가로 해상도가 320px 부터 시작해서 400px 후반대까지 갑니다.
그에 비해 PC 모니터 해상도의 경우 최소 1024px 이상입니다.
태블릿은 스마트폰과 PC 사이 그 어느 지점... 에 있으나, 태블릿의 경우 다른 것들에 비해서는 케바케인 편입니다. 디바이스마다 크기가 상이하기 때문에 딱히 정해진 규격이 있다기엔 애매합니다.
이렇게 장치마다 해상도가 다르니, 뭐 하나 기준으로 만들었을 때 아무래도 다른 한 쪽이 보기 불편해지는 건 어쩔수 없겠죠
그렇기 때문에 현재 사용자가 보고 있는 브라우저의 너비에 따라 레이아웃이 다르게 변하는 반응형 웹이 필수가 되어버렸습니다.
반응형 웹이 나오기 이전에는, 작은 스마트폰에서 pc의 웹을 보면 당연하게도 한 눈에 들어오지 않았는데요
스마트폰의 최소 해상도는 320px인데, pc는 1000px이 넘어갔기 때문에 그만큼 잘려서 나온 것이지요 ..!
그래서 스마트폰에는 브라우저 자동 축소 기능이 기본 값으로 적용되어있습니다.
그렇다면 반응형 웹은 어떻게 만들어야 하는가?
반응형 웹을 만들기 위한 초기 세팅 법을 알아보겠습니다!
✅ 장치 폭 초기 값 설정
<meta name="viewport" content="width=device-width, initial-scale=1">갑작스런 코드 한 줄 등장
tilte 태그 아래에 작성하면 되는 이 메타구문은 반응형 웹을 만들 때에만 필요합니다.
일반형 홈페이지 제작 시에는 반드시 지워야합니다!
왜냐하면, 해당 구문은 브라우저 자동 축소 기능을 해제하는 명령어이기 때문입니다.
따라서 이 구문을 쓰지 않으면 스마트폰에서 pc화면이 축소된 모습 그대로 나오게 됩니다.
우린 반응형 웹을 만들 건데, 기본적으로 제공되는 축소기능은 필요가 없겠죠!
- viewport : 모바일 브라우저에서 자동으로 축소되는 기능을 중단
- width=device-width : 홈페이지를 디바이스의 가로 크기에 맞춰 표시
- initial-scale=1 : 홈페이지를 로드할 때 홈페이지 실사이즈를 화면에 맞춰서 로드
✅ 미디어 쿼리 구문
@media screen and (max-width: 1200px) {} /* 화면 너비가 1200px 이하가 되면 실행 */
괄호 안의 조건이 될 때, 요소를 어떻게 처리할 것인지 설정하는 명령어입니다. 중괄호 안에 처리할 css명령어를 적어주면 됩니다.
미디어 쿼리는 css 문서 안에 작성하면 되며, 이를 통해 브라우저 너비에 따라 요소들의 크기를 변경시킬 수 있는 것입니다!
미디어 쿼리의 특징은 아래와 같습니다.
- 수치가 있는 속성에 대해서 transition이 적용됨
- 미디어 쿼리는 pc화면의 css 아래에 쓰는 것을 권장함
- screen, all, print, speech 4가지 미디어 타입이 있으나, 보통 all을 많이 사용
- 수치가 큰 것 부터 내림차순으로 작성해야 함
내림차순으로 작성하라는 말이 무슨 말일까요?
예시를 한 번 들어볼게요.
@media screen and (max-width: 600px) {}
@media screen and (max-width: 1200px) {}600px 해상도에서 변하는 미디어쿼리, 1200px 해상도에서 변하는 미디어 쿼리를 다음과 같은 순서로 작성했다고 가정합니다.
그런데 css는 먼저 쓴 것을 덮고, 나중에 슨 속성을 우선적으로 적용한다는 특징이 있죠
만약 600px 이하다! 라는 조건에서 걸려 해당 구문을 실행했는데, 아래로 가니까 어라? 1200px 이하다! 라는 조건이 또 있으면 css는 600px 이하의 해상도에서 걸렸던 구문을 무시하고 1200px이 조건인 구문을 적용하게 됩니다.
1200px 이하라는 수치는 600px 이하의 수치도 포함하기 때문입니다.
이렇게만 봐서는 미디어쿼리가 뭔지 잘 와닿지 않을 수 있으니 예시를 한 번 들어볼게요.
div{width: 100px; height: 100px; background: red;}
@media screen and (max-width: 1200px) {
div{background: gold;}
}
이런 미디어 쿼리가 있다고 칩시다.
화면 너비가 1200px 이하가 된다면, div 색을 변경하겠다는 의미인데요.
바로 결과화면을 확인해볼게요
너비 1200px 을 기준으로 div 색이 변하는 것을 확인할 수 있죠!
✅ 반응형 웹 디자인 시 css 권장 순서
반응형 웹을 만들게되면, pc화면과 태블릿화면, 모바일 화면의 css를 다 따로따로 작성해야 합니다. (난도가 높고 손이 많이가는 이유가 있죠 역시 ...)
반응형 웹의 css는 html 순서로 작성하되, pc → 태블릿 → 모바일 순으로 작성합니다.
그런데 주의할 점이 하나 있는데요
예를 들어 헤더와 메인 섹션을 만든다고 가정해보겠습니다.
그렇다면 헤더 pc - 메인 pc - 헤더 태블릿 - 메인 태블릿 - 헤더 모바일 - 메인 모바일 이런 식으로 해야 한다고 생각할 수도 있겠습니다만 ... 이렇게 하면 안 됩니다 !!
이때는 반드시 헤더pc - 헤더태블릿 - 헤더모바일 // 메인pc - 메인태블릿 - 메인모바일 // ... 이런 식으로 작성해야 합니다.
이렇게 관련있는 것들 끼리 거리를 가깝게 두어야 유지 보수하기 편하고 오류 찾기가 편리해지기 때문입니다.
반응형 웹에 대한 기본적인 것들을 살짝 맛보는 포스팅이었습니다!
더 자세한 내용은 예제와 함께 추후에 업로드 할 예정입니다 🥰
원래는 이전에 공부한 예제들을 먼저 정리하고 올릴 예정이었는데..
반응형 웹은 중요한 만큼 배운지 얼마 안됐을 때 복습해야 한다고 생각했기 때문에 우선적으로 포스팅 했습니다.
역시 시작부터 쉽지 않은 것 같습니다 🥹
모두들 파이팅입니다!!