WEB2 - CSS

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
  1. winwin22
    질문 있습니다.
    min-width: 800px로 설정을 하면 1200px에서 디스플레이가 사라지고,
    max-width: 500px로 설정을 하면 750px에서 사라지는데요.
    픽셀값이 크롬에서는 다르게 적용이 되는지요? 뭐가 문제인지 모르겠네요.
  2. Noah
    완료
  3. mymie
    완료
  4. 임찬혁
    완료
  5. 선린 이원석
    완료
  6. 서준
    완료
  7. 추장
    완료
  8. 김세훈
    안녕하세요.
    정말 감사드립니다. 말씀해주신데로 했더니 문제가 해결이 되었습니다.
    추가적으로 몇 가지 궁금한게 있어 또 여쭤보고 싶습니다.

    1.
    ol의 가로범위를 지정하실 때 500px로 하셨는데 여기에 다른 아무 숫자를 입력해도 동일하게 결과물이 출력이 되었습니다.
    말씀해주신데로 ol이 가로 그 자체이기 때문에 크기를 부여한다는 데에 의미가 있는지 궁금합니다.

    2. margin-left: auto; margin-right:auto;를 적용하였는데요.
    제가 그냥 느끼기에는 좌우 마진값을 자동으로 놓으라는 것 같은데
    이게 무슨의미이기에 가운데 정렬이 되는지 궁금합니다.

    질문 답해주셔서 너무너무 감사드립니다 :)
    대화보기
    • PAKA
      개발자 도구로 보시면 ol의 가로 범위가 화면 끝까지인걸 확인할 수 있을건데
      이 상태는 좌우 margin이 존재하지 않는 상태입니다.
      (ol이 가로 그 자체이기 때문에 왼쪽으로 정렬하라고 하나 오른쪽으로 정렬하라고 하나 의미가 없습니다)

      그렇기 때문에 먼저 ol의 가로 범위를 지정해주셔야 합니다.
      예시)
      <ol style="width: 500px">

      그 다음

      ol {
      margin-left: auto; margin-right:auto;
      }
      을 적용하면 될것 같습니다.

      웹 입문 3일차라 이렇게 하는게 정석인지는 잘 모르겠네요.
      float 는 left, right만 있기 때문에 이렇게 문제를 해결해봤어요.
      대화보기
      • 김세훈
        안녕하세요 강의 듣고난 이후 질문이 있어 댓글남깁니다.

        현재 본문에 대해서
        화면을 줄일 경우, 목록을 삭제하지 않고 목록을 가운데 정렬을 하고 싶습니다.
        그래서 나름데로
        ol{
        display: block;
        text-align: center;
        }
        라고 썼는데 실행이 되지 않았습니다.

        이에 대해 개발자 도구에 들어가보니 텍스트가 있는 padding 안의 부분만 정렬이 된 상태인데요.
        혹시 어떻게 하면 목록을 가운데 정렬 할 수 있는지 궁금합니다!
      • 정혜선
        와 정말정말 감사합니다 ㅠㅠ 앞으로 잘 한거같은데 안되면 오타부터 확인해야겠네요!!! 정말 감사합니다!!!!
        대화보기
        • chimhyangmoo
          2021.01.11
        • 버석군
          좋은 강의 자료 감사드립니다.
        • 버석군
          style.css 34행에
          grid가 아니라 gird로 오타가 있네요.
          이것 때문인 것 같습니다.
          대화보기
          • 정혜선
            ㅠㅠ 미디어쿼리를 통해 display: block라고 분명 설정을 했는데, 선은 없어지는데 grid가 안없어집니다.... 혹시 시간나시는 분은 뭐가 문제인지 알려주시면 감사하겠습니다 (해결!!!)
          • younghwani
            완료!
          • 걸어가는신사
            2021.01.09
          • T.Hwang
            완료~
          • jeisyoon
            감사합니다.
          • 지현
            media query @media 화면 조정 시 어떠한 조건을 만족할 때만 반응하도록 5일차
          • 즐거운너구리
            오늘도 감사했습니다:)
          • 이현수
            2021.01.07(목)
          • 얍얍얍
            ㅇㄹ
          • 이동훈
            @media screen and (max-width: 800px) {..}
            //screen and를 생략하면 default 값(all)이 적용됨.
          • 2020.12.28 완료~
          • 서울사이버대학을다니고
            800이 되었을때 그리드가 생기게 해봤습니다
          • 서울사이버대학을다니고
            <!doctype html>
            <html>
            <head>
            <title>WEB1 - CSS</title>
            <meta charset="utf8">
            <style>
            h1 {
            font-size:45px;
            text-align: center;
            margin:0;
            padding:20px;

            }

            @media(min-width:800px){
            h1 {
            font-size:45px;
            text-align: center;
            border-bottom:1px solid gray;
            margin:0;
            padding:20px;
            }
            a {
            color: red;
            }
            ol{
            border-right:1px solid gray;
            width:100px;
            margin:0;
            padding:20px;
            }
            #grid{
            display :grid;
            grid-template-columns: 150px 1fr;
            }
            #grid ol{
            padding-left: 33px;
            }
            #article{
            padding-left: 25px;
            }
            }

            </style>
            </head>

            <body>
            <h1><a href="index.html">WEB</a></h1>
            <div id="grid">
            <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
            </ol>
            <div id ="article">
            <h2>css</h2>
            <p>
            Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
            </p>
            </div>
            </div>
            </body>
            </html>
          • 샴파뉴
            2020.12.26
          • 고니스타크
            5일차
            화면사이즈에 따라 출력방법을 다르게 하는 반응형웹을 위한 미디어 쿼리
            @media(max-width:500px)
            {
            }
          • 모히또
            완료!
          • 호놀률류
          • 티치
            2020.12.18
          • 생활둘기
            2020 12 17
          • Sung San Kim
            2020.12.17. 감사합니다.
          • 율빵
            감사합니다 정말
          • 스쳐간바람
            감사합니다
          • 조성호
            2020.12.11 완료
            소중한 시간 감사합니다!
          • 지두두
            20201208
            미디어 쿼리를 더 알아봐야겠다
          • 20201129
          • Hyun Woo Ju
            20201124 학습완료
          • 윤지
            2020-11-23 확인완료
          • 듀리
            2020.11.19
          • 보드라운고양이
            재미있어유
          • 2020.11.02.MON.
          • 훼리
            2020/11/01 픽셀 800px이 어느 기준일까.
          • 201027
          • 271020
          • 현콜
            2020/10/21
          • Patrick
            좋은 강의 감사합니다!!!~
          • 바부대지
            2020.10.09 22:48
            @media ≒ 조건문(ex- if문)
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기