반응형 웹 Css 소스 | 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: Html, Css, Javascript 빠른 답변

by

당신은 주제를 찾고 있습니까 “반응형 웹 css 소스 – 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript“? 다음 카테고리의 웹사이트 ppa.charoenmotorcycles.com 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.charoenmotorcycles.com/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 드림코딩 이(가) 작성한 기사에는 조회수 206,758회 및 좋아요 4,642개 개의 좋아요가 있습니다.

Table of Contents

반응형 웹 css 소스 주제에 대한 동영상 보기

여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!

d여기에서 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript – 반응형 웹 css 소스 주제에 대한 세부정보를 참조하세요

HTML, CSS를 이용해서 (Javascript 약간) 반응형 헤더를 함께 만들어 볼꺼예요 🤗
(↙ 자세한 내용)
___________________________
💡 풀스택 개발 로드맵 ⇢ https://academy.dream-coding.com/pages/912e50
🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
http://academy.dream-coding.com/
……………………………………………..
☀️ 드림코딩 엘리
모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 🙂
❝Don’t forget to code your dream
여러분들의 멋진 꿈을 코딩하세요 ⭐️
……………………………………………..
☀️ 연락
채널 문의 ⇢ [email protected]
아카데미 문의 ⇢ [email protected]
……………………………………………..

See also  요즘 대표 기도문 | 대표기도가 어려운 분들을 위한 8월 대표기도[주일 대표기도문/예배기도] 29157 명이 이 답변을 좋아했습니다

🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y
📒 자바스크립트 기초 강의 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2
💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
https://www.youtube.com/playlist?list=PLv2d7VI9OotSn1ThdDeqvBx8QuRSd01qv
💰 개발자 경력 관리 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotSyQ6RPdytiHID5Cmnv_sA3
📄 이력서 작성 방법
https://www.youtube.com/playlist?list=PLv2d7VI9OotTZfvF0s8Vs0gpRtodlTsgg
📈 IT 트렌드
https://www.youtube.com/playlist?list=PLv2d7VI9OotRTfM1zJLQMCLriBpLFg8r-
📷 개발자 브이로그
https://www.youtube.com/playlist?list=PLv2d7VI9OotR1tALnxov7sAUshyBmfYfU
🤗 생산력 향상 팁
https://www.youtube.com/playlist?list=PLv2d7VI9OotQB-9p29xrAnARhuE1Vf88I
……………………………………………..
🎵Music
Title: Special Days by JayJen
Genre and Mood: Dance \u0026 Electronic + Bright
License: Royalty-free music for YouTube, Facebook and Instagram videos giving the appropriate credit.
#반응형웹#프론트엔드#웹개발

반응형 웹 css 소스 주제에 대한 자세한 내용은 여기를 참조하세요.

[HTML / CSS] 반응형 구현해보기

반응형 웹 디자인이란? 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 …

+ 여기에 보기

Source: stickode.tistory.com

Date Published: 1/3/2022

View: 6453

CSS : 반응형 웹(Responsive Web) – nextree

오직 하나의 HTML소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공합니다. 반응형 웹에 있어서 빼놓을 수 없는 개념이 모바일 퍼스트입니다.

+ 자세한 내용은 여기를 클릭하십시오

Source: www.nextree.co.kr

Date Published: 2/3/2021

View: 7313

[CSS] 7. 반응형 웹페이지 만들기(미디어쿼리 @media)

블록체인교육/웹프로그래밍. [CSS] 7. 반응형 웹페이지 만들기(미디어쿼리 @media). by Danny_Kim 2020. 10. 7. CSS 강의목차. 1. CSS 시작, 글 색깔 바꿔보기.

+ 여기에 자세히 보기

Source: kimsfamily.kr

Date Published: 7/21/2022

View: 9172

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 …

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 미디어쿼리를 이용한 반응형 웹사이트 만들기 연습해 보고 있어요.

+ 더 읽기

Source: aboooks.tistory.com

Date Published: 5/19/2021

View: 5514

CSS / 반응형 레이아웃 만들기 – CODING FACTORY

반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 …

+ 여기에 보기

Source: www.codingfactory.net

Date Published: 7/13/2021

View: 6719

반응형 웹페이지 기본 틀 만들기(그리드, 미디어쿼리 활용)

오늘은 반응형 웹페이지의 기본 틀을 만들어보겠습니다. … 지구별 안내서, “CSS로 반응형 웹사이트 (소스) 만들기: 사이드바가 본문 아래로 …

+ 여기에 자세히 보기

Source: bskyvision.com

Date Published: 11/15/2021

View: 9062

반응형 웹 디자인(Responsive Web Design) – 욱신 블로그

그리고 더 큰 화면에서 페이지를 보게 되면 긴 문장의 경우 읽기 불편할 정도의 긴 길이가 되어버립니다. 소스코드 : https://github.com/mdn/css- …

+ 여기를 클릭

Source: wookshin.github.io

Date Published: 10/23/2021

View: 8303

[CSS] 반응형 웹과 미디어 쿼리

1. 반응형 웹 · 1) 반응형 웹 디자인. 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다. · 2) 뷰포트 : 모바일 기기를 위한 반응 …

See also  Jet Lag 뜻 | 시차로 인한 뇌에 무슨 일이 일어나는가 | Wsj 답을 믿으세요

+ 여기에 더 보기

Source: intrepidgeeks.com

Date Published: 7/9/2022

View: 4490

반응형 웹 뚝딱 만들기 (1) – 뷰포트 메타태그와 미디어 쿼리

다음 글에서는 CSS 속성을 활용해 빠르게 반응형을 만드는 법을 다룰 생각입니다. (투비 컨티뉴!) 1. meta 태그 – viewport. VS CODE 등에서 자동 html을 …

+ 여기에 표시

Source: nykim.work

Date Published: 2/19/2022

View: 5369

반응형 웹을 위한 레이아웃 설계 방법

HTML 소스코드는 다음과 같습니다. 여기서 중점적으로 봐야 할 부분은 장치에 따라 CSS를 다르게 참조하도록 한 점입니다. 페이지를 …

+ 자세한 내용은 여기를 클릭하십시오

Source: blog.pages.kr

Date Published: 8/20/2022

View: 5348

주제와 관련된 이미지 반응형 웹 css 소스

주제와 관련된 더 많은 사진을 참조하십시오 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.

웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

주제에 대한 기사 평가 반응형 웹 css 소스

  • Author: 드림코딩
  • Views: 조회수 206,758회
  • Likes: 좋아요 4,642개
  • Date Published: 2020. 3. 3.
  • Video Url link: https://www.youtube.com/watch?v=X91jsJyZofw

CSS] 반응형 구현해보기

스틱코드라는 플러그인을 이용해 반응형 예제를 구현해봅시다.

스틱 코드에 등록된 코드를 간편하게 불러와서 사용해봅시다.

* 반응형 웹 예제

https://stickode.com/detail.html?no=2195

====================================================================

반응형 웹 디자인이란?

하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다.

반응형을 하면 무엇이 좋은가?

웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있습니다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있습니다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영됩니다.

– 위키백과

====================================================================

반응형 웹의 핵심 기술은 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)가 있습니다.

이중에서 오늘은 미디어쿼리를 이용하여 반응형을 구현하겠습니다!

미디어 쿼리란?

간단히 말해서 화면에 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS기능

@media (max-width:600px){ /*가로 너비가 600px 이하일 때 아래 스타일 적용*/ }

미디어 쿼리에 대해서 더 공부 하고 싶다면?

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

