WEB2 - CSS

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
  1. 역사단 보존서고지원병
    2021.04.12 완료
  2. 다랑어최고야
    4/12 done
  3. 완료
  4. midori
    감사합니다
  5. nptncloud
    4/4 완료
  6. 김도현
    완료
  7. seonhong Kim
    2021.03.26 완료
  8. 요모
    2021-03-25
  9. 효몬드
    완료
  10. 단디
    완료
  11. 의도의 실현
    재밌어유
  12. 졸대
    완료!
  13. 흑메리카노
    쩐다.. media query 는 순서 상관없나요? 우선 작동하나요?
  14. Patrick
    감사합니다.
  15. 장유환
    웹크기 줄여도 반응을 안하길래 뭐가 문젠가...했더니
    @media(max-width:800px)에서 중괄호{}를 써버려가지고 반응을 안한거였네요.
    소괄호()로 바꾸니까 작동이 잘 됩니다.
  16. rose_lex
    완료
  17. 21.02.22 완료
  18. 쿠키
    complete!!
    wonderful~~
  19. cookie
    완료
  20. cxxerry
    완료요!
  21. gkalsdlf
    완료!!!
  22. 산책자
    21.02.18 미디어쿼리! 어제 크몽 보다가 반응형 웹사이트라는 개념을 알게
    되었는데 오늘 강의에서 딱 나오네요 ㅎㅎ 감사합니다!
  23. 야수의심장을가진인간
    코드 쓰신거 보여주실 수 있으신가요
    대화보기
    • 그대로 적었는데도 안되는 것이라면 인터넷익스플로러라서 안되는 것일수도 있어요
      인터넷익스플로러가 새로운 기능을 지원하지 않는 경우가 꽤 있더라구요
      같은 파일이라도 크롬으로 해보시면 될 수도 있습니다!
      대화보기
      • 안녕하세요~질문하나 드려도 될까요?
        그리드 적용이 계속 안되는데 이유가 있을까요?.?
        코드를 잘못썼나하여 소스코드를 그대로 적었는데에도 그리드 적용이 되지않네요
        인터넷 익스플로어로 열었습니다.무엇이 문제인지 몰라서 질문이 모호한점 양해부탁드려요ㅜ
      • 20단국
        2/14일 7일차
      • 고래상어
        21-02-13 완료
      • 무넌
        안녕하세요 질문있습니다.

        <style>
        a {
        color:black;
        text-decoration:none;
        }
        body {
        margin:0px;
        }
        h1 {
        font-size: 60px;
        text-align: center;
        border-bottom:1px solid gray;
        margin:0;
        padding:20px;
        }
        #article{
        padding: 25px;
        }
        @media(min-width:800px) {
        #grid{
        display: grid;
        grid-template-columns: 150px 1fr
        }
        #grid ol {
        border-right:1px solid blue;
        width:80px;
        margin:0px;
        padding:32px;
        }
        }
        </style>

        이 코드로 해도 WEB 아래 언더라인 제외하고는 동일하게 표시되는데요 이 코드가 더 나쁜 이유가 있다면 알고 싶어요.
      • 서태
        210204
      • 완료오~
      • 시장조사
        자꾸 오류 나서 한 시간 동안 쳐다봤는데,, 세미콜론 하나 때문이었네요.. 현타 오지만 완료!!
      • winwin22
        질문 있습니다.
        min-width: 800px로 설정을 하면 1200px에서 디스플레이가 사라지고,
        max-width: 500px로 설정을 하면 750px에서 사라지는데요.
        픽셀값이 크롬에서는 다르게 적용이 되는지요? 뭐가 문제인지 모르겠네요.
      • 완료
      • 완료
      • 임찬혁
        완료
      • 선린 이원석
        완료
      • 서준
        완료
      • 추장
        완료
      • 김세훈
        안녕하세요.
        정말 감사드립니다. 말씀해주신데로 했더니 문제가 해결이 되었습니다.
        추가적으로 몇 가지 궁금한게 있어 또 여쭤보고 싶습니다.

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

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

        질문 답해주셔서 너무너무 감사드립니다 :)
        대화보기
        • 개발자 도구로 보시면 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
                감사합니다.
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기