왕초보 엔지니어, 코딩하다

코스 전체목록

닫기

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
  1. 7Nexusism
    아 너무 재밌다..220704 완료
  2. toonfac
    220703 오후 4시 38분 완료
  3. 22.06.29
  4. kingyoungdae
    6.29
  5. 김재원
    5/16
  6. 고배배
    220417
  7. 반응형 웹 이해 완료
  8. 주파랑
    스마트폰, 태블릿, 노트북, 그리고 더 넓은 모니터까지 현대에는 다양한 크기의 화면들이 있고 그를 위한 게 @media이다
  9. media 태그를 이용하여 일정 크기 이상이 되면 그에 따른 상태를 조절할 수 있다.
    현대 웹에 있어서 필수적인 요소.
  10. 너구리기린
    2022.03.28
  11. 범범범범
    굿, 미디어쿼리
  12. 이윤
    220319
  13. DH니스
    2022.03.13
  14. ^^
  15. keepgoing
    22.03.04
    인간이 정보를 습득하기 쉽도록 만드는 것이 기술이다.
    keepgoing
  16. 천코딩
    저도 아무반응이 없네요ㅜㅜ
  17. 조유진
    2022-03-01 완료
  18. new 개발자
    #grid ol 이 아니고 ol 로 하시면 될듯요!
    대화보기
    • new 개발자
      20220222 완료
    • tfx5470h
      2022-02-20 어제
    • 2022.02.18 완료
    • ywbyeol
      22.2.16
    • 드림보이
      2022.02.13. WEB2 - CSS - 반응형 디자인 파트 수강완료
    • 초보자바
      미디어쿼리를 이용해서 웹을 키는 미디어에 따라 반응적인 웹을 만들수 있다.
    • 초보자바
      22-02-11 시작
    • 미래에 후회안할 자신있어?
      2022-02-08 완료
    • 꿈꾸는고양이
      2022.02.07 완료
    • Jaime Kim
      감사합니다!
    • 정찬솔
      20220203
    • 20220122
    • 요Q르트
      2022/01/18 완료
    • 임앤강
      20220110
    • 달수
      20220110
    • 그니
      21.01.09 수강완료
    • 열정jk
      220108 감사합니다
    • 드솔
      2021-01-08
    • 지원이아빠
      제가 테스트 해보기로는,

      <style> 태그 내용중 제일 아래에 넣으니 정상작동하는데 제일 위에 넣으니 안되는것 같아요.

      아래 쓰인 태그가 media태그를 덮어 쓰는것 같습니다.
      대화보기
      • 김두현
        22.01.04
      • 쌀쌀이
        @media (max-width: 800px) {
        #grid{
        display: block;
        }
        #grid ol{
        border-right: none;
        }

        h1{
        border-bottom: none;
        }
        }

        이렇게 작성했는데 아무 반응이 없네요.. 뭐가 문제인거죠 ㅠㅠ
      • 20211223 정신차려
      • aristia
        2021.12.17
      • 롤링
        오전 10:08 2021-12-14
      • xYzQrs
        2021.12.12 시작
      • 소설가
        2021-12-09 완료
        감사합니다.
      • 2021.12.06 미디어 쿼리를 이용한 조건을 넣어 반응형 디자인하기 완료!
      • 민택기
        auto는 처음 알게 됐네요!
        감사합니다 ~ :)
        대화보기
        • butthy
          확인해보니 margin으로 공간이 잡혀있길래
          양쪽 margin에 남은 공간을 자동으로 인식하여
          서로 같은 값을 넣어주는(결과적으로는 공간적으로 가운데 정렬)
          margin-left:auto;
          margin-right:auto;
          이렇게 2개 추가해주시면 될 것 같습니다.

          text-align은 텍스트 가운데 정렬이지 목차 자체의 가운데 정렬이 아닌지라:)
          대화보기
          • 장돌
            21.11.30
          • 민택기
            21.11.28 완료
            화면이 800px보다 작을때 목차를 가운데 정렬 시키려면 어떤 태그를 추가로 넣어야 할까요?
            궁금합니다.

            검사 눌러보니 ol 태그 오른쪽에 주황색이 길게 잡혀있어서, 밑에 정도 생각해봤는데 역시나 안먹히네요 ㅠㅠ
            ol{
            border-right:none;
            margin-right:0;
            text-align:center;
            }
          • 21.11.23
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기