멋쟁이 사자처럼 at 한국교통대학교 7기

2019 KNUT X LIKE LION #7

코스 전체목록

닫기

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
  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 자세히 보기