반응형 웹 실습

[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 7. 16. 23:01

728x90

반응형 웹 실습

결과

웹 크기에 따른 화면의 색상 변화를 반응형 웹을 이용하여 만들었습니다.

코드

1. p태그를 만들어 준다.

  <body>
    <p>미디어 쿼리 실습</p>
  </body>

2. 반응형 웹인 @media를 사용하여 크기에 따른 background-color를 설정해 줍니다.

    <style>
      @media screen and (min-width: 500px) {
        body {
          background-color: skyblue;
        }
      }
      @media screen and (max-width: 300px) {
        body {
          background-color: orange;
        }
      }
      @media screen and (max-height: 300px) {
        p {
          color: red;
        }
      }
      @media screen and (min-height: 500px) {
        p {
          background-color: green;
        }
      }
    </style>

https://github.com/DongHo-Kang/KDT-8-web/blob/c323f3a9fc40f75a3470133caf3bd363af5a8de7/230715_ResponsiveWeb/practice_mediaQuery.html

결과

웹 크기에 따른 색상 변화와 배열의 변화를 주었습니다.

1. 코드

1. div 태그를 3개 만듭니다.

  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>

2. 반응형 웹을 사용하여 색상이랑 배열을 설정합니다.(여기서 좌우로 설정하기 위해 많은 고민을 하였다.)

그래서 float 속성을 사용하여 좌에서 우로 설정을 하였다.

    <style>
      div {
        display: flex;
        width: 100px;
        height: 100px;
        background-color: skyblue;
        flex-direction: column;
        margin: 10px;
      }
      @media screen and (min-width: 700px) {
        div {
          background-color: black;
          float: left;
        }
      }
    </style>

float : 웹 요소를 문서 위에 떠 있게 만든다.
- block의 성격을 무시한다.
- 형제 구조로 구성되어 있다.
- left : 왼쪽으로 배치
- right : 오른쪽으로 배치
- none : 좌우 어느 쪽으로도 배치하지 않는다.

https://github.com/DongHo-Kang/KDT-8-web/blob/c323f3a9fc40f75a3470133caf3bd363af5a8de7/230715_ResponsiveWeb/practice1_mediaQuery.html

2. 코드

1. div 태그 3개를 하나의 div에 담습니다.

  <body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>

2. 좌우 / 상하로 정렬하기 위하여 container div를 flex(좌우)와 block(상하)으로 설정한다.

    <style>
      .container {
        display: flex;
      }

      .item {
        width: 100px;
        height: 100px;
        background-color: black;
        margin: 15px;
      }

      @media screen and (max-width: 700px) {
        .container {
          display: block;
        }

        .item {
          background-color: skyblue;
        }
      }
    </style>

https://github.com/DongHo-Kang/KDT-8-web/blob/c323f3a9fc40f75a3470133caf3bd363af5a8de7/230715_ResponsiveWeb/class_pr1_mediaQuery.html

두 개 방식 모두 기억해 두기!

결과

웹 크기에 따른 배열 및 header 크기 변화 (1번 실습이랑 2번 실습을 섞었습니다.)

1. 코드

1. 화면을 먼저 구성합니다.

<body>
        <header>
          <div class="inner">
            <div class="logo">
              <i class="fa-solid fa-igloo"></i>
            </div>
            <br />
            <ul class="menu">
              <li>메뉴1</li>
              <br />
              <li>메뉴2</li>
              <br />
              <li>메뉴3</li>
              <br />
              <li>메뉴4</li>
            </ul>
          </div>
        </header>
      </body>

2. display: flex와 block을 사용하여 좌우 및 상하를 결정하였고, justify-content : space-around를 통해 단어사이의 간격을 조정하고 align-items: center을 사용하여 중앙에 배열시켰습니다.

<style>
          :root {
            --nav-height-lg: 100px;
            --nav-height-sm: 60px;
          }

          body {
            margin: 0;
          }

          ul {
            margin: 0;
            padding: 0;
            list-style: none;
          }

          /* HEADER */
          header {
            width: 100%;
            height: var(--nav-height-lg);
            z-index: 100;
          }

          /* 768px 보다 클때의 header */
          header .inner {
            background-color: lightblue;
            height: 100%;
            display: flex;
            justify-content: space-around;
          }

          /* LOGO */
          header .inner .logo {
            color: white;
            font-size: 30px;
          }

          header .inner .menu {
            display: flex;
            align-items: center;
          }

          header .inner .menu li {
            display: flex;
            align-items: center;
          }

          /* 미디어 쿼리 작성 768px 이하일 때  */
          @media screen and (max-width: 768px) {
            header .inner {
              height: 60%;
              display: block;
            }
            header .inner .logo {
              margin-left: 250px;
            }
            header .inner .menu {
              display: block;
              align-items: center;
              margin-left: 250px;
            }
          }
        </style>

https://github.com/DongHo-Kang/KDT-8-web/blob/c323f3a9fc40f75a3470133caf3bd363af5a8de7/230715_ResponsiveWeb/practice2_mediaQuery.html

2. 코드

1. 화면 구성을 첫 번째 코드와 동일

2. 헤드의 크기를 설정할 때 :root에 변수로 설정을 하여 사용하였습니다.

    <style>
      :root {
        /*변수로 설정된 것이라 밑에서 사용할 수 있다. */
        --nav-height-lg: 100px;
        --nav-height-sm: 60px;
      }

      body {
        margin: 0;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      /* HEADER */
      header {
        width: 100%;
        height: var(--nav-height-lg);
        z-index: 100;
      }

      /* 768px 보다 클때의 header */
      header .inner {
        background-color: lightblue;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* LOGO */
      header .inner .logo {
        color: white;
        font-size: 30px;
        position: relative;
        right: 200px;
      }

      header .inner .menu {
        display: flex;
      }

      header .inner .menu li {
        margin: 0px 10px;
        font-weight: 800;
        cursor: pointer;
      }

      /* 미디어 쿼리 작성 768px 이하일 때  */
      header {
        height: var(--nav-height-sm);
      }
      header .inner {
        display: block;
      }
      header .inner .menu {
        display: block;
        background-color: azure;
        text-align: center;
      }

      header .inner .logo {
        position: static;
        line-height: var(--nav-height-sm);
        text-align: center;
      }

      header .inner .menu li {
        padding: 10px 0px;
        font-weight: 500;
      }
    </style>

https://github.com/DongHo-Kang/KDT-8-web/blob/c323f3a9fc40f75a3470133caf3bd363af5a8de7/230715_ResponsiveWeb/class2_mediaQuery.html

728x90

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

[포스코x코딩온] 웹 호스팅 서비스(netlify) (0)	2023.07.17
[포스코x코딩온]개발문화(Waterfall, Agile,Git) (0)	2023.07.17
[포스코x코딩온] 반응형 웹(Responsive Web) (0)	2023.07.16
[포스코x코딩온] Bootstrap (0)	2023.07.15
jQuery을 활용한 달력에서 선택한 날짜에 일정 추가하기 (0)	2023.07.14

ABOUT ME

개발로 가치를 찾는 개발자 개발로 가치를 찾는 개발자