WEB2 - CSS

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

https://caniuse.com/#feat=css-grid 

댓글

댓글 본문
  1. 다랑어최고야
    4/12done
  2. 역사단 보존서고지원병
    2021.04.12 완료
  3. nptncloud
    4/4 완료
  4. midori
    감사합니다
  5. 김도현
    완료
  6. seonhong Kim
    2021.03.26 완료
  7. 요모
    2021-03-25
  8. 허으... 점점 어려워지는군요
  9. 효몬드
    완료
  10. 단디
    완료
  11. 단순미
    완료
  12. 비버
    2021/03/02 완료
    그리드 적용을 확인하시는 분들은 익스플로러보다는 크롬에서 확인하시는게 좋을 것 같습니다.
    그리드 적용이 크롬에서는 확인이 가능했는데 익스플로러는 안되는 경우가 있었어요.
  13. 현누
    2021.03.02(17:26) 완료
  14. 졸대
    완료!
  15. Patrick
    감사합니다.
  16. josephP
    좋아요~
  17. 21.02.22 완료
  18. cookie
    완료
  19. cxxerry
    완료요!
  20. 노원신
    혹시 질문은 어디다 하면 되나요?
  21. rose_lex
    완료
  22. rose_lex
    완료
  23. gkalsdlf
    완료!!
    감사합니다 재밌네요!
  24. 산책자
    21.02.18 오늘 강의는 조금 어려웠어요! 주말에 실습하면서 한 번 쭉 복습해봐야겠습니다. 감사합니다.
  25. loveahav
    2021.2.16
  26. <h1><a href="index.html">Coding</h1>

    여기 'a 태그'가 안 닫혀있어서 닫으면 올라가네요.

    + 자바, 이클립스 다운로드 링크에 'p태그'도 안 닫긴거 같아요. 못 찾겠네요.

    코드 하나라도 잘 안 맞으면 작동이 안될 때가 있더라고요;;;
    동영상도 넣으시고 신기한거 많이 하셨네요 ㅎㅎ

    일 년 전 댓글이라 보실지 모르겠지만...

    https://validator.w3.org......put
    이 링크에서 코드 유효성 검사 해보시는 걸 추천드려요.
    대화보기
    • 고래상어
      2021-02-13 완료
    • 20단국
      2/8일 6일차
    • 賢者タイム
      한 페이지에 id값은 하나만 있다고 했는데, "grid" "article" 두 개의 id 값이 있어도 되는 건가요 ?
    • 흠냥냥
      혹시 윈도우에서만 조절이 되나요..?
      맥북 사용중인데 숫자 누르고 방향키 눌러도 안되네욤 ㅜㅜ
      대화보기
      • 서태
        210204
      • 아 정말요? ㅠㅠ 몰랐어여
        대화보기
        • 재밌씁니다!
        • 시장조사
          그런가요? ㅎㅎ 그럼 그런 것 같아요
          대화보기
          • ctrl+shift+I 인 것 같습니다!!
            대화보기
            • 시장조사
              아, 웹 검사 할 때 ctrl + shift + C 누르면 웹에 마우스만 올려도 어디 부분인지 바로 알 수 있습니당
            • 시장조사
              와.. 뿌듯하당 ㅋㅋㅋ 완료!
            • 완료
            • 완료
            • 임찬혁
              완료
            • Sohyun
              완료
            • 서준
              완료
            • 추장
              완료
            • 푸른벚꽃
              #grid ol 와 기존 ol에 padding-left:33px를 같이 주는 것이 결과가 같을 수 있으나 의미가 다릅니다.
              #grid ol은 <div id="grid">내의 ol에 적용되는 것이고 기존 ol에 padding-left:33px를 적으면 적으신 ol에만 적용됩니다.

              늘 말씀하시는 것이지만 극단적으로 가보죠.

              div내에 수많은 ol이 있다면 어떻게 하실 건가요?
              일일이 하나하나 ol에 padding값을 적을 건가요? 힘들고 중복이 많아 코드가 지저분해집니다.
              그때 style에 #grid ol를 적어놓고 수많은 ol들을 div로 묶어 여기에 id="grid"를 적는다면?
              이 이후로는 알아서 모든 ol에 grid값이 적용될 겁니다.
              대화보기
              • chimhyangmoo
                2021.01.10
              • younghwani
                완료!
              • 버석군
                좋은 강의 감사합니다.

                caniuse.com 활용하는 버릇을 잘 들여야겠습니다.

                오늘자 기준으로 grid 사용율은 95.45%로 나오고, modile browser에 대한 지원 상황이 함께 나오고 있어서 더 좋네요.
              • 걸어가는신사
                2021.01.09
              • bkhawk
                영상 마지막 부분으 ㄹ보니 알겠네요 인터넷 익스플로버전이 낮아 안되고 있었내요
                대화보기
                • bkhawk
                  <!DOCTYPE html>
                  <html lang="en" dir="ltr">
                  <head>
                  <meta charset="utf-8">
                  <title></title>
                  <style>
                  #grid{
                  border:5px solid pink;
                  display:grid;
                  grid-template-columns: 150px 1fr; 이부분부터 강사님이 해주신대로 안됩니다. 왜그런거지요 1fr 1fr 해도 안됩니다.
                  }
                  div{
                  border:5px solid gray;
                  }
                  </style>
                  </head>
                  <body>
                  <div id="grid">

                  <div>navigation</div>
                  <div>article33</div>
                  </div>
                  </body>
                  </html>
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기