CS50's Web Programming (HTML&CSS - 0 - Responsive Design)

Responsive Design

- viewport

viewport is this entire area of the web page that displays content to the user.

one simple thing we can do is just to add a little line of code to our HTML inside the head section of our page that controls the viewport.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This line of code here is providing some metadata to our HTML page and saying, I would like you to change the viewport to be specifically the width of the device.

By default, many phones will use a viewport that's actually wider than the width of the device, treat it as if they're loading a page in a computer, and then shrinking it down to the size of a mobile device. If you and your web page specify, though, that you want the viewport to be just the device width, oftentimes a page is going to look a whole lot better on a mobile device.

- Media Queries

A very simple example of just changing the color depending on the size of the screen.

is 600 pixels or anything larger than 600 pixels, well, then go ahead and take the body and give it a background color of pink.
But then I could also add another media query and say, you know what, for this media query let me give it a max width of 599 pixels,
meaning if the size of the screen is 599 pixels or fewer, then maybe I'd like to take the body and give it a background color of green

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Media Query</title>
    <style>
      @media (min-width:600px){
        body {
          background-color: pink;
        }
      }

      @media (max-width: 599px){
        body{
          background-color: green;
        }
      }
    </style>
</head>
<body>
 <h1>Welcome to my page</h1>
</body>
</html>

🍕Layout

- FlexBox

If it's a smaller screen, maybe they'll look differently. And you don't just need to control a background color. You can control any CSS property you want just by using these media queries. You can say on a big screen, you want certain amounts of spacing or padding. You can even hide elements on smaller screens

if you want to by using a particular CSS property called the display property. That controls whether or not an element is even visible. And ultimately put together, this can help to make your pages a little bit more responsive. And there are a number of different media queries that we can apply to our page as well. We can check to see whether a mobile device is vertical or landscape.

We can check to see whether the user is viewing the page on their computer screen or if they've tried to print out the contents of the page as well. So there are a number of different options that we have to really control how a page is going to look. There are some other tools we have in our toolbox as well, though, for dealing with mobile responsiveness. And one of the tools built into the latest version of CSS is something called flexbox.

flexbox is quite helpful if we have multiple elements that we're all
trying to display on the same page at the same time that might overflow if we're not careful about how we do responsive design.

If we're really not careful let's imagine I have six elements that show up on my computer's monitor. When you translate that to a mobile screen,you can imagine they might all shrink down so that they're barely visible, something like this.

This is probably not what we want if we're trying to design a mobile responsive page, for example. So you might imagine, how can we do a little bit better?
Well, another thing we could do is take these elements and go ahead and keep them the same size, but make you have to scroll through them. This is now slightly better. The elements that are at least still visible. And they're large enough on the screen, but it would be nice not to have to scroll through them.

What would be really nice is given that we have all this extra space, I would like to be able to wrap around elements if I don't have enough space for them, such that if I'm translating these six elements to a mobile screen, they translate, but I get them in like two rows, for example, three on the top and three below. And flexbox is an easy way to be able to implement something
like this inside of our web pages. So let's take a look at what that might actually look like to add flexbox to our page.

able to wrap it around so that things can go onto multiple lines if I ever need to.

<head>
    <style>
     #container{
       display: flex;
       flex-wrap: wrap;
     }
/*this whole container is going to be a flexbox container.
And I'd like to wrap around elements if you ever reach the end.*/

     #container > div{
       background-color: springgreen;
       font-size: 20px;
       margin: 20px;
       padding: 20px;
       width: 200px;
     }
/*for the container all of the div inside of that container, again using this child 
     selector to get all of the divs that are inside of the container, I can add some CSS to that too.*/
    </style>
</head>
<body>
  <div id = "container">
<div>1. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>2. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>3. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>4. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>5. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>6. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>7. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>8. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>9. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>10. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>11. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
<div>12. 이것은 demo Flexbox 위한 샘플 문구입니다</div>
  </div>
</body>
</html>

- Grid

One common one is the grid layout for anytime you want to arrange things in a particular grid, where maybe certain columns need to be certain widths, but others can maybe be a little bit more flexible.

So if I want maybe three columns, I can specify that the first column should be 200 pixels. The second column should also be 200 pixels. And the third column can be automatically sized, just grow or shrink to fill the screen. So we'll say auto.

that's going to resize dynamically based on how wide or how narrow my screen happens to be. So as I shrink the screen, the third column shrinks with it.
As I grow the screen, it also grows alongside with how big this window happens to be.

<head>
    <style>
      #grid{
        background-color: pink;
        display: grid;
        padding: 20px;
        /* the important grid properties are grid column gap.
        How much space goes between each of the columns */
        column-gap: 20px; 
        row-gap: 10px;
        grid-template-columns: 200px 200px auto;
        /*grid-column-gap은 column-gap으로 이름이 바뀌었으니 이걸로 사용해야한다. 
        grid-row-gap is now row-gap
        grid-column gap is now column-gap
        grid-gap is now gap */
      }

      .grid-item {
        background-color: green;
        font-size: 20px;
        padding: 20px;
        text-align: center;
      }
    </style>
</head>
<body>
  <div id = "grid">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
  </div>
</body>
</html>
[Leetcode]2185. Counting Words With a Given Prefix
ORM project setting

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage