WEB2 - CSS

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
  1. 나무빠따
    감사합니다!
  2. 최성현
    211008 - 2
  3. 최성현
    211007 - 1
  4. 야옹아왈해봐
    10.02
  5. 야옹냐옹
    21.09.28
  6. 김관호
    2021.09.23.
  7. 한헌이
    너무 재미있다

    아직은.........
  8. 이승민
    2021.09.21
  9. border 설정을 하면 글씨를 감싸는 테두리 말고 위에 한줄이 더 그어지는 현상이 발생해서 검사를 해봤더니 border# screen color temperature over 이렇게 뜨는데 해결 방법이 있을까요??
  10. 오수정
    2021.09.14 AM1:32
  11. 20210831
  12. rec8730
    20210830 슬슬 머리가 어지러워ㅠ
  13. 이나크로
    20210821
  14. 호놀룰루
    감사합니다
  15. 화이팅!!
  16. 서울 2020년 가을
    2021.8.3
  17. 커넥티드 허트
    2021.08.02 완료
  18. inwhan
    완료
  19. 조유빈
    완료
  20. 아자가자
    210722 성공
    감사합니다~
  21. 완료
  22. 너클볼러
    감사합니다~
  23. 임코딩
    - mediaquery : 조건(ex> 화면 크기)에 맞춰 디자인을 가변 적용
    - @media(조건) { ... }
  24. OrzlHB
    완료!
  25. 도햐
    스스로 응용하는 게 시간은 걸리지만 너무 재밌어요!!
  26. 토민
    2021 7월 6일 완료
  27. 윤동욱
    20210706
  28. 박사장
    21.06.30 시청 완료
  29. 황철갑
    21.6.27
  30. 호찬
    2021.06.23.(수) 진행중
  31. B=loom
    21.06.21 이번시간이 제일 재미있었네요
  32. drinkdrink
    잘봣습니당^^
  33. 김휘철
    잘 봤습니다~
  34. 최세미
    2021 05 22
  35. 김새암
    2021.05.18
  36. GelandeWagen
    210518 ok
  37. RedMaple
    2021.05.14
  38. super1Nova
    210514
  39. 가보자
    K01_20210511
  40. 초딩 개발자
    2021/05/08
  41. 스문
    @media(조건){ 실행할 문장 }
  42. 물수제비
    저도 크롬을 사용하는데 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
      감사합니다
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기