WEB2 - CSS

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

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

댓글

댓글 본문
작성자
비밀번호
  1. 셰퍼드
    19.07.17
    꿀잼이네요
  2. 방황의슈렉
    그리드 수업 듣고 이해하는데 2일 걸린거 같네요...
    들으면서 따라 하다가 안돼면 될 때까지 해보고...
    그래서 여러 가지를 이해할 수 있는거 같네요...
    힘들지만 잘 들었습니다. 감사합니다.
  3. 드라고르
    190710. 완료
  4. 초보코딩
    앗 그러네요^^ 감사합니다
    대화보기
    • 에코패킹
      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라고 쓴 오타 하나를 못 찾아서 몇 십분을 헤매다가 겨우 해결했네요 ㅠㅠ 오탈자 확인의 중요성을 배웠습니다...
        • Hyeon-Jun Ha
          완료!
        • 허공
          190504 감사합니다.
        • Fdeveloper
          우와 정리 감사합니다 많은 도움이 되었습니다
          대화보기
          • 최승윤
            완료!
          • 좋습니다.
          • cooipop
            완료요~^^ 점점 어려워지는군요 ㅋ
          • abigail
            ol 태그스타일을..
            ol{
            border-right:1px solid gray;
            width:100px;
            margin:0;
            padding:20px;
            }
            ol{
            padding-left:33px;
            }
            이렇게 여백을 줬다가... 의미있는 마크업을 위해서..

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

              완료!
            • 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
                    완료
                  • 삼색냥
                    완료- 내일 나만의 웹으로 이제까지 한 거 재구성 해보기
                  • 한강
                    감사합니다. ^^!
                  • 한강
                    감사합니다. ^^!
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기