WEB2 - CSS

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. lygon
    2019-02-16 완료
  2. 주하쿠
    감사합니다
  3. boriku
    완료:)
  4. 지미츄
    감사합니당
  5. soul
    요즘 스마트폰 해상도는 가로 사이즈가 1000px은 가볍게 넘어서 아마 동작을 안 하는 것 같네요.
    대화보기
    • June
      용어는 어디선가 많이 들어서 익숙했는데 반응형 디자인을 구현 가능하게 하는 명령이라는 걸 처음 알았네요! 이거 아주 재밌네요 ㅎㅎ
    • 삼색냥
      완료
    • 김수빈
      완료
    • 저는 왜 @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) 이렇게 작성했더니 잘 동작하네요~
        반응형이 잘 안되시는 분들 한번 해보세요;;
      • 송진영
        이번엔 좀 잘 못했습니다 ㅠㅠ
        제 컴터가 이상한건지 좀 잘 안되더라구요
        그래도 새로운 거를 배웠다는거 자체가 기쁩니다! 감사합니다 ㅎㅎ
      • ㄴ너무나 감동입니다
        어제 알게 되어 저녁늦게 접하고 자다깨다를 반복하며 새벽 5시까지 봤습니다
        그리고 오늘도 아침에 일어나자마자 켰어요
        어떻게 이렇게 쉽게 알려주실 수가 있죠?
        생각해봤더니 생활코딩님은 정말 다른 타 강의란 다른 마인드를 가지고 계신거 같아요
        기존의 강사분들은 본인들의 앎을 전달하기 위해서 학생을 배려하는 마인드가 코딩님보다 적었서 그런게 아닌가 싶었어요
        강의를 들으면서 정말 학생들의 목적에 맞게 알게 해주고 싶어서 한다는 순수한 의도가 보여서 너무 너무 좋았습니다
        물론 자발적으로 후원하고 싶다는 강한 욕구도 함께요 저도 그런 기업을 만들고 싶었고 현실에서 이렇게 하고 있는 분을
        뵈어서 마음이 뜨거워졌습니다 잘 알고 가도록 하겠습니다
      • 반자동
        2주정도 노는 타임을 가지고 다시 시작하네요. 대부분은 까먹은 상태이지만 배우는 중간중간 다시 돌아오네요 !
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기