WEB2 - CSS

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

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

댓글

댓글 본문
작성자
비밀번호
  1. 좋습니다.
  2. cooipop
    완료요~^^ 점점 어려워지는군요 ㅋ
  3. abigail
    ol 태그스타일을..
    ol{
    border-right:1px solid gray;
    width:100px;
    margin:0;
    padding:20px;
    }
    ol{
    padding-left:33px;
    }
    이렇게 여백을 줬다가... 의미있는 마크업을 위해서..

    #grid ol{
    padding-left:33px;
    }
    이렇게 선택자를 변경해주었습니다.... 이부분은 이해해를 했는데..
    변경하기전에 왜.. ol선택자의 패딩 속성을 따로 썼을까요??
  4. 뚜기두밥
    ol 은 모든 ol값에 대한 스타일 지정이고 id값 ol은 부모 태그가 id값인 ol태그만 스타일을 지정하는 것이라 그렇습니다.
    대화보기
    • 끝가지간다
      완료!
    • 칠칠석
      2019년 3월 28일

      완료!
    • bggbr
      ol{
      border-right:1px solid gray;
      width:100px;
      margin:0;
      padding:20px;
      }
      #grid ol{
      padding-left:33px;
      }
      이렇게 분리해서 선언하신 이유를 알 수 있을까요?
    • supernet
      감사합니다!!!!
    • 내꿈
      세상에..그리드 시스템이라니...!!!!!!!!!!
    • ZANYABI
      Grid는 html의 디자인을 담당하는 CSS의 기술중 최신기술에 속하는 방법입니다.
      CSS 속성을 적용시키기 위해서는 <태그>가 반드시 필요한데, <h1>이나 <p>와 같은 태그들은 의미를 가지고있으므로 남용하면 정보가 꼬일수 있습니다.
      이때 사용하는 태그가 <div>와 <span> 태그입니다. 이 둘은 아무 의미없는 무색무취의 태그로 <div>는 block level이, <span>은 inline 속성이 기본값으로 적용되어 있습니다.


      Grid를 사용하기 전 선행조건으로는
      1. 그리드를 사용하고자 하는 <태그>가 부모 <태그>로 묶여있어야합니다.
      2. 부모 태그에 id=" "id값을 넣어줘야 합니다. (혹은 class값)
      3. CSS <style> 태그에 #id값={display:grid 를 사용하고 원하는 grid 속성을 넣어주면 됩니다.

      예시로는 grid-template-columns 를 시험해봅시다. 이는 grid의 가로값을 지정해주는 property입니다.
      grid-template-columns:150px 150px 을 지정하면, <div id=grid> 내에 있는 자식<태그>들은 모두 가로길이가 150px 로 고정됩니다.
      grid-template-columns:150px 1fr 을 지정하면, 첫번째 자식태그는 150px로 가로길이가 고정되고, 다른 한 태그는 남은 공간을 차지합니다.

      [핵심★] 이렇게 Grid는 페이지의 전체적인 '틀'을 잡아주는 기술입니다. 전체적인 구조를 Grid로 그리고, '개발자 도구'와 '박스모델' 을 이용해 세부적인 내용을 조절해 웹페이지를 꾸밀수 있습니다.

      +a)
      선택자를 좀더 명확히 지정하는 방법을 알아봅시다.
      ul { }선택자를 지정할 경우, 페이지에 존재하는 모든 <ul> 태그들이 영향을 받을수 있습니다. 하지만. #grid ul { } 처럼 부모태그의 속성을 앞에 입력하면 부모가 grid인 <ul> 태그에게만 선택적으로 영항을 끼칩니다.

      https://developer.mozilla.org......out
      다양한 Gird Property들을 확인하고 시험해볼수 있습니다.
    • 완료!
    • 미니
      완료
    • Seohee Kim
      완료!
    • FooRee
      재밌지만 어렵네요 ㅋㅋㅋㅋ grid 첫번째 값을 처음 div 폭에 안맞춰주면 서로 어긋나서 삐져나오기도 하고ㅋㅋ 개발자도구로 분석하는 재미가 쏠쏠합니다~!! 좋은 강의 항상 고맙습니다 고잉선생님!
    • colums 가 아닌 columns 입니다.
      n이 하나 빠져서 동작하지 않네요.
      세로 [column]
      대화보기
      • 참이
        잘 보고 있습니다
      • 2019-02-16 완료
      • 주하쿠
        감사합니다
      • 호두
        고맙습니다
      • 11. 그리드써먹기 마지막부분(7:24)에서 선택자 묶을 때 안묶이시는 분들
        선택자 사이에 '>'를 포함시켜보세요
        ex) #grid>ol { ~~~~~~~ }
        같은 부분에서 헤매신 분들이 계실까 해서 댓글로 남깁니다
      • dudwn7504
        인터넷 익스플로러에서는 grid-template-columns:150px 1fr; 가 작동하지 않는군요 ㅠㅠ
      • printemps
        <!doctype html>
        <html>
        <head>
        <title>frog's WELL</title>
        <meta charset="utf-8">
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133675412-1"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-133675412-1');
        </script>
        <style>
        body {
        margin:0;
        }
        a {
        color:black;
        text-decoration: none;
        }
        .saw {
        color:gray;
        }
        .active {
        color:red;
        }
        h1{
        font-size: 45px;
        text-align: center;
        border-bottom:1px solid gray;
        margin:0;
        padding:20px;
        }
        ol{
        border-right:1px solid gray;
        width:100px;
        margin:0;
        padding:20px;
        }
        #grid{
        display: grid;
        grid-template-colums: 150px 1fr;
        }
        </style>
        </head>
        <body>
        <h1><a href="well of a frog in a well.html">우물안 개구리의 우물#</a></h1>
        <div id="grid">
        <ol>
        <li><a href="1.html" class="saw active">요리</a></li>
        <li><a href="2.html" class="saw">패션</a></li>
        <li><a href="3.html">운동</a></li>
        <li><a href="4.html">생활 꿀팁</a></li>
        <li><a href="5.html">프로그래밍</a></li>
        <li><a href="6.html">자기계발 및 공부</a></li>
        <li><a href="7.html">컴퓨터</a></li>
        <li><a href="8.html">취업</a></li>
        <li><a href="9.html">영상제작 및 편집</a></li>
        <li><a href="10.html">인테리어</a></li>
        <li><a href="11.html">영어만화 및 번역</a></li>
        <li><a href="12.html">피부</a></li>
        <li><a href="13.html">부동산</a></li>
        <li><a href="14.html">고전인문</a></li>
        </ol>
        <div>
        <h2>요리</h2>
        <p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/XkwXb48zNQw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </p>
        <img src="food.jpg" width="70%">
        <p stlye="margin-top:10px;">
        </p>
        </div>
        </div>
        </body>
        </html>

        흠 질문이 있습니다.
        부모 div태그 밑에 있는 ol태그 외에 또다른 div태그에 h2와 p태그가 들어가는데
        저같은 경우는 텍스트가 아닌 동영상과 사진이 들어있습니다.
        그래서인지 그리드가 적용이 안되어 우측공간으로 정렬되어 들어가지 않더라구요.
        혹시 동영상과 사진은 또다른 그리드 태그로 적용을 시켜야 하는걸까요?
        고수님들 알려주세요..ㅠㅠ
      • printemps
        감사합니다!! 한참 고민하고 있었는데 oupi님 댓글보고 크롬에서 열어보니 되더군요! 이제 자도 되겠어요! 감사합니다 굿밤되세요!
        대화보기
        • boriku
          완료:)
        • Juyeon Heo
          완료!
        • cosmic08
          댓쓴님이 <div id="grid"> 요 아이디 밑에 부여한 <ol> 리스트"만" 적용이 되는거에요.
          예를들어, 스타일 밑에다가

          #grid ol{ ----; } 대신 그냥
          ol { ----; }만 쓴다면

          어떤 특정 리스트가 아닌
          <body>사이에 님이 혹시라도 만들었을 다른 ol을 포함한모~든 ol 리스트 </body> 들까지 적용 되는거라고 보면 될듯요. 설명이 어렵네;
          대화보기
          • cosmic08
            하 나 벌써 커스터마이징 시작했다 ㅠ 크... 근데 진짜 복잡한게 뭐냐면 그냥 코드 줄줄 써내려갈땐 안어려운데
            뭐가 잘 안되는거같아서/ 혹은 수정하려고 다시 내가 쓴 코드를 찾는게 진짜 어려운것 같다 ㅋ
            내가 이걸 멀 어떻게 쓴건지... 약간 악보 많이보고 익숙해지듯이 코딩도 많이해봐야 이 체계가 바바로 눈에 들어올것같다
          • 지미츄
            완료
          • 완료!
          • 김수빈
            완료
          • Aimhee
            완료
          • 삼색냥
            완료- 내일 나만의 웹으로 이제까지 한 거 재구성 해보기
          • 한강
            감사합니다. ^^!
          • 한강
            감사합니다. ^^!
          • 첫번째 영상 9분10초 쯤에 익스플로러는 부분적으로 지원(그리드)한다고 설명하시는데 그 부분이 아닌가요?
            대화보기
            • 투게디
              하나만 더 여쭤볼게요
              크롬만 쓰다가 방금 익스플로러로 접속을 해보았는데 그리드가 구현이 안되기에
              이고잉님 소스로 따로 파일을 만들어서 해봤는데도 그리드기능이 작동하지 않더군요.
              익스플로러가 원래 그리드기능이 작동하지않는건가요 아님 다른오류일까요?
              -크롬으로 하면 그리드 작동합니다-
            • 투게디
              질문하나 드릴게요!!
              <div id="oo">
              <ul>
              </ul>
              <div id="ss">
              <p>
              </p>
              </div>
              </div>
              에서 </ul>과 <div id="ss">사이에 <br>을 넣었더니 그리드가 작동되지않는 오류가 생기네요.
              <br>을뺴면 오류는 해결되지만 왜 저런 오류가 생기는지 궁금하네요.
            • HongKyu Lim
              감사합니다:)
            • 김정훈
              완료
            • 서대리
              너무재밌네요 ㅠㅠ
            • 뇸뇸
              CSS 진짜 재밌네요. CSS 첫강부터 여기까지 한번에 들었어요. 이왕 완강까지 하고싶지만 시간이 너무 늦어서 내일^^
              display:grid;가 안 먹어서 왜 그런가 한참 고민했던게 알고보니 gird로 오타가 났었더라구요.... 뭐가 문제인가 많이 답답했는데 오타... ㅎㅎ
              덕분에 차근차근 배우고 있습니다^^! 좋은 강의 감사해요!
            • Min Sang Shin
              완료
            • 돼지천재
              감사합니다.
            • lastal
              grid 태그 쓸때 띄워쓰기 없이 그냥 공간을 그냥 채웠더니 태그가 깨지더라구요. (바깥쪽 div태그가 감싸지지 않는)
              원인을 찾다가 레퍼런스랑 차이가 뭐지.. 한참 들여다보다가 띄워쓰기가 있네 하며 넣었더니 작동하네요.
              프로그래머들의 고충을 일면 엿 본 기분이었습니다.
            • kaonmir
              와 개재밌어
            • 커피맨
              맥에서 아톰으로 열심히 공부중입니다.
              style 태그 후 grid의 g를 치면서 자동완성을 기대하는데 grid와 그 이하의 내용이 자동완성에 나오질 않습니다.
              밑에서 id 선언부터 안먹히는(?) 느낌인데요,
              에디터 버그인가요??
              껐다 키면 되긴 하는데 다른 해결방법이 있는지 여쭤봅니다..

              <style> ****이 부분도 처음에는 style에 밑줄이 없습니다.에디터를 재시작하면 밑줄도 생기고 자동완성도 됩니다..
              #grid{
              border:5px solid pink;
              display:grid;
              gri ****이부분입니다. g만 쳐도 자동완성 리스트가 나와야 하는데 나오지 않네요****
              }
              div{
              border:5px solid gray;
              }
              </style>
              </head>

              <body>
              <div id="grid"> ****id 색깔과 #grid 색깔이 동일하지 않습니다.
              <div>NAVI</div>
              <div>ARTIC</div>
              </div>
              </body>

              </html>
            • 키보드치는남자
              잘들었습니다
            • 내일은프로그래머
              atom에서 첫줄에 html입력하니 기본 구조가 작정되네요.^^
              대화보기
              • 감사합니다:)
              • newjin87
                감사합니다.
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기