WEB2 - CSS

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

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

댓글

댓글 본문
작성자
비밀번호
  1. 육포
    20191015
  2. 육포
    20191015
  3. zozo
    20191009
  4. 안영우
    갈수록 난이도가 어려워지지만
    해결할수록 체감 난이도는 낮아지네요!
  5. 흥성무
    191006 00:02 흥성무 완료!
  6. 신현정
    완료
  7. 코딩만이 살길이다
    완료
  8. 감자
    완료
  9. Onold
    잘 들었습니다 ㅎㅎ
  10. 성규니
    완료
  11. 두텁떡
    ie11 에서 grid 를 지원하지 않아서
    #grid{
    border:5px solid pink;
    display:grid;
    grid-template-columns: 150px 1fr;
    }

    #grid{
    border:5px solid pink;
    display:grid;
    grid-template-columns: 150px 1fr;
    } 하니까
    박스는 생기는데 body에 있는 글자들이 서로 겹쳐서 보이는데 어떻게 해결해야할까요 ..
  12. 라미
    완료
  13. 몽글몽글솜사탕
    감사합니다
  14. 다에
    완료
  15. 7273322@naver.com
    완료
  16. 박창신
    완료
  17. 명탐정피카츄
    ㅇㄹ
  18. 효진
    완료
  19. 완료
  20. 정완료
    완료
  21. 피닭씨
    완룧
  22. 현우
    완료
  23. 서대원
    완료
  24. 쑤우
    수강완료. 감사합니다.
  25. 김베리
    190904
  26. 정은진
    완료
  27. 박준영
    2019-09-02 완료
  28. 밍트
    완료
  29. 크록
    완료
  30. JT_brand
    완료
  31. dldms6330
    감사합니다
  32. 윤민석
    완료
  33. 한조
    감사합니다!
  34. 녹차스무디
    드래그 하신뒤에 Tab을 눌러도 되고요.
    Ctrl + [ 또는 ] 로 좌 우로 움직일 수 있습니다. 도움되셨길 바랍니다
    대화보기
    • 이민형
      두번째 영상 1:55 때처럼 저렇게 한번에 줄 여러개 띄우는법 아시는분...
    • 떡이
      왜 제컴퓨터의 기본폰트와 생활코딩님의 기본폰트가 다른가요?
      영어폰트의 두께와 모양이 다른것같아 질문드립니다.
    • ㅇㅎㅅ
      감사합니다
    • 코딩가즈아
      감사합니다
    • 셰퍼드
      19.07.17
      꿀잼이네요
    • 방황의슈렉
      그리드 수업 듣고 이해하는데 2일 걸린거 같네요...
      들으면서 따라 하다가 안돼면 될 때까지 해보고...
      그래서 여러 가지를 이해할 수 있는거 같네요...
      힘들지만 잘 들었습니다. 감사합니다.
    • 드라고르
      190710. 완료
    • 초보코딩
      앗 그러네요^^ 감사합니다
      대화보기
      • 에코패킹
        div{
        border:5px soild gray;
        }

        soild -> solid
        로 수정하셔야 됩니다. ^^
      • 초보코딩
        <!DOCTYPE html>
        <html>
        <head>
        <title></title>
        <meta charset="utf-8">
        <style>
        #grid{
        border:1px solid pink;
        }
        div{
        border:5px soild gray;

        }
        </style>
        <body>
        <div id="grid">
        <div>서버소개</div>
        <div>계정생성</div>
        <div>다운로드</div>
        </div>
        </body>
        </head>
        </html>

        이렇게 했는데 전 왜 결과가 다르게 나오는거죠? 위에 동영상에서 보이는 회색선이 안보입니다.
      • hahahihiho
        시도해보니까 #grid div ol{...} 으로 해야 작동하는거 같더라구요
        grid 안 div 안에 있는 ol이기에 영향을 미치지 않는것 같아요
        대화보기
        • Librarian2
          제가 처음 배우는 것이라 잘못 이해한 것일 수도 있지만 궁금해서 질문드립니다.

          두 번째 영상의 마지막에서 유지보수의 효율성을 위해 ol{..}을 #grid ol{...}로 바꾸셨습니다. 그리고 그 목적은 미래에 본문(id='article') 안에 <ol>태그를 사용했을 때 문제가 생기지 않도록 하는 것이라고 하셨습니다.

          그런데 'article'는 'grid'안에 포함되어 있습니다. 따라서 #grid ol{...}은 여전히 article의 <ol>태그에 영향을 줄 것으로 예상됩니다. (핸드폰이여서 직접 코딩으로 검증은 안해봐서 확실하진 않아요.)
        • Weini Jeon
          슬슬 이해력이 떨어져가네요 CSS 처음부터 다시 한 번 봐야겠어요 ;
        • 허정우
          완료
        • udevapp
          저도 안되더라고요. 찾아보니 아톰 플러그인으로 css 자동완성이 있네요. 이거 해보니 잘됩니다.
          https://atom.io......css
          위로 가셔서 추가해도 되고 아톰패키지에 검색해서 추가해도 됩니다.
          추가하고 아톰 껐다가 켜서 실행해보세요
          대화보기
          • 무기력할지라도
            grid를 gird라고 쓴 오타 하나를 못 찾아서 몇 십분을 헤매다가 겨우 해결했네요 ㅠㅠ 오탈자 확인의 중요성을 배웠습니다...
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기