WEB2 - CSS

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 스페이스몽키
    조금씩 알아가는 기분이라 너무 좋습니다. 매번 강의 볼때마다 감사해요
  2. 설렁탕
    재밌어영
  3. Dreaming_Joyy
    Mediaquery가 반응형 디자인의 조건문 같은 개념이군요!! 굉장히 현대적인 코딩이군요!!
  4. 프로젝팅
    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
                제 남편 웹사이트 보니 반응형 미디어로 안되어 있네요.
                음~~ 열공해서 바꿔 주어야 겠네요.
              • 사람
                느낌이 다른언어의 조건문 같은 느낌도 드네요.
              • 신명진
                와...
              • 박신우
                재밌어요! 미디어 쿼리 기억해두겠습니다
              • Wallace Lee
                신기해요^^
              • I love computer
                와우 그렇군요.
                저는 그냥 알아서 웹브라우저가 다~ 해주는 줄 알았는데...
                생각보다 귀찮은 작업이네요(그냥 라이브러리 써야지 ㅋ)
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기