생활코딩

Coding Everybody

코스 전체목록

닫기

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. Seohee Kim
    완료!
  2. Steven
    감사합니다.^^ 잘배우고 갑니다.
  3. lygon
    2019-02-16 완료
  4. 주하쿠
    감사합니다
  5. boriku
    완료:)
  6. 지미츄
    감사합니당
  7. 요즘 스마트폰 해상도는 가로 사이즈가 1000px은 가볍게 넘어서 아마 동작을 안 하는 것 같네요.
    대화보기
    • 용어는 어디선가 많이 들어서 익숙했는데 반응형 디자인을 구현 가능하게 하는 명령이라는 걸 처음 알았네요! 이거 아주 재밌네요 ㅎㅎ
    • 삼색냥
      완료
    • 김수빈
      완료
    • 저는 왜 @media 아래에 #grid를 넣으면 태그가 안걸릴까요?
      @media {max-width: 700px}{
      #grid {
      display: block;
      }
      }

      여기서 #grid의 색깔이 회색으로 변해버립니다.(아톰에서요.)

      아 괄호를 잘못쳤네요{} > () 로 수정
    • Aimhee
      완료!
    • gravity251
      좋은 강의 감사합니다!
    • whynitz
      감사합니다! 사이트 넓이에 따라 변화하는 코드를 알게 되서 즐겁습니다!

      다만 저는 이게 스마트폰에도 적용될 거라고 생각하고, 스마트폰은 화면 넓이가 적어도 800px보다는 작을 거라고 생각해서 미디어쿼리를 이용해 수정한 작은 화면용 사이트가 나올줄 알았는데 스마트폰에는 적용이 안돼요ㅠㅠ 왜 이런 걸까요?
    • 한강
      완료했습니다. ^^!
    • 투게디
      반응형 디자인 - 화면의 특성에 따라 웹페이지의 각 요소들이 반응해서 동작하도록 구현하는것
      미디어쿼리 - CSS에서 반응형 디자인을 구현할때 사용하는것
      @midia(어떠한조건) {
      selecter{
      어떠한조건에서 작동하게 할것(declaration)
      }
      }
    • HongKyu Lim
      감사합니다:)
    • 김정훈
      완료
    • Min Sang Shin
      완료
    • 돼지천재
      감사합니다.
    • Levitas
      싱기방기 !
    • kaonmir
      잘봤어요~
    • 키보드치는남자
      잘들었습니다
    • 슈퍼최강
      감사합니다
    • asdqwer123
      감사합니다.
    • 막시무스
      감사합니다.
    • hannah
      최소한으로 배워서 최대한으로 써먹을수 있는 강의 감사합니다. 알아야할것이 너무 많아서 닥치는대로 배우다가 아무것도 못써먹는 느낌이었거든요. 모든강의 정주행예정입니다.
    • icdoit
      감사합니다.
    • icdoit
      감사해요!
    • hado273
      신기하네요!
    • 완료
    • 굿굿
      최고입니다
      잘만작동합니다
      그대로해도좋을거같아요
    • 727211
      실습하다보니 스타일 태그 내에 미디어쿼리가 아래쪽에 위치해야 적용되는 것 같습니다.
      스타일태그 안 제일 위에 미디어쿼리를 넣으니, 아무리해도 조건이 안걸려요 ㅜ 가장 아래에 선언된걸 바라보는지ㅠㅠ
    • 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) 이렇게 작성했더니 잘 동작하네요~
        반응형이 잘 안되시는 분들 한번 해보세요;;
      • 송진영
        이번엔 좀 잘 못했습니다 ㅠㅠ
        제 컴터가 이상한건지 좀 잘 안되더라구요
        그래도 새로운 거를 배웠다는거 자체가 기쁩니다! 감사합니다 ㅎㅎ
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기