====================================================================

반응형 웹 예제

전체코드

호출태그 : 반응형(html)

stickcode_Reactive

반응형 웹 구현하기

1
2

3

호출태그 : 반응형(css)

h1 { text-align:center; } div { font-size: 30px; text-align: center; } #main { display: grid; grid-template-columns: 3fr 1fr; } #main .contents { background-color:#b4b8ff; } #main .sidebar { background-color: #ffbecb; } footer { font-size: 30px; text-align: center; background-color: #c2ebf9; } /*미디어 뭐리!!!!!!!!!!*/ @media (max-width:600px){ /*가로 너비가 600px 이하일 때 아래 스타일 적용*/ #main { display: block; } #main .sidebar { min-height: 0; } }

<결과물>

기본 브라우저의 크기를 줄였을 때

CSS : 반응형 웹(Responsive Web)

태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있습니다. 사용자들은 같은 웹 컨텐츠를 이용 하더라도 PC와 모바일 기기에서 동등한 서비스를 제공 받기를 원합니다. 이에따라 화면 크기의 제약사항과 단말기의 기능 속성에 따른 고려사항이 생겼지만 그렇다고 여러 종류의 웹(url)을 만들 수 없습니다. 그에 대한 대응 방안으로 반응형 웹이 뜨고있습니다.

반응형 웹(Responsive Web)

그렇다면 반응형 웹이란 무엇일까요? 쉽게 말해 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말합니다. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹이죠. 오직 하나의 HTML소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공합니다.

반응형 웹에 있어서 빼놓을 수 없는 개념이 모바일 퍼스트입니다. 모바일 퍼스트는 웹 디자인을 할때, PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법입니다. 이 개념은 앞서 말했 듯 태블릿 PC, 스마트 폰등 모바일 기기의 이용이 늘어나면서 일반 웹 사용자보다 모바일 웹 사용자가 더 많아지면서 생기게 됐습니다. 모바일 퍼스트의 핵심은 모바일의 제약을 집중의 기회로 본다는 것에 있습니다. 모바일의 제약은 크게 세가지로 나눌 수있습니다.

모바일 기기의 스크린 크기 네트워크 속도 및 품질 사용하는 모드

위 세가지 제약을 통해 일반 웹은 모바일 웹에 있어서 불필요한 요소(기능/형식/꾸미기/이동)들을 가지고 있다고 판단합니다. 불필요한 요소를 최소화 시킨 모바일 웹은 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 나타냅니다. 그리고 사용자들에게 사용하기 편하고 작업을 빠르게 처리할수 있는 웹을 제공 합니다. 그 중 가장 대표적인 것으로 일반 웹 메뉴를 한 버튼으로 축소 시켜놓고 첫 화면부터 컨텐츠를 보여주는 것입니다.

반응형 웹은 고 사양(고 해상도)웹이 저 사양(저 해상도) 모바일 기기에서도 불편함이 없이 구현이 되는데 초점이 맞춰져 있습니다. 주로 레이아웃과 스타일 변화에 초점을 맞추어서 진행이 됩니다. 하지만, 레이아웃과 스타일 보다는 웹 컨텐츠를 모바일 퍼스트 관점으로 재구성하는 반응형 웹도 있습니다. 이는 사용자가 사용하는 기능에 대해 연구하고 사용자가 필요로하는 기능을 중심으로 우선순위를 둬서 제공합니다. 반응형 웹의 최종형은 위 두가지를 섞어놓아 모든 기기에서 사용사자 원하는 컨텐츠를 보기좋게 제공하는 것 이라고 생각합니다.

미디어 쿼리(Media Query)

CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용 시키는게 가능했습니다. 하지만 미디어 타입만으로는 해당 기기의 특성을 정확히 판단하기가 어려워 많이 사용되지 않았습니다. CSS3은 위 미디어 타입을 개선하여, 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장하였는데 이를 미디어 쿼리라고 합니다.

미디어 쿼리를 적용하는 방법은 다음과 같습니다.

미디어 쿼리 적용법

1) 태그는 태그 안에 위치하여 media 속성 안 조건에 만족할 때 해당 CSS파일을 불러옵니다.

2)

3)

4) CSS파일

불러온 CSS파일 안 혹은

[예제1] 간단한 미디어 쿼리

위 예제는 간단한 미디어 쿼리에 대한 예제입니다. 웹에 접근한 기기가 screen일 때 가로 길이가 100px 미만(max-width:100px) 이면 배경을 파란색으로, 200 px이상 이면 초록색으로, 그 사잇 값이면 빨간색으로 지정됩니다. 이처럼 min-, max- 값으로 이상, 이하를 조절할 수 있으며 조건 문을 이용하여서 다양한 스타일을 줄 수 있습니다. 위에 나온 속성과 속성 값들을 적절히 이용하면 더 많은 기기에서 다양한 스타일을 느낄 수 있습니다.

/* 스마트폰 가로+세로 */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ } /* 스마트폰 가로 */ @media only screen and (min-width : 321px) { } /* 스마트폰 세로 */ @media only screen and (max-width : 320px) { } /* iPhone4와 같은 높은 크기 세로 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { } /* iPhone4와 같은 높은 해상도 가로 */ @media only screen and (min-width : 640px) { } /* iPad 가로+세로 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } /* iPad 가로 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { } /* iPad 세로 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { } /* 데스크탑 브라우저 가로 */ @media only screen and (min-width : 1224px) { } /* 큰 모니터 */ @media only screen and (min-width : 1824px) { }

Andy Clarke의 기기별 미디어 쿼리

위 코드는 Andy Clarke라는 사람이 작성한 기기별 미디어 쿼리입니다. 분류는 크게 데스크탑 브라우저, iPhone, iPad, 스마트 폰(저 해상도와 고 해상도)로 구분되어 있습니다. 참고해서 보시면 좋습니다.

유동형 그리드(Fluid Grid)

유동형 그리드를 설명 드리기 전에 간단하게 그리드에 대해서 설명 드리겠습니다. 그리드는 웹 화면의 폭을 몇개의 컬럼으로 나누는 것입니다. 상황에 따라서 몇개의 컬럼들을 묶어서 사용하며(이를 class라 합니다), 컬럼들의 폭과 다른 컬럼과의 간격도 일정하게 유지합니다. 대표적으로 960 Grid System이 있습니다.

