Responsive Web Design
Responsive Web Design이란 웹페이지가 디스플레이 환경에 따라 웹 페이지가 자동으로 변화하도록 하는 것이다. (반응형 웹페이지)
The Viewport
view point란 사용자가 볼 수 있는 웹페이지의 영역을 말한다.
<meta> : 메타 태그로 viewpoint를 조절할 수 있다. 다음과 같은 <meta> viewpoint를 웹페이지에 항상 포함시켜야한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width : 페이지의 가로길이가 디바이스의 디스플레이 길이를 따르도록 해준다
intial-scale = 1.0 : 페이지 로드시 initial zoom level을 설정한다
반응형 웹페이지를 위해 주의할점
- 크게 고정된 요소를 사용하지 말 것
- 특정 viewpoint에 대해 고정된 웹페이지를 만들지 말 것
- Use CSS media queries to apply different styling for small and large screens
Grid-View
grid view란 페이지를 여러개의 열들로 나뉘어진 것으로 보는것을 의미한다. 나눠진 열들에 요소를 배치한느것이 그렇지 않은것보다 간편하다.
box-sizing 속성이 borderbox로 지정되어있는지 확인해야한다. padding과 border이 총 너비높이에 포함되게한다
100%를 12개의 열로 나누면 하나당 8.33%를 차지하게됨을 알 수 있다
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
모든 열은 왼쪽에 float 하고 15px의 padding이어야 한다
각 행들은 <div>로 묶여야하며 행안의 열은 항상 12개여야한다
Media Queries
@media : 장치에 따른 다른 레이아웃 작성을 위해 break point와 레이아웃을 설정한다
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
브라우저가 786px보다 작아졌을때 각 열은 100%의 너비를 갖게한다
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
되도록이면 모바일에서의 화면을 먼저 디자인하고 브라우저의 비율이 바뀌었을때 pc화면을 나타나게 하는 것이 좋다
데스크탑, 태블릿, 모바일에서 각각 다른 화면이 나올 수 있게 하기 위해선 태블릿과 데크스탑을 위한 column class를 각각 만들어주고 html에서 breakpoint 별로 column에 맞춰 디스플레이될 크기를 할당해 줄 수 있다.
<style>
[class*="col-"] {
float: left;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
Typical Device Breakpoints
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}Orientation: Portrait / Landscape
orientation: landscape는 위도우 브라우저의 너비가 높이보다 높을 때를 지칭한다.
아래의 예제에선 윈도우 너비가 높이보다 길때 배경을 하늘색으로 만들 수 있다.
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}Media Queries 사용
display : none 으로 화면 조절과 함께 요소가 안보이게 하거나
font-size 로 특정 너비에서의 글씨 크기를 조절할 수도 있다.
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Frameworks
반응형 웹페이지를 위해 다양하게 제공되는 CSS Frameworks를 추가할 수 있다
<meta> 와 <link>, <script> 등을 이용해서 사용
Templates
다양하게 제공되는 template 을 수정하거나 사용해서 웹페이지를 꾸미는것도 가능하다
'CSS' 카테고리의 다른 글
| CSS Advanced 2 (0) | 2020.07.24 |
|---|---|
| CSS Advanced (0) | 2020.07.24 |
| CSS Tutorial 2 (0) | 2020.07.24 |
| CSS Tutorial 1 (0) | 2020.07.23 |
