생활코딩

Coding Everybody

코스 전체목록

닫기

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

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

댓글

댓글 본문
  1. 민택기
    21.11.28 완료
  2. 장돌
    21.11.28
  3. 21.11.23
  4. survive
    21.11.21
  5. 아니그게아니고
    21.11.18
    점점 배운게 쌓여가면서 어려워지네요
    그래도 혼자 복습하면서 나아가겠습니다
  6. 난 코딩이 좋아
    최고에요!!!
  7. 이 진우
    감사합니당
  8. 검정고무신
    감사합니다.
  9. 다스비다냐
    2021.10.20
  10. 다스비다냐
    2021.10.19
  11. 나무빠따
    감사합니다!
  12. 최성현
    211005 - 2
  13. 야옹아왈해봐
    10.02
  14. 최성현
    210930 - 1
  15. 야옹냐옹
    21.09.28
  16. 김예찬
    grid 정렬은 display : grid를 준 요소의 자식요소를 정렬합니다. 그리고 자식요소는 꼭 div가 아니어도 됩니다.
    두번째 영상에서 h2태그와 p태그를 div로 묶어주지 않았다면 id=grid인 div태그의 자식은 ol,h2,p 3개가 되고 이렇게 되면 h2태그와 p태그는 서로 다른 컬럼을 차지하게 될 것입니다. 하지만 우리는 영상에서처럼 h2와 p가 한 컬럼에 배치되게 해주고 싶기 때문에 h2와 p를 div로 묶은 것입니다.
    대화보기
    • 김관호
      2021.09.23.
    • Carrot
      2021.09.22
    • Carrot
      ol 태그는 이미 ol안에 자식 태그 ul을 포함하고 있기에 따로 div가 필요하지 않습니다. 그러나 h2태그는 p태그와 함께 움직여야 하지만 둘을 묶는 부모 태그가 따로 없어 div 태그로 묶어줘야 합니다.

      <div id="grid">
      <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 id="article">
      <h2>CSS</h2>

      id=article과 id=grid 의 차이점은
      id=grid가 부모, id=article이 자식이라는 점입니다. grid 안에 속한 것이 article이죠.

      순서는
      1. h2태그와 p태그 묶는 <div id=article> 생성
      둘 태그를 묶어주는 < div id=grid> 생성입니다.
      대화보기
      • 이승민
        2021.09.21
      • 김보경
        질문이 있습니다.
        위의 그리드 동영상에는 NAVIGATION과 ARTICLE 두개를 각각 div로 묶고 gird라는 부모태그로 묶엇는데 다음 동영상에 ol태그는 따로 div로 안묶고 <h2>CSS 부터 div id="article"로 묶은 후
        ol과 id=article을 id=gird로 묶었는데 서로의 차이점이 있을까요?
        ol태그도 div로 묶어야하는거 아닌가 생각이드네요 ㅠㅠ
        고수님들 알려주세욤 부탁드립니다.
      • 정제제
        210828 완
      • 진주
        재밌어요 ><
      • rec8730
        이해될듯 하면서도 안되고 id 선택자 개념부터 막히기 시작하네요ㅠ
      • 이나크로
        20210821
      • 권정현
        .
      • 서울 2020년 가을
        2021.8.3
      • 커넥티드 허트
        2021.08.01
      • 조유빈
        완료
      • inwhan
        2021.07.22. 완료
      • 아자가자
        210721 성공
        감사합니다 :)
      • 완료
      • 너클볼러
        감사합니다.
      • 임코딩
        - tag의 부모 지정 : #id tag { ... }
      • 임코딩
        - 디자인을 위한 tag : "div", "span" (block vs inline)
        - 같은 block 내 columns에 크기를 지정하여 배치 :
        display :grid;
        grid-template-columns : 크기지정1 크기지정2 ...;
        - web browser 기술 채택 통계 사이트 : caniuse.com
      • OrzlHB
        완료
      • 정용헌
        와 개발자툴 완전 유용하네요!!!!!
      • 도햐
        아직은 개발자툴인 검사가 익숙하지 않아서 걱정이네요 흑
      • 윤동욱
        20210706
      • 박사장
        21.06.30 시청 완료
      • 헤메는소
        7.2.21
      • 황철갑
        21.6.27
      • 호찬
        2021.06.23.(수) 진행중
      • B=loom
        21.06.21
      • 너굴
        210611
      • 김기호
        2021.06.04
      • drinkdrink
        잘봤습니다 !
      • 김휘철
        잘 봤습니다~
      • 김새암
        2021.5.18
      • GelandeWagen
        210518 ok
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기