960 Grid System -[출처](http://sixrevisions.com/web_design/the-960-grid-system-made-easy/)

위 그림은 960 Grid System중 12컬럼 그리드입니다. 화면을 12개의 컬럼으로 나누어 12가지의 클래스의 모양으로 다양한 레이아웃을 만듭니다. 위 그림처럼 고정 값을 가질 수도 있으며 다른 값을 가질 때에는 아래 그림처럼 컬럼의 갯수의 형태로 표현을 합니다. 960 Grid System의 자세한 사항은 위 출처를 통해 보시면 됩니다.

유동형 그리드는 그리드의 폭을 고정 값이 아닌 em 또는 %의 값으로 설정하는 것을 말합니다. 즉, 가로 폭길이의 변화에 따라서 컬럼의 크기가 상대적으로 변하게 하는 방법입니다.

[예제2] 유동형 그리드

위 예제는 간단한 유동형 그리드예제 입니다. 위 결과와 같이 레이아웃은 유지된 상태로 웹의 가로 길이에 따라 div의 width 값이 바뀝니다. 이는 div의 width값을 고정 값이 아닌 %값으로 줌으로써 유동적으로 전체 가로길이에 따라 div의 width 값이 변합니다.유동형 그리드는 이처럼 반응형 웹을 구현하는데 간단하게 쓸 수 있는 기법입니다. 하지만 가로 폭에 반응을 하면서 레이아웃에는 변화가 없어 폭이 많이 좁은 모바일에서는 큰 효과를 볼 수 없습니다. 유동형 그리드 외에 위의 미디어 쿼리를 써서 반응적으로 그리드의 고정 값을 변화시키는 반응형 그리드도 있습니다. 반응형 그리드는 아래 링크를 참조하시면 됩니다.

http://simplegrid.info/

유동형 레이아웃(Liquid Layouts)

유동형 레이아웃은 유동형 그리드와 같이 반응형 웹 기법 중 하나입니다. 레이아웃 크기를 유동형 그리드와 같이 상대적 단위로 지정하여 웹의 크기에 따라 유동적으로 변화를 줍니다. 또, 반응형 그리드와 같이 미디어 쿼리를 사용하여 일정 크기가 되면 레이아웃 구조를 바꾸어 주는 방법입니다. 특정 부분이 사라질 수 도 있고, 합쳐 지기도 하면서 유동적으로 레이아웃 구조가 바뀌며 사용자에게 제공됩니다.

[예제3] 유동형 레이아웃

위 예제는 간단한 유동형 레이아웃 예제입니다. 앞서 말씀드린 것과 같이 특정 크기에서 레이아웃 구조가 바뀌며 그 외 크기 변화에서는 변화에 따라 레이아웃의 크기만 변합니다. 미디어 쿼리로 인해 반응을 하며 레이아웃 구조에 변화를 주고 유동형 그리드와 같이 %단위를 써서 유동적인 레이아웃이 됩니다. 유동형 레이아웃은 반응형 웹 구현 개념중 하나로 특정한 레이아웃의 구조가 있는 것은 아니지만 여러 패턴이 존재합니다. 이 글에서는 LukeW 5가지 패턴에 대해서 소개합니다. 이미지와 글은 원글을 인용 하겠습니다. 출처는 링크로 걸어 놓았습니다.

Mostly Fluid

가장 작은 화면을 제외한 대부분 다른 작은화면에서는 유동형 그리드와 유동형 이미지를 사용하여 레이아웃을 그대로 유지합니다. 하지만, 가장 작은 화면에서는 수직으로 컬럼을 세우는 구조를 가지며 가장 많이 쓰이는 패턴입니다.

Mostly Fluid 적용 예시링크 - Five Simple Steps

Mostly Fluid

Column Drop

또 다른 인기있는 패턴중의 하나입니다. 화면이 작아짐에 따라 부차적인 컬럼을 아래로 떨어뜨리는 방법을 쓰는 패턴입니다. 대부분의 컬럼 폭은 화면 크기가 달라져도 변함이 별로 없다는 특징이 있습니다.

Column Drop 적용 예시 링크 - Festival de Saintes

Layout Shifter

다양한 기기에 따라 각기 다른 레이아웃을 보여주는 패턴입니다. 복잡하고 많은 작업이 필요하지만 혁신적인 디자인을 담을 수 있다는 장점이 있습니다.

Layout Shifter 적용 예시 링크 - Food Sense

Tiny Tweaks

하나의 컬럼을 사용하는 패턴입니다. 변화의 폭이 크지 않다는 특징이 있으며, 주로 글 내용을 중시하는 웹에서 많이 쓰이는 패턴입니다.

Tiny Tweaks 적용 예시 링크- Future Friendly

Tiny Tweaks

Off Canvas

큰 화면에서는 모든 컬럼들을 보여주고 작은 화면에서는 하나의 메인 컬럼을 보여주며 다른 부가적인 컬럼들을 화면 밖에 숨겨놓는 패턴입니다. 숨겨져 있는 다른 컬럼은 필요할 때만 접근 하도록 합니다. 대표적으로 페이스북이 있습니다.

Off Canvas 적용 예시 링크 - 페이스북 모바일

유연한 이미지(Flexible Images)

모든 화면에서 볼 수 있게 화면 폭보다 큰 이미지를 다운 받고 이미지의 스타일 값 max-width를 100%로, height를 auto로 설정하는 방법입니다. 단순히 이미지를 화면 폭에 맞게 가로/세로 길이를 줄였다 늘였다하는 방법으로 유연한 이미지가 완성 됩니다. 이미지 뿐 아니라 대부분의 비디오에도 적용이 가능합니다. IE구버전에서는 지원하지 않아 max-width가 아닌 width를 100%로 주는 방법으로 사용 됩니다.

이미지

[예제 4] 유연한 이미지1

위 예제는 유연한 이미지에 대한 간단한 예제입니다. 앞서 말했 듯 max-width값과 height 값을 설정해주면 화면 크기에 따라 이미지 크기도 유연하게 변합니다. 하지만, 이와 같은 유연한 이미지는 모바일에서 봤을 때 작은 이미지면 충분한 작업을 해상도가 높은 이미지를 가져와 단순히 크기만 줄여 자원 낭비를 한다는 단점이 있습니다. 이러한 단점을 없애기 위해 모바일 퍼스트를 쓰는 방법이 있습니다. 모바일 기기에 쓰일 이미지를 먼저 다운받고 데스크탑과 같은 큰 화면의 이미지는 미디어 쿼리문을 써서 한번 더 다운 받는 방법입니다. 하지만, 이와 같은 방법도 데스크탑에서의 자원 낭비로 이루어 집니다.

맺음말

반응형 웹에 대해 간단하게 나마 알아 보았습니다. 반응형 웹에 대해 관심이 많으신 분들이나 한번 알아보고 싶으셨 던 분들이 보시고 적게나마 도움이 되었으면 합니다. 저도 이 글을 쓰고 정리하면서 반응형 웹에대해서 많은 공부가 되었습니다. 혹여, 틀리거나 조금 더 정확한 표현이 가능한 부분들이 있다고 생각되시면 바로 저에게 채찍질을 해주셨으면 좋겠습니다. 읽어 주셔서 감사합니다.

참고 도서및 사이트

[CSS] 7. 반응형 웹페이지 만들기(미디어쿼리 @media)

CSS 강의목차

1. CSS 시작, 글 색깔 바꿔보기

2. 스타일속성(선택자,정의,속성) 개념정리

3. CSS 속성과 선택자에 대한 이해

4. CSS 박스모델(padding,margin,border,content)

5. CSS 박스모델 실습하기

6. CSS 그리드 기본사용법 및 활용

7. 반응형 웹페이지 만들기(미디어쿼리 @media)

8. CSS코드의 재사용

이번시간에는 웹페이지가 화면에 따라서 변화하는걸 배워보겠습니다.

우리는 다양한 기기를 통해서 웹페이지를 봅니다. 모두 화면이 다르죠~~

그래서 지금은 무조건(?) 이런 반응형 웹페이지를 만들어야 합니다.

1. media 쿼리 알아보기

mediaquery.html 파일을 만들고 아래와 같이 코딩해줍니다.

결과는 아래와 같이 표시되었네요

이걸 화면의 사이즈가 바뀌게 되면 사라지거나 나타나게 할겁니다.

자, 개발자도구를 여시고 화면을 마우스로 조금 늘려봅니다. 그럼 현재 화면의 사이즈가 아래와 같이 상단에 표시되는데요. 652px-370px 이렇게 표시된게 보이시죠? 화면마다 다르게 보입니다.

이걸, 가로가 800px이 되면 위에 Responsive를 사라지게 할겁니다.

2. media 쿼리 적용하기

아래의 media 쿼리를 css 속성에 지정해줍니다.

@media(min-width:800px){

div{

display:none;

}

}

의미는, 가로 사이즈가 800이상이면 화면에서 div태그에 포함된 내용을 표시하지 마라! 라는 뜻입니다.

아래와 같이 800이하일때는 Responsive가 보이다가 800이상이 되면 Responsive가 사라집니다.

media쿼리를 아래와 같이 두가지로 사용할 수 있습니다.

@media(min-width:800px) / 800px 이상이면

@media(max-width:800px) / 800px 이하면

후자를 사용해서 위 소스에 적용하면, 800px이하일때 화면에서 아무것도 보이지 않다가 800px 이상이 되면 화면에서 보이게되겠죠~

3. 우리가 만든 웹페이지에 미디어쿼리 적용해보기

배웠으니, 마지막으로 우리가 만든 웹페이지에 이걸 적용해봅시다!!!

기존에 작성했던 2.html파일을 엽니다.

이 파일이죠~

가로사이즈가 줄어들었을때, 조금 보기 편하게 화면을 조정해주려고 합니다.

먼저 오른쪽 본문을 목차 아래로 내려줄 필요가 있겠네요!

그래서 아래와 같이 media태그를 작성했습니다.

가로 사이즈가 800px 이하일때, grid를 적용한걸 block으로 바꾼다는 의미입니다.

적용 후 사이즈를 줄여보니깐 아래와 같이 보여집니다.

본문 CSS의 내용이 아래로 내려온걸 확인할 수 있네요!

이번에는 저기 위에 보기싫은 오른쪽 선을 제거해볼께요!

선이 왜 있는지 살펴보니,

# grid ol 태그의 border-right : 1px solid gray 이 부분인게 확인이 됩니다.

# grid ol 태그의 border-right:none로 지정해줍니다.

오른쪽 줄이 사라진걸 확인할 수 있을겁니다.

제목의 아래 테두리도 한번 없애보겠습니다.

h1 태그의 border-bottom:none를 추가해줍니다.

수정된 결과값은? 아래와 같이 밑줄이 사라진걸 확인할 수 있어요~

자, 미디어쿼리까지 적용해서 반응형웹페이지를 만드는것까지 배웠습니다.

이제 나머지는 검색을 통해서 필요한것들을 그때 그때 배워가시면 됩니다!!

생활코딩의 강의안을 바탕으로 필요에 맞게 수정하여 재작성된 강의안입니다.

opentutorials.org/course/3086/18323

반응형

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

반응형

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

미디어쿼리를 이용한 반응형 웹사이트 만들기 연습해 보고 있어요.

지난 강좌를 읽고 오셔야 이해가 쉽습니다.

[css] 미디어 쿼리, @media query 이해하기

반응형 웹사이트(소스) 만들기 연습

오늘은 지난 시간에 낸 연습 문제, 화면이 480px 이하로 축소될 때 본문 바로 밑으로 사이드 바가 떨어지게 만들어 보겠습니다.

또 480px 이하일 때, 사이드바를 없애는 법과, IE6,7,8에서 미디어쿼리를 적용하는 방법도 알아 볼게요

[소스 작성 순서]

A 화면 만들기 -> B 화면 만들기

A 화면

B 화면

A화면 만들기

어제 배운 소스를 그대로 활용해서 몇 가지만 수정하면 됩니다.

html

  • Home
  • Guest
  • Noitce
    • 본문
    오른쪽 사이드바

    Home

    Guest

    Noitce 본문 오른쪽 사이드바 footer

    이번엔 #side(오른쪽 사이드바)를 본문 아래 쪽에 작성했는데, 본문 바로 밑으로 사이드바가 떨어지게 하기 위함이랍니다~

    css

    #nav, #footer, #side {background-color:#FFE08C;}

    #nav{margin:0 0 10px 0; padding:0px;}

    #nav li{display:inline;}

    #contents {min-height: 400px; background: #E4F7BA; width: 80%; float:left;}

    #side {min-height: 400px;}

    #footer {margin-top: 10px;}

    css 작성에서 어제와 틀린 부분은

    #side 에 너비 설정을 하지 않고

    #contents에 float 설정을 하고 너비 설정을 함

    여기까지 작성하면 A화면 대로 나옵니다.

    B화면 만들기

    @media screen and (max-width: 480px)

    {

    #contents { width: auto; float: none; min-height: 200px;margin-bottom: 10px;}

    #side { width: auto; min-height: 0;}

    }

    위에서 #contents를 float 시켰기 때문에 미디어쿼리에서, #contents 쪽에 float 해제 시켜 줍니다(float:none)

    이렇게만 하면 화면이 480px 이하 시 아래처럼 표시됩니다.

    만일 480px 이하에서 사이드바가 사라지게 하려면?

    #side{display:none;} 이라고 하면 됩니다.

    css

    @media screen and (max-width: 480px)

    {

    #contents { width: auto; float: none; min-height: 200px;margin-bottom: 10px;}

    #side { display:none;}

    }

    소스는 파일 다운 받아 활용하세요~

    media_query2.html

    제 소스를 보면 아래와 같은 코드가 있는데, 뷰포트는 모바일 장치에서 화면 크기 조절을 위해 사용합니다.

    meta viewport (메타 뷰포트 태그) 사용법

    IE6~8에서 미디어 쿼리를 적용하려면?

    @media 구문은 IE9 이상에서 지원이 되는데요

    구글에서 제공하는 자바스크립트 라이브러리를 사용하면 IE6~8에서도 미디어 쿼리가

    작동한다고 합니다.

    조건부 주석을 통해 스크립트를 감싸며,

    IE9 이하에서만 이 스크립트가 로드되며, 다른 브라우저는 이 구문을 무시합니다.

    ie678에서 미디어쿼리.txt

    *속도 향상을 위해 이 구문은 바로 위에 삽입합니다.

    *@import 된 스타일시트에서는 작동하지 않음.

    이번 시간은 너무 쉬운 감이 있네요. 다음 시간엔 약간 복잡해집니다.

    1. 화면이 480px 이하 시, 메뉴 Home Guest Notice가 사라지고

    2. 대신 메뉴 아이콘이 새로 등장하며

    3. 메뉴 아이콘을 클릭했을 때 메뉴가 다시 등장하기

    를 배워보겠습니다.

    크로스브라우징, 웹표준과 핵(hack)

    @import rule 사용법, link 태그와 차이

    반응형

    CSS / 반응형 레이아웃 만들기

    반응형 웹디자인

    웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다.

    특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다.

    이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것입니다.

    @media

    이러한 작업을 할 수 있게 해주는 것이 @media입니다. 예를 들어

    @media ( max-width: 768px ) { body { color: red; } }

    와 같이 하면, 웹브라우저의 가로 해상도가 768px 이하일 때 글자색을 빨간색으로 바꿉니다. 즉, 모바일 기기의 해상도를 고려하여 적절히 CSS를 수정하거나 추가하는 것이 가능합니다.

    주의할 점은 가로폭 조정을 위해서 HTML 문서의 와 사이에 다음의 코드를 넣어야 한다는 것입니다.

    모바일 우선(Mobile First) VS 데스크톱 우선(Desktop First)

    작은 가로폭부터 큰 가로폭 순서로 만드는 것을 모바일 우선(Mobile First), 큰 가로폭부터 작은 가로폭 순서로 만드는 것을 데스크톱 우선(Desktop First)이라고 합니다.

    모바일 우선(Mobile First)

    작은 가로폭부터 큰 가로폭 순서로 만들고, min-width를 이용합니다.

    A @media ( min-width: 768px ) { B } @media ( min-width: 1024px ) { C }

    기본 모양은 A, 768px 이상일 때는 B, 1024px 이상일 때는 C가 적용됩니다.

    Bootstrap 등 대부분의 프레임워크는 모바일 우선으로 만들어져 있습니다.

    데스크톱 우선(Desktop First)

    큰 가로폭부터 작은 가로폭 순서로 만들고, max-width를 이용합니다.

    A @media ( max-width: 1023px ) { B } @media ( max-width: 767px ) { C }

    기본 모양은 A, 1023px 이하일 때는 B, 767px 이하일 때는 C가 적용됩니다.

    예제 1

    데스크톱 우선으로 만든 간단한 반응형 레이아웃 예제입니다.

    CSS

    Responsive Layout

    Content

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.

    Sidebar

    • Lorem
    • Ipsum
    • Dolor

    기본 모양은 다음과 같습니다.

    가로 해상도가 480px 이하면 가로폭이 줄어들고 사이드바가 밑으로 내려갑니다.

    예제 2

    위의 예제를 모바일 우선으로 만들려면

    반응형 웹페이지 기본 틀 만들기(그리드, 미디어쿼리 활용)

    오늘은 반응형 웹페이지의 기본 틀을 만들어보겠습니다. 동기부여를 위해 우선 결과물을 보여드리고 시작하겠습니다. 화면의 크기를 줄이다보면 어느 순간 사이드바 영역이 본문 영역 아래로 내려가는 형태의 반응형 웹페이지입니다.

    클릭해서 보세요.^^

    위와 같은 웹페이지를 만드려면 html 코드와 css 코드가 필요합니다. 이 둘은 같은 폴더 내에 있어야 합니다. 먼저 html 코드는 다음과 같습니다.

    index.html

    Document

    bskyvision

    본문 영역입니다.

    여기서 이 부분이 없으면 모바일 환경에서 제대로 작동하지 않을 수 있으니 유의하세요.

    또한 css 코드는 다음과 같습니다.

    style.css

    h1 { text-align:center; } div { font-size: 30px; text-align: center; } #main { display: grid; grid-template-columns: 3fr 1fr; } #main #contents { min-height: 500px; background-color:#00ffff; margin-right: 10px; } #main #sidebar { min-height: 500px; background-color: #00bfff; } #footer { margin-top: 10px; background-color: #00bfff; } @media (max-width:600px){ /*가로 너비가 600px 이하일 때 아래 스타일 적용*/ #main { display: block; } #main #contents { margin-bottom: 10px; margin-right: 0px; } #main #sidebar { min-height: 0; } }

    여기서 핵심은 미디어 쿼리라는 것을 사용하는 점입니다. 미디어 쿼리는 보통 반응형 웹을 만들 때 사용하는 기술입니다. 위 css 코드에서 @media 로 시작하는 부분을 의미합니다. 미디어 쿼리를 사용함을 통해서 "가로 너비가 600px 이하일 때 사이드바가 본문 아래로 내려오게 한다"와 같은 기능을 실현시킬 수 있습니다. 즉, 반응하는 웹을 만들 수 있는 것이죠.

    이것을 기본틀로 해서 나름대로 유용한 웹사이트를 만들 수도 있겠죠? 웹페이지 만드는 것 독학해가는 재미가 쏠쏠하네요. ㅎㅎ

    <참고자료>

    [1] https://aboooks.tistory.com/368?category=516604, 지구별 안내서, "CSS로 반응형 웹사이트 (소스) 만들기: 사이드바가 본문 아래로 떨어지게"

    [2] https://ccuram.tistory.com/30, yucalip, "[HTML/CSS] 화면의 크기와 환경을 감지하는 기술, 미디어 쿼리 (Media Queries)"

    반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리

    320x100

    이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다.

    (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!)

    프롤로그

    모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 찾아볼 수 있습니다.

    빠트릴 수 없는 기술이 된 만큼, 오늘은 반응형을 만들기 위한 몇 가지 방법들을 정리해봤습니다 🤘

    이 글에서는 반응형을 위한 기본인 뷰포트와 미디어 쿼리를 다루며,

    다음 글에서는 CSS 속성을 활용해 빠르게 반응형을 만드는 법을 다룰 생각입니다. (투비 컨티뉴!)

    1. meta 태그 - viewport

    VS CODE 등에서 자동 html을 생성해 보신 적이 있으신가요? (! 치고 tab키를 누르면 뿅하고 나오는 그거요)

    이때 기본으로 작성되는

    내에 아래의 태그가 들어간 것을 볼 수 있습니다.

    이게 얼마나 좋은 거길래 묻지도 따지지도 않고 넣어주는 걸까요?

    이 뷰포트 메타 태그는 모바일 반응형을 만들 때 필요합니다.

    뷰포트(viewport)란, 웹 페이지에서 사용자의 보이는 영역(visible area)를 말합니다. 따라서 이는 기기별로 달라지게 됩니다.

    같은 페이지라 하더라도 모바일과 태블릿은 화면 크기가 다르기 때문에 사용자가 볼 수 있는 범위가 다르니까요.

    즉, 이 태그는 뷰포트를 지정해주는 역할을 합니다.

    속성을 좀 더 살펴보죠!

    우선, width 는 뷰포트의 가로 크기를 정합니다. 만약 500이란 값을 넣으면, 500만큼의 픽셀 개수를 가진 너비로 설정됩니다.

    device-width 라고 지정했으니, 기기의 스크린 너비에 맞추라는 뜻이 됩니다.

    한편, initial-scale 은 페이지에 처음 접속했을 때 보여질 확대 배율을 설정합니다.

    1로 정하면 CSS 픽셀과 화면에 보여질 픽셀이 1:1을 이룹니다.

    달리 말해, 이 값이 1보다 작다면 페이지는 축소되어 보이고, 1보다 크다면 확대되어 보입니다.

    width 뷰포트의 가로 크기 initial-scale 페이지 처음 접속 시 보여질 배율

    만약 이러한 값들이 정해지지 않은 페이지를 모바일에서 본다면 어떤 느낌일까요?

    뷰포트를 정하지 않으면 width는 기본값인 980이 됩니다. 그럼, width:100% 를 지정한 요소는 그냥 980px 값을 가지게 되겠죠.

    따라서 모바일은 이 980px짜리 페이지를 어떻게든 사용자에게 보여주려고 배율을 줄이게 됩니다. 바로 이렇게요.

    (좌) 뷰포트를 지정하지 않은 경우 / (우) 뷰포트 너비를 device-width로 지정한 경우

    반면, 오른쪽 이미지처럼 메타태그를 지정한 경우엔 width:100% 가 iPhone5에선 320px, iPad에선 768px이 됩니다.

    따라서 사용자는 보다 편안하게 웹 페이지를 탐색할 수 있습니다.

    뷰포트 메타태그에는 아래의 속성들도 들어갈 수 있어요.

    user-scalable 사용자의 축소/확대 허용 여부. 초기값은 yes며, no로 금지 가능 minimum-scale 뷰포트의 최소 배율값 (0~10) maximum-scale 뷰포트의 최대 배율값 (0~10)

    네이버 모바일의 마크업을 보면 user-scalable=no 이 지정된 걸 볼 수 있습니다.

    즉, 사용자가 줌인이나 줌아웃을 할 수 없도록 막아둔 상태입니다.

    minimum-scale 과 maximum-scale 도 1.0으로 지정했기 때문에 고정된 UI를 항시 보여줄 수가 있습니다.

    다만, 이 경우엔 웹 접근성 관련해 경고 카드를 받을 수도 있어요.

    아래는 이걸 본 validator.w3.org와 lighthouse가 날린 경고장입니다 😞

    정리하자면, 메타 태그로 뷰포트를 지정해 주면 모바일 친화적인 UI를 제공할 수 있게 됩니다.

    적응형(반응형이 아닌 거요!)이라면 여기에다 모바일에 맞춘 CSS를 작성하면 됩니다.

    하지만 우리가 필요한 건 반응형이에요. 그럴 때 필요한 건? 미디어쿼리죠!

    2. 미디어 쿼리

    미디어 쿼리는 반응형을 위한 기본이자 핵심입니다.

    잘 활용하면 어떤 디바이스에서도 예쁜 웹 페이지를 만들 수 있어요.

    media 라는 키워드로 사용하며, 아래는 미디어 쿼리를 활용한 예시입니다.

    .title { font-size: 40px; } @media (max-width: 600px) { .title { font-size: 20px; } }

    타이틀의 텍스트 크기를 40px로 하되, 600px보다 작은 화면에서는 20px로 줄인다는 내용입니다. 참 쉽죠? 🎨

    See the Pen dyPOKKZ by nanalike (@nykim_) on CodePen.

    그러니 모바일 시안을 받았다면, 분기점을 정한 뒤 시안의 사이즈에 맞춰 미디어 쿼리를 지정해 주면 됩니다.

    (Zeplin 등으로 전달 받았다면 사이즈를 그대로 사용하시면 돼요.

    다만, PSD의 경우 이미지 사이즈 때문에 2배 사이즈로 받는 경우가 있기에 나누기 2만큼의 값을 지정해 줍니다.)

    미디어쿼리 적용

    미디어 쿼리를 적용하는 법은 간단합니다.

    1) CSS 파일 내에 직접 작성하거나

    @media (min-width:768px) {}

    2) 태그에 media 속성을 설정해 사용합니다

    하지만 대부분의 경우 첫 번째 방법을 써요!

    왜냐하면 두 번째 방법처럼 CSS를 분리해 두더라도, 브라우저는 '에라 모르겠다'며 일단 모든 CSS 파일을 다운로드하기 때문입니다.

    HTTP 요청이 많아지면 성능이 그만큼 저하되므로, CSS 파일 내에서 @media로 분리하는 것을 추천합니다.

    구문

    미디어 쿼리 구문은 '미디어 유형 / 논리 연산자 / 특성'으로 이루어지며 대소문자를 구분하지 않습니다.

    미디어 유형

    all 모든 디바이스 대상 print 인쇄 결과물 및 인쇄 미리보기 문서 screen 화면 대상

    @media screen {} 을 쓰면, 스크린이 있는 디바이스에서만 적용이 됩니다.

    이외에도 여러 유형이 있지만 제일 많이 쓰는 건 all과 screen이에요.

    유형을 지정하지 않는 경우엔 디폴트인 all 이 지정됩니다.

    논리 연산자

    and 모든 쿼리가 참이여야 적용 not 모든 쿼리가 거짓이여야 적용 , (comma) 어느 하나라도 참이면 적용 (or에 해당) only 미디어쿼리를 지원하는 브라우저만 적용

    여기서 only 라는 생소한 키워드가 나왔네요!

    @media only screen {} 을 사용하면 미디어쿼리를 지원하지 않는 브라우저(IE8 이하)에서는 해당 스타일을 무시합니다.

    더 정확히 얘기하자면, 미디어쿼리를 지원하는 브라우저는 only 키워드를 만나면 무시하고 그대로 읽어들입니다.

    반면에 지원하지 않는 브라우저는 only라는 이름의 미디어 유형이 있다고 생각합니다.

    하지만 only라고 정의된 미디어 종류는 없기 때문에, 결국 아무것도 적용되지 않는 거죠.

    특성

    width 뷰포트 너비 height 뷰포트 높이 aspect-ratio 뷰포트 가로세로비 orientation 뷰포트 방향

    orientation의 경우, 아쉽게도(?) 모바일 전용 속성이 아닙니다.

    '가로가 세로보다 긴지' 또는 '세로가 가로보다 긴지'에 따라 가로 모드/세로 모드라고 판단합니다.

    만약 모바일 환경에만 특정 CSS를 적용해야 한다면 User Agent를 판단 후 분기해야 합니다.

    이런 식으로 유형, 연산자, 특성을 조합해 다양한 구문을 만들어 낼 수 있습니다.

    @media all and (min-width:768px) and (max-width:1080px) {} /* '모든 디바이스 & 최소 너비가 768 이상 & 최대 너비가 1080 이하'라는 조건을 모두 만족할 때 */

    @media (min-height: 680px), screen and (orientation: portrait) { ... } /* '최소 높이가 680 이상'이거나 '세로 모드의 스크린 기기' 중 하나를 만족하는 경우에 적용*/

    미디어 쿼리의 스펙 문서를 살펴보면 이외에도 정말 많은 특성을 만나볼 수 있어요.

    예를 들면, 미디어 쿼리 레벨 4 스펙에서 추가된 hover 나 pointer 등이 있습니다.

    @media (hover: hover) and (pointer: fine) { } 를 써서 마우스나 트랙패드가 있는 기기를 조건으로 하는 구문을 만들 수 있습니다.

    하지만 최신 스펙에는 언제나 지원 브라우저가 제한되어 있다는 한계가 존재하죠 😕

    실무에서는 특성에 주로 width 값을 사용합니다. 사실 이것만 써도 거의 커버할 수 있어요!

    모바일과 데스크탑, 누가 먼저?

    미디어 쿼리의 분기는 대부분 width 값을 사용하는데, 이때 min을 쓸지 max를 쓸지 고민될 때가 있죠.

    방법은 여러가지가 있겠지만, 저의 경우에는 아래와 같이 사용하고 있습니다.

    - 모바일 퍼스트: min

    - 데스크탑 퍼스트 : max

    모바일 퍼스트는 말 그대로 모바일 우선입니다.

    따라서 모바일에 대한 스타일이 우선 적용되도록, 분기점(break point)가 낮은 순대로 작성해 나갑니다.

    /* Mobile First */ .title { font-size: 12px; } @media (min-width: 640px) { .title { font-size: 14px; } } @media (min-width: 768px) { .title { font-size: 16px; } } @media (min-width: 1024px) { .title { font-size: 18px; } }

    위와 같이 작성한 경우, iPhoneX 사이즈(375px)의 기기에서는 폰트 사이즈가 어떻게 될까요?

    어떠한 미디어 쿼리 구문도 만족하지 못하므로 12px이 적용됩니다.

    한편, 800px 너비의 뷰포트에서 본다면요?

    우선 12px이 적용되지만, 최소 너비 640이란 조건을 만족하므로 스타일을 덮어써서 14px이 됩니다.

    또, 최소 너비 768이라는 조건도 만족하므로 스타일을 다시 덮어써서 16px이 됩니다.

    하지만 최소 너비 1024는 만족하지 못한 상태이므로 16px이 그대로 유지돼요.

    반면에 데스크탑 퍼스트는 분기점(break point)를 높은 순서부터 작성합니다.

    이 경우에는 뷰포트 값이 작아질수록 스타일을 덮어쓰는 방식으로 적용이 되겠죠!

    /* Desktop First */ .title { font-size: 18px; } @media (max-width: 1023px) { .title { font-size: 16px; } } @media (max-width: 767px) { .title { font-size: 14px; } } @media (max-width: 639px) { .title { font-size: 12px; } }

    보여지는 결과물은 똑같기에 크게 상관은 없으며, 작성 방식에만 차이가 있어요.

    도와줘요 믹스인

    미디어쿼리를 멋지게 쓰는 건 좋지만, 구문과 분기점을 항상 외우고 다닐 순 없죠.

    그럴 땐 믹스인을 만들어 쓰면 좋습니다. 유지보수도 매우 편해져요!

    미디어 쿼리를 관리하기 위한 scss 파일을 만들어 주세요.

    분기점은 변수로 만들고, @content로 내용이 비워져있는 믹스인을 작성합니다.

    // Break Point $tablet: 768px; $laptop: 1020px; $desktop: 1400px; // Mixins @mixin tablet { @media (min-width: #{$tablet}) { @content; } } @mixin laptop { @media (min-width: #{$laptop}) { @content; } } @mixin desktop { @media (min-width: #{$desktop}) { @content; } }

    이제 @include로 불러와 사용합니다.

    // SCSS .logo { width: 20px; @include desktop { width: 40px; } }

    /* 컴파일된 CSS */ .logo { width: 20px; } @media (min-width: 1400px) { .logo { width: 40px; } }

    짜잔- 아주 잘 나오네요!

    중첩 미디어 쿼리

    믹스인을 사용할 때 아래처럼 미디어 쿼리를 별도로 작성할 수도 있지만,

    /* 미디어 쿼리를 별도로 작성하는 경우 */ .title { font-size: 12px; } .logo { width: 20px; } @include laptop { .title { font-size: 14px; } .logo { width: 30px; } }

    요소 바로 밑에 작성하는 방법도 있습니다. 바로 아래처럼요.

    /* 미디어 쿼리를 바로 아래에 작성하는 경우 */ .title { font-size: 12px; @include laptop { font-size: 14px; } } .logo { width: 20px; @include laptop { width: 30px; } }

    위의 방식대로 작성하는 경우, 반응형 디자인을 바로 확인할 수 있어 직관적이라는 장점이 있습니다.

    특히 분기점이 많아질수록 보기가 편하며 유지보수에도 좋습니다.

    한 가지 아쉬운 점이 있다면, 컴파일한 CSS에서 미디어 쿼리 구문이 계속 중복된다는 점입니다.

    /* 컴파일 후 중복되는 미디어 쿼리 구문 */ .title { font-size: 12px; } @media (min-width: 1020px) { .title { font-size: 14px; } } @media (min-width: 1600px) { .title { font-size: 16px; } } .logo { width: 20px; } @media (min-width: 1020px) { .logo { width: 30px; } } @media (min-width: 1600px) { .logo { width: 40px; } }

    성능에 큰 영향을 줄 만한 요소는 아닌 것 같지만, 이왕이면 짧은 CSS가 좋겠죠.

    이럴 땐 중복되는 미디어 쿼리구문을 합쳐주는 도구를 쓰면 아래처럼 깔끔해져요 (❁´◡`❁)

    gulp를 사용 중이시라면 'gulp-group-css-media-queries'를 설치해서 사용할 수 있습니다. (21.02.24 / 댓글 감사합니다!)

    var gulp = require('gulp'); var gcmq = require('gulp-group-css-media-queries'); gulp.task('default', function () { gulp.src('src/style.css') .pipe(gcmq()) .pipe(gulp.dest('dist')); });

    /* 중복되는 미디어 쿼리 구문 제거 */ .title { font-size: 12px; } .logo { width: 20px; } @media (min-width: 1020px) { .title { font-size: 14px; } .logo { width: 30px; } } @media (min-width: 1600px) { .title { font-size: 16px; } .logo { width: 40px; } }

    지금까지 뷰포트 메타 태그와 미디어 쿼리에 대해 살펴보았습니다. 사실 이 두 개만 활용해도 멋진 반응형을 만들 수 있습니다.

    하지만 시간이 없는데 빠르게 반응형을 만들어야 하거나, 분기점을 하나하나 고려하기가 힘들 때가 있죠.

    그럴 때 유용하게 써먹을 수 있는 vw이나 rem 같은 CSS 속성들이 있습니다.

    CSS 속성을 활용하는 반응형 제작법은 시리즈의 다음 글에서 다룰 예정입니다.

    다음 글에서 만나요- 스테이 튠! (??) 📺🕹

    이 시리즈의 다음 글: 반응형 웹 뚝딱 만들기 (2)

    참고 글

    CSS media query에 대하여 :: 널리

    미디어 쿼리의 only 키워드 :: wystan's tales

    The complete guide to CSS media queries :: polypane

    728x90

    반응형 웹을 위한 레이아웃 설계 방법

    728x90

    지난 아티클을 통해 반응형 웹의 정의와 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들에 대해 살펴보았습니다.

    이번 아티클에서는 ‘반응형 웹을 어떻게 만들 것인가’에 대한 실질적 내용인 “반응형 레이아웃”에 대해서 알아보고 간단한 실습 예제를 진행하겠습니다.

    1. CSS3와 미디어 쿼리

    일반적으로 레이아웃은 ‘사물을 공간에 잘 배치하는 것’을 이야기합니다. “Lay something out”이 “~을 잘 사용할 수 있도록 보기 쉽게 펼치다”라는 뜻이니, 웹 페이지 레이아웃은 웹 페이지 내 요소들을 사용자 입장에서 보기 좋게 배치하는 것이겠죠. 웹의 기본 요소인 HTML, CSS, JavaScript 중 요소를 정의하는 것이 HTML, 그것을 어떻게 보여줄지 결정하는 것이 CSS, 동작을 결정하는 것이 JavaScript라면, 레이아웃 결정은 CSS에 속한다고 볼 수 있습니다.

    CSS란?

    CSS(Casading Style Sheet)는 따로 공부하지 않아도 더 어려운 알고리즘을 소화할 수 있기 때문에 많은 개발자들이 어려워하지 않는 영역입니다. 일반적으로 HTML 요소의 스타일 정의가 가장 큰 역할인데, 같은 요소에 대해서는 가장 마지막에 기술한 스타일이 이전 스타일을 대신한다는 특징이 있죠. HTML5에서 정의한 header나 aside 같은 시맨틱 태그조차도 스타일 없이는 div와 같이 보입니다. 예를 들어, 아래 [그림1]을 보면 크롬에서 브라우저의 기본 display 속성이 block을 표시합니다.

    [그림1] 기본 display 속성

    본 아티클에서 레이아웃을 이야기할 때, 시맨틱 태그는 일단 고려하지 않겠습니다. 개념적으로 웹 페이지의 layout을 이야기할 때는 주로 아래 [그림2]의 왼쪽과 같은 형태를 고려합니다. 헤더와 푸터, 내비게이션 바가 존재하고 콘텐츠들은 중앙에 위치하죠. 오른쪽은 일반적인 모바일 페이지의 레이아웃을 보여줍니다.

    [그림2] 웹과 모바일의 레이아웃 비교

    물론 레이아웃은 매우 다양하므로 위의 두 화면 만으로 모든 것을 이야기할 수는 없습니다. 하지만 웹 레이아웃의 메인 콘텐츠와 모바일 페이지 사이에는 정보 제공력(보여줄 수 있는 정보의 양)의 차이가 분명히 존재합니다. 그래서 모바일 레이아웃에서는 내비게이션 메뉴를 숨겼다가 나타내기도 하고, 푸터 영역도 보이지 않다가 스크롤이 멈추면 나타나게 하는 등의 방법으로 어려움을 해결하기도 하죠.

    문제는 동일한 페이지의 디자인을 두 벌 만들지 않고, 웹 사용자와 모바일 사용자 모두를 고려한 반응형 웹으로 만들려면 어떡해야 하는가입니다. 이 고민을 해결해 주는 것이 바로 CSS3의 미디어 쿼리입니다.

    ※ CSS2에서 CSS3로의 변화 Point

    - 가장 큰 변화는 selector의 변화

    · div[id^="bar"]처럼 id가 bar로 시작하는 div 엘리먼트 또는,

    div[id$="end"]처럼 id가 end로 끝나는 div 엘리먼트를 찾을 수 있는 selector 가능

    - 백그라운드 이미지 여러 개 사용 가능

    - 박스 모델 적용

    - 미디어 쿼리 적용

    이 외에도 많은 사람들이 “모던 브라우저의 시작은 CSS3”라고 할 정도로 다양한 변화들이 있었습니다.

    미디어 쿼리란?

    앞서 장치에 대해 다루면서 장치 크기에 따라 페이지를 반응형으로 설계해야 한다는 말을 했는데, CSS3에서는 미디어 쿼리가 장치를 의미합니다.

    예를 들어 다음과 같은 스타일 시트를 정의할 때,

    다음으로 HTML을 아래와 같이 작성해 보겠습니다.

    이렇게 적용한 후 브라우저 사이즈를 400px 근처에서 왔다 갔다 해 보면, 400px 이하에서는 [그림3]과 같이 header 클래스의 div 오브젝트가 사라지는 것을 볼 수 있습니다.

    [그림 3] 미디어 쿼리를 사용한 예제

    이러한 기능을 통해 웹페이지가 모바일 페이지 사이즈에 따라 변경되는 스타일 시트를 만들어 놓으면, 웹/모바일 페이지 모두에 대응할 수 있는 반응형 웹 페이지가 만들어집니다. 또, 스타일 시트를 웹 페이지에 삽입하는 link 태그를 미리 지정하는 방법도 있습니다. CSS만 분리하여 태그를 지정해 두면 콘텐츠와 HYML은 그대로 두고 CSS의 분리 페이지를 개발할 수 있죠. 링크는 아래와 같이 걸 수 있습니다.

    2. 예제 실습

    아래 [그림 4]처럼 웹 페이지를 만든 후, CSS 변경만으로 웹 페이지에 적응할 수 있는 페이지를 만들어 보겠습니다.

    [그림4] 웹에서 모바일로의 페이지 변환

    위 그림에서 우리가 다룰 엘리먼트는 HEADER, Navigation Menu, Main Content, Content, Footer로 총 5개입니다. 모바일 환경에서 Content 와 Footer는 장치 바깥으로 스크롤된다고 가정하고, HTML부터 작성해 보겠습니다. (시맨틱 엘리먼트를 무시하기로 했으니, 여기서는 모두 div로 만들겠습니다.)

    HTML 소스코드는 다음과 같습니다.

    여기서 중점적으로 봐야 할 부분은 장치에 따라 CSS를 다르게 참조하도록 한 점입니다. 페이지를 로딩하면서 CSS를 미리 가져와 파싱하는 것은 일반적으로 HTML에서 가져오는 것과 같습니다. (web.css와 mobile.css를 한꺼번에 가져와 파싱하는 것. 아래 [그림5] 참조.)

    [그림5] web.css 및 mobile.css 로딩

    각 HTML 안에는 영역별로 주석을 남겨 두었습니다. 이제 CSS 소스를 살펴보죠.

    web.css 소스는 다음과 같습니다.

    fakeimg 클래스는 이미지가 들어갈 영역이라고 표시해둔 것입니다. body 영역은 기본적으로 padding 이 10px이 들어가 있습니다. 웹에서는 영역 간 여백으로 페이지를 훨씬 미려하게 하지만, 모바일에서는 그럴 만한 공간적 여유가 없습니다. 아래 [그림6]을 통해 그 예를 살펴보겠습니다.

    [그림6] 웹에서 모바일로의 레이아웃 변화

    모바일에서는 웹에 존재했던 여백(padding)이 사라지고 레이아웃 자체가 일렬로 정리된 것을 볼 수 있습니다. 사이즈가 줄어들면서 레이아웃이 바뀐 것이죠. mobile.css의 소스코드는 다음과 같습니다.

    단지 3개의 스타일 클래스 변경만으로 이런 효과를 줄 수 있는 것이 CSS의 힘이고, 이렇게 반응형 웹 페이지를 만들 수 있는 것이 미디어 쿼리의 힘입니다.

    하지만 개발자가 디자이너 없이 이런 부분들을 모두 담당하기에는 어려움이 많습니다. 따라서, 다음 아티클에서는 개발자들이 디자이너 없이도 손쉽게 반응형 웹을 만들 수 있도록 도움을 주는 프레임워크에 대해서 알아보겠습니다.

    ▶ 해당 콘텐츠는 저작권법에 의하여 보호받는 저작물로 기고자에 저작권이 있습니다.

    ▶ 해당 콘텐츠는 사전 동의없이 2차 가공 및 영리적인 이용을 금하고 있습니다.

    출처 : 삼성SDS 인사이트리포트 https://www.samsungsds.com/kr/insights/

    728x90

    키워드에 대한 정보 반응형 웹 css 소스

    다음은 Bing에서 반응형 웹 css 소스 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.

    이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!

    사람들이 주제에 대해 자주 검색하는 키워드 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

    • 웹 사이트 만들기
    • 웹 사이트 따라 만들기
    • 웹사이트 따라만들기
    • 웹사이트 클론코딩
    • 클론코딩
    • 홈페이지제작
    • 웹퍼블리셔
    • html5
    • css3
    • 강의
    • 웹표준
    • 웹접근성
    • 웹호환성
    • 반응형웹
    • 모바일웹
    • 웹사이트구축
    • html
    • css
    • 코딩
    • 웹디자인
    • 웹
    • 웹개발
    • 개발
    • 디자인
    • 웹퍼블리싱
    • 프론트엔드
    • 자바스크립트
    • javascript
    • CSS
    • HTML
    • 웹사이트
    • 반응형 웹
    • 반응형 다지안
    • Responsive web
    • responsive design
    • 반응형 사이트
    • 프론트엔드 강의
    • 웹 튜토리얼
    • 웹 강의
    • 반응형 헤더
    • 반응형 네비
    • HTML 강의
    • CSS강의
    • Javascript
    • 웹사이트 만들기
    • 프론트엔드 개발
    • css 강의
    • 코딩 기초
    • 코딩 독학
    • 코딩 입문
    • 웹사이트 코딩
    • 웹 포트폴리오
    • 프론트엔드 공부
    • 프론트엔드 공부순서
    • 프론트엔드 튜토리얼

    웹사이트 #따라만들기, #반응형 #헤더편 #| #프론트엔드 #개발자 #입문편: #HTML, #CSS, #Javascript

    YouTube에서 반응형 웹 css 소스 주제의 다른 동영상 보기

    주제에 대한 기사를 시청해 주셔서 감사합니다 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript | 반응형 웹 css 소스, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.

    Leave a Comment