WEB2 - CSS

반응형 디자인

반응형 디자인과 미디어 쿼리 소개

강의

 

 

소스코드

변경사항

 

 

 

미디어 쿼리를 이용해서 반응형 디자인 구현하기

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 드라고르
    190710. 완료
  2. 혹시 이런 것도 가능한가요?

    이건 크기에 따라 보이고 안보이고인데

    시간에 따라 보이고 안보이게 미디어쿼리로 가능한가요??
  3. 허정우
    완료
  4. Hyeon-Jun Ha
    완료!
  5. 졍기
    @media{ div{ } }

    }빠졌어요

    @media (min-width:700px) {
    div {
    display:none;
    }
    }
    대화보기
    • 달현
      강의에 나온 아래 구문이 왜 동작이 안될까요 ㅠㅠ?
      max로 고치면 동작합니다...

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title></title>
      <style>
      div {
      border:5px solid green;
      font-size:60px;
      }
      @media (min-width:700px) {
      div {
      display:none;
      }
      </style>
      </head>
      <body>
      <div>
      Reponsive
      </div>
      </body>
      </html>
    • 허공
      190504 감사합니다.
    • 최승윤
      완료!
    • 김성훈
      저도 soul님과 같이 압니다.
      그래서
      <meta name="viewport" content="width=device-width, initial-scale=1">
      이 코드를 넣어줘야 하는걸로 압니다.
      대화보기
      • cooipop
        완료요~~^^
      • 끝가지간다
        완료!
      • 주워니
        완료~~!
      • supernet
        감사합니다.
      • supernet
        감사합니다.
      • ZANYABI
        웹 개발자들은 모니터, 스마트폰, 미래의 가상현실과 같이 변화하고 발전하는 화면의 형태에 각각 최적화된 웹페이지를 만들고자 합니다. 이에 사용되는 기술이 미디어 쿼리입니다.

        미디어 쿼리는 <style> 태그 내에 @media( ) 코드를 통해 적용할수 있습니다. 예로 화면크기가 800px 보다 작을 경우를 가정하려면 @media(max-width:800), 화면 크기가 1500px보다 클 때부터를 가정하려면 @media(min-width=1501) 과 같이 ( ) 안에 조건을 입력하는 방식입니다.

        그 후 화면 크기에 따라 변화시키고 싶은 태그, 혹은 그리드는 <style> 태그 내에 있는 코드를 복사해 원하는대로 편집하면 간단합니다.
      • 왜 저는 사파리에서는 정상으로 작동 되는데 크롬에서는 밑으로 떨궈지지가 않고 왼편 ol쪽이 글씨만 작아지는 지 모르겠어요.
        댓글에 사진을 첨부하고 싶은데 사진은 못 올리는군요.
      • 완료!
      • 미니
        완료
      • Onemeteorite
        css 이렇게 쉽게 알려주시니 너무 감사해요!
      • 지친사람
        미디어쿼리가 안 되네요.
        아무리 봐도 틀린 부분이 없는데...
        좀 봐주세요^^

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>web-index.html</title>
        <style>
        a {
        color:black;
        text-decoration:none;
        }
        h1 {
        font-size:45px;
        text-align:center;
        border-bottom:1px solid gray;
        margin:0;
        padding:20px;
        }
        ul {
        border-right:1px solid gray;
        width:70px;
        margin:0;
        padding:20px;

        }
        #grid {
        display: grid;
        grid-template-columns: 140px 1fr;
        }
        #grid ul {
        padding-left:32px;
        }
        #grid #article {
        padding-left:15px;
        }
        @media (max-width: 800px){
        #grid {
        display: block;
        }
        ul {
        border-right:none;
        }
        h1 {
        border-bottom:none;
        }
        }
        </style>
        </head>
        <body>
        <h1><a href="index.html">WEB</a></h1>
        <div id="grid">
        <ul>
        <li><a href="1.html">html</a></li>
        <li><a href="2.html">css</a></li>
        <li><a href="3.html">javascript</a></li>
        </ul>
        <div id="article">
        <h2>web</h2>
        <p>
        The World Wide Web, commonly known as the WWW and the Web, is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs, such as https://www.example.com/), which may be interlinked by hypertext, and are accessible via the Internet.[1] The resources of the WWW may be accessed by users via a software application called a web browser.</p>
        <p>
        Web resources may be any type of downloadable media, but web pages are hypertext media which have been formatted in Hypertext Markup Language (HTML).[2] Such formatting allows for embedded hyperlinks which contain URLs and permit users to easily navigate to other web resources. In addition to text, web pages may contain images, video, audio, and software components that are rendered in the user's web browser as coherent pages of multimedia content.<a href="http://naver.com">web</a> is important.
        </p>
        </div>
        </div>
        </body>
        </html>
        추가로 글 올립니다.
        크롬을 쓰고 있는데... 댓글보고 할 건 다해봤습니다.
        아무래도 코딩문제라기보다는 다른문제인것 같아요!
      • Seohee Kim
        완료!
      • Steven
        감사합니다.^^ 잘배우고 갑니다.
      • 2019-02-16 완료
      • 주하쿠
        감사합니다
      • boriku
        완료:)
      • 지미츄
        감사합니당
      • 요즘 스마트폰 해상도는 가로 사이즈가 1000px은 가볍게 넘어서 아마 동작을 안 하는 것 같네요.
        대화보기
        • 용어는 어디선가 많이 들어서 익숙했는데 반응형 디자인을 구현 가능하게 하는 명령이라는 걸 처음 알았네요! 이거 아주 재밌네요 ㅎㅎ
        • 삼색냥
          완료
        • 김수빈
          완료
        • 저는 왜 @media 아래에 #grid를 넣으면 태그가 안걸릴까요?
          @media {max-width: 700px}{
          #grid {
          display: block;
          }
          }

          여기서 #grid의 색깔이 회색으로 변해버립니다.(아톰에서요.)

          아 괄호를 잘못쳤네요{} > () 로 수정
        • Aimhee
          완료!
        • gravity251
          좋은 강의 감사합니다!
        • whynitz
          감사합니다! 사이트 넓이에 따라 변화하는 코드를 알게 되서 즐겁습니다!

          다만 저는 이게 스마트폰에도 적용될 거라고 생각하고, 스마트폰은 화면 넓이가 적어도 800px보다는 작을 거라고 생각해서 미디어쿼리를 이용해 수정한 작은 화면용 사이트가 나올줄 알았는데 스마트폰에는 적용이 안돼요ㅠㅠ 왜 이런 걸까요?
        • 한강
          완료했습니다. ^^!
        • 투게디
          반응형 디자인 - 화면의 특성에 따라 웹페이지의 각 요소들이 반응해서 동작하도록 구현하는것
          미디어쿼리 - CSS에서 반응형 디자인을 구현할때 사용하는것
          @midia(어떠한조건) {
          selecter{
          어떠한조건에서 작동하게 할것(declaration)
          }
          }
        • HongKyu Lim
          감사합니다:)
        • 김정훈
          완료
        • Min Sang Shin
          완료
        • 돼지천재
          감사합니다.
        • Levitas
          싱기방기 !
        • kaonmir
          잘봤어요~
        • 키보드치는남자
          잘들었습니다
        • 슈퍼최강
          감사합니다
        • asdqwer123
          감사합니다.
        • 막시무스
          감사합니다.
        • hannah
          최소한으로 배워서 최대한으로 써먹을수 있는 강의 감사합니다. 알아야할것이 너무 많아서 닥치는대로 배우다가 아무것도 못써먹는 느낌이었거든요. 모든강의 정주행예정입니다.
        • icdoit
          감사합니다.
        • icdoit
          감사해요!
        • hado273
          신기하네요!
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기