WEB2 - CSS

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

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

댓글

댓글 본문
  1. 임찬혁
    완료
  2. Sohyun
    완료
  3. 서준
    완료
  4. 추장
    완료
  5. 푸른벚꽃
    #grid ol 와 기존 ol에 padding-left:33px를 같이 주는 것이 결과가 같을 수 있으나 의미가 다릅니다.
    #grid ol은 <div id="grid">내의 ol에 적용되는 것이고 기존 ol에 padding-left:33px를 적으면 적으신 ol에만 적용됩니다.

    늘 말씀하시는 것이지만 극단적으로 가보죠.

    div내에 수많은 ol이 있다면 어떻게 하실 건가요?
    일일이 하나하나 ol에 padding값을 적을 건가요? 힘들고 중복이 많아 코드가 지저분해집니다.
    그때 style에 #grid ol를 적어놓고 수많은 ol들을 div로 묶어 여기에 id="grid"를 적는다면?
    이 이후로는 알아서 모든 ol에 grid값이 적용될 겁니다.
    대화보기
    • chimhyangmoo
      2021.01.10
    • younghwani
      완료!
    • 버석군
      좋은 강의 감사합니다.

      caniuse.com 활용하는 버릇을 잘 들여야겠습니다.

      오늘자 기준으로 grid 사용율은 95.45%로 나오고, modile browser에 대한 지원 상황이 함께 나오고 있어서 더 좋네요.
    • 걸어가는신사
      2021.01.09
    • bkhawk
      영상 마지막 부분으 ㄹ보니 알겠네요 인터넷 익스플로버전이 낮아 안되고 있었내요
      대화보기
      • bkhawk
        <!DOCTYPE html>
        <html lang="en" dir="ltr">
        <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        #grid{
        border:5px solid pink;
        display:grid;
        grid-template-columns: 150px 1fr; 이부분부터 강사님이 해주신대로 안됩니다. 왜그런거지요 1fr 1fr 해도 안됩니다.
        }
        div{
        border:5px solid gray;
        }
        </style>
        </head>
        <body>
        <div id="grid">

        <div>navigation</div>
        <div>article33</div>
        </div>
        </body>
        </html>
      • 그리내
        ol의 padding-left:33px 값을 #grid ol에 따로주지 않고 기존 ol에 padding-left:33px를 같이 줘도 되지 않나요? 구동해보니 차이가 없는데, 하나씩 고쳐나가는 과정에서 설명을 위해 #grid ol 값을 별도로 만드신거라고 보면 될지 궁금합니다.
      • T.Hwang
        완료~
      • jeisyoon
        감사합니다.
      • 지현
        grid 5일차
      • 이현수
        2021.01.07(목)
      • 선린 이원석
        완료
      • 뿡삥뽕
        2021.01.03
      • 이동훈
        #grid { display: grid; grid-template-columns: 150px 1fr; }
      • 주니어개발자
        백엔드 개발자로 가끔 간단한 css를 처리해야 할 일이 있는데
        중구난방으로 알던 지식이 명쾌하게 정리되는 기분입니다
        역시 무엇을 앎에 그치지 않고 활용을 하기 위해선 상황을 통해서 익히는 체계가 정말 중요한 것 같습니다
        감사합니다!
      • 얍얍얍
        ㅇㄹ
      • Noah
        2020.12.28 완료!!
      • 서울사이버대학을다니고
        <!doctype html>
        <html>
        <head>
        <title>WEB1 - CSS</title>
        <meta charset="utf8">
        <style>
        h1 {
        font-size:45px;
        text-align: center;
        border-bottom:1px solid gray;
        margin:0;
        padding:20px;

        }
        a {
        color: red;
        }
        ol{
        border-right:1px solid gray;
        width:100px;
        margin:0;
        padding:20px;
        }
        #grid{
        display :grid;
        grid-template-columns: 150px 1fr;
        }
        #grid ol{
        padding-left: 33px;
        }
        #article{
        padding-left: 25px;
        }
        </style>
        </head>

        <body>
        <h1><a href="index.html">WEB</a></h1>
        <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>
        <p>
        Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
        </p>
        </div>
        </div>
        </body>
        </html>
      • 서울사이버대학을다니고
        <!doctype html>
        <html>
        <head>
        <title>WEB1 - welcome</title>
        <meta charset="utf8">
        <style>
        div{
        border:5px solid pink;
        }
        #grid{
        border:5px solid grey;
        display:grid;
        grid-template-columns: 1fr 1fr;
        }
        </style>
        </head>
        <body>
        <div id="grid">
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
        </div>

        </body>
        </html>
      • 샴파뉴
        2020.12.26
      • 고니스타크
        5일차
        무색무취의 block level = div, inline span
        1fr은 나머지
      • 모히또
        완료!
      • 생활둘기
        2020 12 17
      • Sung San Kim
        2020.12.16
      • 황도
        혹시 더블클릭해서 패딩, 마진 조절하는 부분 이해 안되시는 분들을 위해서,
        이고잉님이 말하신 더블 클릭은 숫자 더블클릭해서 일단 선택 하라는 것이었구요.
        숫자가 선택 된 이후 화살표 위, 아래를 이용해 조절하시면 됩니다.
        저도 2시간 정도 해매다 찾아서 나중에 공부하시는 분들을 해매지 않았으면 좋겠네요 :)
      • 스쳐간바람
        감사합니다.
      • 조성호
        2020.12.10 완료
        소중한시간 감사합니다.!
      • hyunsse
        12/9
      • 白岩 吉岡
        조금씩 응용하는 부분으로 들어가니 더 재밌어지네요 ㅎㅎ
        강의영상 감사히 잘 봤습니다!
      • 횽님 오늘 수업도 정말감사합니다 잘들었습니다.
        디자인적 부분은 검사에 들어가서 디자인 바로잡기 재미났습니다.
      • 20201129
      • Hyun Woo Ju
        20201125 완료
      • 윤지
        2020-11-21 완료
      • 듀리
        복습 끝에 이해 완료!
        대화보기
        • 듀리
          2020.11.16
        • 뎅이아빠
          오~ 그리드 새로운거 배웠네요..
          기초지식없이 마구잡이로 써먹다가 체계적으로 한번 들어봐야지 했는데..
          득템입니다.
        • 둘기
          20.11.04 완료
        • hKa2020
          box model이랑 그리드랑 헷갈렸는데, 이제 확실히 알겠네요.
          그러니까 개발자 도구는 코드를 바꾸기전에 시뮬레이션을 해볼 수 있는 거지요?
        • 2020.11.02.MON.
        • 훼리
          2020/10/31
          <div>:의미도 없고 기능도 없는 태그!
          "조사"기능에서 그림에 있는 값을 더블클릭하면 바꿀 수 있음->실제 값이 바뀌진 않음
        • 271020
        • Patrick
          예! 좋은 강의 잘 듣고 있습니다 ㅎㅎ
        • 몰댕
          201009 완료
        • 이구월
          '20.10.06
        • 바부대지
          2020.10.05 23:45
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기