WEB2 - CSS

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 돼지천재
    감사합니다.
  2. Levitas
    싱기방기 !
  3. kaonmir
    잘봤어요~
  4. 키보드치는남자
    잘들었습니다
  5. 슈퍼최강
    감사합니다
  6. asdqwer123
    감사합니다.
  7. 막시무스
    감사합니다.
  8. hannah
    최소한으로 배워서 최대한으로 써먹을수 있는 강의 감사합니다. 알아야할것이 너무 많아서 닥치는대로 배우다가 아무것도 못써먹는 느낌이었거든요. 모든강의 정주행예정입니다.
  9. icdoit
    감사합니다.
  10. icdoit
    감사해요!
  11. hado273
    신기하네요!
  12. 완료
  13. 굿굿
    최고입니다
    잘만작동합니다
    그대로해도좋을거같아요
  14. 727211
    실습하다보니 스타일 태그 내에 미디어쿼리가 아래쪽에 위치해야 적용되는 것 같습니다.
    스타일태그 안 제일 위에 미디어쿼리를 넣으니, 아무리해도 조건이 안걸려요 ㅜ 가장 아래에 선언된걸 바라보는지ㅠㅠ
  15. 727211
    맥은 커맨드 누른상태로 드래그, 윈도우는 컨트롤누른상태로 여러개 드래그요
    대화보기
    • 한라봉
      완료
    • 사파리는 크기 확인 어떻게 하죠?
    • Gu Ni Jang
      너무 재밌는거~~~!! 자꾸 시작하고 멈추고 반복했는데, WEBn 시리즈는 다 공부할거에요. 스스로 코드를 짜는 그날까지!!
    • naninem
      media query는 style 태그 안에서 제일 밑에 있어야 정상 작동 하는 거 같군요 여러분!
    • 임재현천재
      완료!감사합니다!
    • 잘 봤습니다. 감사합니다
    • 김양지
      와 정말 신기해요 감사합니다. 새로운 기술 배워가지고 갑니다!
    • realnine
      마우스 커서 드래그 하는거 선택적으로 하는거 어떻게 하는거에요?
    • darkghost
      저는 익스플로러 11을 사용했는데 코딩을 따라 했었지만 어디가 잘못 됐는지 결과가 다르게
      나왔네요... 나중에 문제를 한번 봐야 될것 같아요...
    • Lee Sangjun
      음.. 알려주신 과제는 따라해서 해결했지만..
      거기에 혼자 더 뭔가 해보려 하니 진척이.. 매우 어렵네요.. ㅠㅠ
      일단 다음장 고고
    • 시간속으로
      완료
    • 이시권
      많은 학습과 실습 경험이 중요한 분야이지만, 이고잉님의 강의를 통해 기초를 쉽게 이해하고 학습에 대한 접근성이 다양해지고 담이 높지 않음을 느낍니다. 배움의 끝이 나눔이라는 말이 생각나네요. 항상 너무 감사드리며, 저 또한 심화학습을 통해 나눔에 기여토록 애쓰겠습니다.
    • aimerthis(이성민)
      잘봤습니다.
    • 감사합니다!
    • 김민성
      @media (max-width:600px) 이렇게 작성했을 경우 저 같은 경우에는 작동을 안했습니다.
      그래서 구글링한 결과
      @media only screen and (max-width:600px) 이렇게 작성했더니 잘 동작하네요~
      반응형이 잘 안되시는 분들 한번 해보세요;;
    • 송진영
      이번엔 좀 잘 못했습니다 ㅠㅠ
      제 컴터가 이상한건지 좀 잘 안되더라구요
      그래도 새로운 거를 배웠다는거 자체가 기쁩니다! 감사합니다 ㅎㅎ
    • ㄴ너무나 감동입니다
      어제 알게 되어 저녁늦게 접하고 자다깨다를 반복하며 새벽 5시까지 봤습니다
      그리고 오늘도 아침에 일어나자마자 켰어요
      어떻게 이렇게 쉽게 알려주실 수가 있죠?
      생각해봤더니 생활코딩님은 정말 다른 타 강의란 다른 마인드를 가지고 계신거 같아요
      기존의 강사분들은 본인들의 앎을 전달하기 위해서 학생을 배려하는 마인드가 코딩님보다 적었서 그런게 아닌가 싶었어요
      강의를 들으면서 정말 학생들의 목적에 맞게 알게 해주고 싶어서 한다는 순수한 의도가 보여서 너무 너무 좋았습니다
      물론 자발적으로 후원하고 싶다는 강한 욕구도 함께요 저도 그런 기업을 만들고 싶었고 현실에서 이렇게 하고 있는 분을
      뵈어서 마음이 뜨거워졌습니다 잘 알고 가도록 하겠습니다
    • 반자동
      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">)로 변환이 가능한지요... 원페이지라 함은 화면 높이가 풀페이지 프레임워크에서 화면에 딱 맞춘 높이가 아닌 아래로 스크롤이 가능한 화면높이로 전환되는 것이 가능한지 문의드리고 싶어요. 일단 제가 오랫동안 생각만 해오던 부분인데... 구글을 통해서는 이 부분에 대한 답을 찾지는 못했어요.
    • 유휘열
      해결했습니다!^^

      media 쿼리에서

      #article 앞에 #grid를 부여하니까 바로 해결되네요!!!
    • 유휘열
      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 전체 코딩입니다.
      참고해주세요.
      이고잉님 외에도 이 글을 보시는 분 누구라도 문제를 해결해주시면 감사하겠습니다.
    • 유휘열
      이고잉님 안녕하세요
      미디어쿼리 공부하다가 궁금한 것이 있어서 질문드립니다!

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

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

      이렇게 하면 그리드가 없어지긴 하는데
      아티클의 패딩값이 0픽셀로 되지가 않고 그대로 있습니다.
      어떤 문제가 있는걸까요?
      답변 기다리겠습니다 :)
    • 마루
      소스는 강의에서 나오는데로 했는데 border를 써서 실행을 하면 다른건 되는데 이부분 적용이 안되는건 왜일까요??
    • 소금돌
      media 쿼리를 공부해야 이유가 생겼네요..
    • 스티치
      @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라는 것이 도움이 되실것 같은데 찾아서 에디터에 적용시켜보세요!
              대화보기
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기