WEB2 - CSS

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 반자동
    2주정도 노는 타임을 가지고 다시 시작하네요. 대부분은 까먹은 상태이지만 배우는 중간중간 다시 돌아오네요 !
  2. 박규미
    edwith에서 선생님 수업이 도움되어서 이윽고 생활코딩까지 알게되어 WEBn의 자바스크립트 수업을 모두 듣고 또 반응형웹에 대한 수업까지 듣고나니... 궁금한 점이 생겨 문의드려요. 반응형웹이 가능한 풀페이지디자인의 프레임 워크(https://alvarotrigo.com......ko/)를 제 홈페이지로 작업해보았는데요. pc화면에서의 내용이 모바일상에서는 내용자체가 많다보니 이미지가 모바일상에서의 풀페이지디자인의 높이보다 크면 내용이 짤리는 문제가 있었어요. 혹 풀페이지디자인의 pc화면크기에서 풀페이지디자인의 meta태그(<meta name="viewport" content="width=device-width, initial-scale=1">)를 반응형의 모바일화면에서는 이 매타태그가 원페이지디자인 스타일의 매타태그(<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">)로 변환이 가능한지요... 원페이지라 함은 화면 높이가 풀페이지 프레임워크에서 화면에 딱 맞춘 높이가 아닌 아래로 스크롤이 가능한 화면높이로 전환되는 것이 가능한지 문의드리고 싶어요. 일단 제가 오랫동안 생각만 해오던 부분인데... 구글을 통해서는 이 부분에 대한 답을 찾지는 못했어요.
  3. 유휘열
    해결했습니다!^^

    media 쿼리에서

    #article 앞에 #grid를 부여하니까 바로 해결되네요!!!
  4. 유휘열
    a {
    text-decoration: none;
    }
    body {
    margin: 0px;
    }
    h1 {
    border-bottom: 0.1px solid lightsteelblue;
    text-align: center;
    margin: 0px;
    padding: 20px;
    }
    ul {
    border-right: 0.1px solid lightsteelblue;
    width: 100px;
    margin: 0px;
    padding: 20px;
    }
    img{
    display: block;
    margin-left: auto;
    margin-right: auto;

    }
    #grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    }
    #grid ul{
    padding-left: 33px;
    }
    #grid #article{
    padding-left: 20px;
    }
    @media(max-width:800px) {
    #grid{
    display: block;
    }
    ul {
    border-right: none;
    }
    h1{
    border-bottom: none;
    }
    #article{
    padding-left: 0px;
    }
    }

    css 전체 코딩입니다.
    참고해주세요.
    이고잉님 외에도 이 글을 보시는 분 누구라도 문제를 해결해주시면 감사하겠습니다.
  5. 유휘열
    이고잉님 안녕하세요
    미디어쿼리 공부하다가 궁금한 것이 있어서 질문드립니다!

    스크린크기가 800픽셀 이하일때
    그리드를 없애고
    아티클의 좌측 패딩값을 0픽셀로 준다고 했을 때 다음과 같이 코딩을 했습니다.

    @media(max-width:800px) {
    #grid{
    display: block;
    }
    ul {
    border-right: none;
    }
    h1{
    border-bottom: none;
    }
    #article{
    padding-left: 0px;
    }
    }

    이렇게 하면 그리드가 없어지긴 하는데
    아티클의 패딩값이 0픽셀로 되지가 않고 그대로 있습니다.
    어떤 문제가 있는걸까요?
    답변 기다리겠습니다 :)
  6. 마루
    소스는 강의에서 나오는데로 했는데 border를 써서 실행을 하면 다른건 되는데 이부분 적용이 안되는건 왜일까요??
  7. 소금돌
    media 쿼리를 공부해야 이유가 생겼네요..
  8. 스티치
    @media (max-width:800px){
    위에있는
    '}'를 하나 삭제해보세요!

    하나가 더들어간것 같아요
    대화보기
    • tianma
      감사합니다
    • 스페이스몽키
      조금씩 알아가는 기분이라 너무 좋습니다. 매번 강의 볼때마다 감사해요
    • 설렁탕
      재밌어영
    • Dreaming_Joyy
      Mediaquery가 반응형 디자인의 조건문 같은 개념이군요!! 굉장히 현대적인 코딩이군요!!
    • 프로젝팅
      border: transparent 추가 해보세여
      대화보기
      • highspirit7
        이고잉님 코드 그대로 해도 크롬 웹페이지 우측상단에 나타나는 픽셀 너비(A)가 기준이 되지는 않네요. 우측 마우스 클릭하여 검사 항목에서 열리는 창에서 확인할 수 있는 픽셀(B) 기준이네요.(이게 진짜 저희가 보는 창의 사이즈로 보이는데요.) 크롬 브라우저 너비 마우스로 조정할때 생기는(우측 상단에) 이 픽셀의 정체는 무엇인지 정말 모르겠습니다...
        A가 1000px일때, B는 800px으로 나타납니다. 아시는 분 있으면 알려주세요!
      • Lee Ho Yeon
        도움이 되었습니다 :)
        대화보기
        • 빠나나
          atom에서는 (파일명).html을 만드신후에 html을 치시고 tab을 누르시면 나와요
          대화보기
          • 김진엽
            감사합니다!
          • 이근환
            html snippets라는 것이 도움이 되실것 같은데 찾아서 에디터에 적용시켜보세요!
            대화보기
            • 도회상자
              기본 html 코드가 뚞딲 하고 나타나는 마법은 어떻게 해야하는건가요? 알려주세요!
            • jayxwoo
              잘 봤습니다^^ 감사합니다.
            • 제갈량
              이 미디어 쿼리만 잘 활용한다면
              기기 별로 따로 웹 작업을 할 필요가 없습니다.
              CSS로 제어를 하기 때문이죠.
              스마트폰에서 볼 때, 태블릿으로 볼 때, PC에서 볼 때 옵션을 다르게 줘서
              유동적으로 활용할 수 있는게 반응형 웹입니다.
            • 다시돌아온캣드
              다른페이지도 똑같이 작업하니 제일 먼저 작업한 페이지만 미디어쿼리가 지정 픽셀에서 작동 안하고
              다른페이지는 지정 픽셀에서 정상 작동 합니다.;;
              대화보기
              • 다시돌아온캣드
                900px 기준으로 하면 900px에서 작동안되고 800px 언저리에서 미디어쿼리가 적용되네요
              • 위버
                아래처럼 했는데 그리드 선이 계속 보이는데 왜안되는지 아시는분 계신가요.. ?? ㅠㅠ

                <style>

                body{
                margin:0;
                }

                a {
                color:black;
                text-decoration: none;
                }

                h1 {
                font-size:45px;
                text-align:center;
                border-bottom:1px solid gray;
                margin:0;
                padding:20px;
                }

                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;
                }

                #grid #article{
                padding-left:25px;
                padding-right: 30px;
                }

                }

                @media (max-width:800px){
                #grid{
                display: block;
                }

                ol{
                border-right:none;
                }

                h1 {
                border-bottom:none;
                }


                }

                </style>
              • 옥슬이
                감사합네다
              • 제로스
                @media(max-width:800px){
                #grid{
                display : block;
                }
                }
              • 반응형 재미있게 수강했습니다~
                슬슬 뇌에 과부하 걸리려 하지만 계속 써먹어봐야겠어요
              • nomad코딩
                오늘 다시 해보니까 되네요~
                대화보기
                • nomad코딩
                  @media(max-width:800px){
                  #grid{
                  display:block;
                  }
                  라고 했음에도 1000px을 기준으로 미디어쿼리가 적용됩니다 ㅜㅜ 왜그럴까요?
                • Mingi Son
                  180209 감사합니다!
                • 감사합니다^^!!!
                • Hyun Woo Lee
                  디자인 단계에서 반응형까지 생각하게 된다면 시간이 어마어마하게 걸리겠어요!!
                  그래도 PC가 아닌 다른 디바이스를 사용한다고 했을 때 사용자의 편리성을 생각한다면
                  꼭 적용해야하는 기술인 것 같아요.
                • Meflow
                  반응형 웹에 대해 말만 많이들었지 막상 이렇게 해보니 너무 재밌습니다!
                  항상 감사합니다!
                • 잘할
                  180224 완료!

                  반응형웹을 만들게 되다니 너무 감격스럽습니돠! 감사합니다!
                • 나비다
                  감사합니다.
                • seokhee
                  재밌어요!
                • BY Chin
                  감사합니다
                • PassionOfStudy
                  18-01-14 1일차 - 8번째 강의

                  수강완료!


                  항상 반응형웹 말만 들었고, 템플릿을 가져다가 쓸 생각만 해왔습니다.
                  템플릿을 가져오면 CSS부분이 너무 복잡해서 포기하곤 했는데....
                  mediaquery라는 것을 이용하는 것이었군요. ㅎ
                  너무 알기 쉽게 설명해 주셔서 감사합니다.
                • goosen
                  많이 배우고갑니다 감사해요^ ^
                • 굉장하네요. 고맙습니다 ^^
                • 이유리
                  감사합니다.
                • PC에서 동작이 잘 됩니다.
                  스마트폰에서도 효과를 볼 수 없을까요?
                • 이주형
                  감사합니다~!^_^
                • 저는 미디어 쿼리에서

                  ol{ border-right: none; }으로 하면 선이 안 없어지고,
                  #grid ol{ border-right: none; } 이렇게 앞에 #grid를 붙여야 선이 없어지네요.

                  id가 클래스나 태그보다 우선순위에 있어서 그런건가요? 에디터는 아톰 쓰고 있습니다. 이고잉님과 버전이 달라서 그런걸까요? 물론 h1태그는 그냥 선이 없어집니다.
                • keepgoing
                  아 해결되었습니다. 감사합니다^^
                • keepgoing
                  저는 아톰을 쓸때 자동추천기능이랑 태크 색도 안바뀌는데 설정하는 법이 따로 있나요~?ㅠㅠ
                • nevertoolate
                  제 남편 웹사이트 보니 반응형 미디어로 안되어 있네요.
                  음~~ 열공해서 바꿔 주어야 겠네요.
                • 사람
                  느낌이 다른언어의 조건문 같은 느낌도 드네요.
                • 신명진
                  와...
                • 박신우
                  재밌어요! 미디어 쿼리 기억해두겠습니다
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기