WEB2 - CSS

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
  1. inwhan
    완료
  2. 조유빈
    완료
  3. 아자가자
    210722 성공
    감사합니다~
  4. Chae
    완료
  5. 너클볼러
    감사합니다~
  6. 임코딩
    - mediaquery : 조건(ex> 화면 크기)에 맞춰 디자인을 가변 적용
    - @media(조건) { ... }
  7. OrzlHB
    완료!
  8. 도햐
    스스로 응용하는 게 시간은 걸리지만 너무 재밌어요!!
  9. 토민
    2021 7월 6일 완료
  10. 윤동욱
    20210706
  11. 박사장
    21.06.30 시청 완료
  12. 황철갑
    21.6.27
  13. 호찬
    2021.06.23.(수) 진행중
  14. B=loom
    21.06.21 이번시간이 제일 재미있었네요
  15. drinkdrink
    잘봣습니당^^
  16. 김휘철
    잘 봤습니다~
  17. 최세미
    2021 05 22
  18. 김새암
    2021.05.18
  19. GelandeWagen
    210518 ok
  20. RedMaple
    2021.05.14
  21. super1Nova
    210514
  22. 가보자
    K01_20210511
  23. 초딩 개발자
    2021/05/08
  24. 스문
    @media(조건){ 실행할 문장 }
  25. 물수제비
    저도 크롬을 사용하는데 max-width:800px를 설정하니까 1,000px일때 줄어들더라구요. 왜그런가해서 찾아봤더니 글꼴크기가 125%로 되있어서 그런거였어요. 100%로 설정하니까 800px일때 줄어들더라구요. 한번 확인해보세요.
    대화보기
    • Jeong Il Haan
      20210429
    • 이호진
      <!DOCTYPE html>
      <html>

      <head>
      <meta charset="utf-8">
      <title>WEB1 - CSS</title>
      <style>
      body {
      margin: 0px;
      }

      a {
      color: black;
      text-decoration: none;
      }

      h1 {
      font-size: 150px;
      margin: 0px;
      text-align: center;
      border-bottom: 1px solid gray;
      padding: 20px;
      }

      #grid ol {
      border-right: 1px solid gray;
      width: 120px;
      margin: 0px;
      padding: 20px;
      padding-left: 40px;
      }

      #grid {
      display: grid;
      grid-template-columns: 200px 1fr;
      }

      #article {
      padding-left: 25px;
      }

      @media(max-width: 800px) {
      @@@@@@@@@@@@media 적용이 안돼요
      @만 흰색이에요 media는 보라색인데...
      #grid {
      display: block;
      }
      ol {
      border-right: none;
      }
      h1 {
      border-bottom: none;
      }
      }
      </style>
      </head>

      <body>

      <h1><a href="index.html">WEB</a></h1>

      <div id="grid">
      <div>
      <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
      </ol>
      </div>

      <!--
      <ol>
      <h1><a href="index.html"><font color="red">WEB</font></a></h1>
      <li><a href="1.html"><font color="red">HTML</font></a></li>
      <li><a href="2.html"><font color="red">CSS</font></a></li>
      <li><a href="3.html"><font color="red">JavaScript</font></a></li>
      </ol>
      -->
      <div id="article">
      <h2 style="color:orange; font-size:50px;">WHAT is CSS ?</h2>

      <p>
      CSS stands for Cascading Style Sheets
      CSS describes how HTML elements are to be displayed on screen, paper, or in other media
      CSS saves a lot of work. It can control the layout of multiple web pages all at once
      External stylesheets are stored in CSS files<br>
      <img src="css_img.jpg" width="350px">
      </p>
      <p>
      CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
      </p>
      <p>
      The style definitions are normally saved in external .css files.<br>
      With an external stylesheet file, you can change the look of an entire website by changing just one file!
      </p>
      </div>
      </div>

      </body>

      </html>
    • chimhyangmoo
      2차 - 21.04.24
    • 별거
      2021.04.22 완료했습니다.
      @media (미디어쿼리를 이용해서 사이트를 꾸몄다)
    • 역사단 보존서고지원병
      2021.04.12 완료
    • 다랑어최고야
      4/12 done
    • 완료
    • midori
      감사합니다
    • nptncloud
      4/4 완료
    • 김도현
      완료
    • seonhong Kim
      2021.03.26 완료
    • 요모
      2021-03-25
    • 효몬드
      완료
    • 단디
      완료
    • 의도의 실현
      재밌어유
    • 졸대
      완료!
    • 흑메리카노
      쩐다.. media query 는 순서 상관없나요? 우선 작동하나요?
    • Patrick
      감사합니다.
    • 장유환
      웹크기 줄여도 반응을 안하길래 뭐가 문젠가...했더니
      @media(max-width:800px)에서 중괄호{}를 써버려가지고 반응을 안한거였네요.
      소괄호()로 바꾸니까 작동이 잘 됩니다.
    • rose_lex
      완료
    • 21.02.22 완료
    • 쿠키
      complete!!
      wonderful~~
    • cookie
      완료
    • cxxerry
      완료요!
    • gkalsdlf
      완료!!!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기