생활코딩

Coding Everybody

코스 전체목록

닫기

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

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

댓글

댓글 본문
작성자
비밀번호
  1. 임재현천재
    완료!감사합니다!
  2. IWBAP
    다듬어 지고 있네요! 열심히 하겠습니다! @
  3. Inyeong Gim
    재밌네요!
  4. Lee Sangjun
    아.. 오늘 그리드 배운다고 열심히 삽질 했습니다. ㅋㅋㅋㅋ
    5시간 넘게 걸린듯.. ㅠㅠ 줄 하나 만드는게.. 이렇게 어려울줄이야.. ㅎㅎ
    재밌습니다! 열심히 따라가겠습니다!!

    https://prokjun.github.io......tml
  5. 시간속으로
    완료
  6. 쇠중
    완료
  7. 이시권
    web브라우져를 스윙으로 사용하다 보니, 처음에 grid문법을 브라우져가 못 읽어서 애를 먹었네요. 크롬으로 하니까 잘 됩니다^^* 오늘도 한걸음 내딛었네요. 감사드려요~
  8. aimerthis(이성민)
    감사합니다.
  9. 고유르
    html css 하실떄 크롬으로하시면 대부분다됩니다
  10. 과천영일
    웹브라이저를 몇을 써야할까요?? 검사를 했을때 화면처럼 보이지 않아서요.
  11. 과천영일
    소스코드 그대로 했는데도 navigation 이랑 article 이 위아래로 나와요..
    옆으로 나오게 하려고
    #grid{
    border:5px solid pink;
    display:grid;
    grid-template-columns: 150px 1fr;
    }..
  12. moon
    감사합니다.
  13. style에 있는 ol과 #grid ol은 결국 같은 ol을 가리키고 있는게 아닌가요?
  14. DontSettleforless
    더블클릭하고 숫자암거나 입력하고 방향키로 왔다리갔다리하면돼요
    대화보기
    • 석경호
      코드 복붙했는데 이상하게 나오는데 왜그런지를 모르겠어요 ㅠㅠ
    • 장우영
      로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

      로렘 입숨은 전통 라틴어와 닮은 점 때문에 종종 호기심을 유발하기도 하지만 그 이상의 의미를 담지는 않는다. 문서에서 텍스트가 보이면 사람들은 전체적인 프레젠테이션보다는 텍스트에 담긴 뜻에 집중하는 경향이 있어서 출판사들은 서체나 디자인을 보일 때는 프레젠테이션 자체에 초점을 맞추기 위해 로렘 입숨을 사용한다.

      로렘 입숨은 영어에서 사용하는 문자들의 전형적인 분포에 근접하다고도 하는데, 이 점 때문에 프레젠테이션으로 초점을 이동하는 데에도 도움을 준다.

      - 위키피디아
    • 송진영
      조금씩 힘들지만 그래도 해보고 있습니다!
    • 나래손
      우와 점점 복잡해지네요.. 그래도 재밌어요ㅋㅋ
    • 와 강의 듣는데 이렇게 이해가 쏙쏙 들어오다니.. 정말 감사합니다!!! 학교에서 가볍게 배우고 지나쳤는데 기초부터 차근차근 배워가니 많은 도움이 됩니다! 감사합니다 :)
    • htmlhm
      REQUEST: 시멘틱 태그 강의 만들어 주시면 감사하겠습니다.
    • Kong SangCheol
      강의 잘 듣고 있어요, 감사 드립니다.
    • 소금돌
      점점 코드가 증가하면서..
      복습할 내용이 늘어나네요... 그래도 계속 공부합니다.
    • 하늘다람쥐
      ㅎ 좋은 강의 고맙습니다.
      귀에 쏙쏙 들어옵니다.
      들을때마다 아하 하고 듣습니다. 고맙습니다.
    • 반자동
      으으 중간에 grid 스펠링 실수로 안되는걸 붙잡고 ㅠㅠㅠ
    • 나도공부해야지
      id는 한페이지에 id명이 반복되지 않는 여러개의 id를 사용할 수 있구요.. 예를 들어 <div id="grid"> <div id="article">은 사용할 수 있지만 <div id="grid"> <div id="grid"> 이렇게는 사용하면 안되요. 동일하게 주려면 class를 쓰시는거에요
      대화보기
      • 학습중
        제가 괜히 틀린 말씀을 드리는 것이 아닌가 싶습니다만,
        아마 동기님께서는 html 텍스트 내에서 id는 한 번만 줄 수 있다고 이해하신것 같습니다.
        대한민국 국민들은 주민등록번호를 가질 수 있지만, 한 사람당 하나씩만 가질 수 있고 중복될 수 없습니다.
        html 텍스트 내에서 각 태그들은 id 값을 가질 수 있지만, 하나의 id 만을 가질 수 있고 중복될 수 없습니다.
        와 같은 것 같습니다. 저도 강의 들으며 공부중인지라 제 설명이 맞는지 모르겠네요...
        대화보기
        • 좋은 강의 완전 감사드려요
          강의 잘 듣고있습니다. 그런데 궁금한것이 있어요!!
          선생님께서 저번 강의때 id값은 단 한번만 줄 수 있다고 하셨는데,
          이번 강의에서 id값을 두번 주셨어요!! 그래도 되는건가요?!
        • 솔백아
          2018.05.03 grid를 gird라고 잘못 쓰고 왜 안 되지?? 하고 있었네요 ㅎㅅㅎ
          오늘도 강의 잘 봤습니다 감사합니다!
        • 스페이스몽키
          이번에도 알찬 강의 감사합니다!
        • 설렁탕
          그리드 철자 잘 못 적어서 방황했자너
        • 기본세팅 바로 만드는법
          그냥 html 치면 됩니다.
        • 이하빛
          <강의 5분 부분~>

          값을 줬다고 해서 가운데 선이 텍스트를 삐져나가는 현상이 왜 있는건가요?

          값을 늘린 padding 값에 맞춰 함께 자리를 이동하지 않는지?

          처음엔 자리를 잘 잡았는데 말이죠~
        • Dreaming_Joyy
          can i use 사이트 정말 좋네요!!!
        • Dreaming_Joyy
          기본 세팅을 바로 만드는 방법이 있나요? <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title> </title>
          </head>
          <body>

          </body>
          </html>
          이거요. 항상 치는데, 이고잉님은 바로 만드셔서요~~
        • Choi JaeHyeok
          상위선택자 설명 부분에서 박수를 쳤습니다 최고군요
        • 정승호
          강의 성의껏 만들어주신 것 만으로도 감사합니다!!
          대화보기
          • egoing
            아래 사이트에서 호환성 체크를 할 수 있습니다~ 우리 수업은 초심자 수업이라 미래 지향적인 개념들을 가지고 수업을 하다보니 호환성은 단념하곤 합니다.
            https://caniuse.com......rid
            대화보기
            • 정승호
              익스플로러 11은 호환 안되네요. 계속해보다가 코드 노트 그대로 붙여넣어봐도안돼서 크롬에서 확인해보니 됩니다.
            • 학생
              조언 감사합니다
              대화보기
              • 제갈량
                HTML4버전에는 <frame>...</frame>태그를 사용했는데
                이제는 CSS로 화면 분할하는 더 간편해지고 더 유동적이네요.
                이 grid기능만 잘 사용해도 레이아웃 활용에 문제 없을 듯합니다.

                근데 이번 강좌부터 <div></div>태그가 등장을 했는데,
                이 태그는 사용할 때 주의하셨으면 합니다.
                이 태그가 서로 짝이 맞지 않거나 엉키게 되면 레이아웃이 아주 엉뚱하게 나오게 됩니다.
                반드시 유의해서 사용하셨으면 합니다.
              • jayxwoo
                강의 잘 들었습니다. 감사합니다.
              • 토리
                레이아웃을 많이 안해봐서 그런건지 체감상 그리드라는 기능이 편리하고 좋다는 느낌이 퍽 와닿지는 않지만 지금부터라도
                자주 만들어보고 사용해봐야겠어요 더 궁금해서 검색도 해봤는데 허얼ㅋㅋㅋ; 그리드에 대한 개념과 기능들이 엄청 많이 있네요 재밌습니다!
              • 제로스
                #grid{
                display : grid;
                grid-template-columns : 200px 1fr;
                }

                <div id = "grid">
                <div> </div>
                <div> </div>
                </div>
              • Mingi Son
                180209 감사합니다!
              • 보안공부중
                질문이 있습니다! 지금 atom 을 사용중에 있는데 fr 이 안먹히는것? 같아요. 그 대신 auto 를 사용하니까 적용은 되는데
                1fr 2fr 처럼 앞에 숫자를 붙이는 것은 안되더라구요! 혹시 안대는 이유가 있을 까요? ..

                <style>

                #grid{
                border: 5px solid pink;
                display: grid;
                grid-template-columns: auto auto;
                }

                div{
                border: 5px solid gray;
                }

                </style>

                제가 사용한 코드입니다!
              • egoing
                parent ol 은 parent 의 모든 ol 자손이고요.
                parent>ol 은 parent의 자식 중 ol 입니다.
                선택자의 범위를 한번 찾아보시면 도움이 될 것 같아요.
                대화보기
                • 강의 잘 봤어요! 근데 저는 본문 안에도 또다른 ol이 들어가있거든요. 저는 '1.html 2.css ....'이 부분만 오른쪽에 줄을 만들고 싶어서 밑에 처럼 적용했는데, 본문에 있는 ol도 같이 적용이 되더라구요...ㅠㅠ 무슨 문제가 있는 걸까요?

                  #grid ol{
                  border-right: gray solid 1px;
                  margin: 0px;
                  width: 100px;
                  padding: 20px;
                  }
                • 잘할
                  또 질문이 있는데용! 2번째영상 마지막쯤에 정리 해주실때요! ol태그 따로 패딩값을 주셨었는데 이후에 id grid 아래있는 ol로 더 명확히 해주셨잖아여 근데 기존에 위쪽에 보시면 ol태그에 따로 스타일값을 border, margin, padding을 지정해줬었는데, 거기서 패딩값을 조절 안하고 따로 한번 더 padding-left로 주신 이유가 있나여?
                • 잘할
                  두번째 영상에서 패딩값을 검사기능으로 조절할때요! 더블클릭 후에 조정해서 실시간으로 확인이 가능하다고 하셨는데,
                  저는 그게 안되서요ㅠㅠ 어떻게 하는건가여 elements탭에서 ol부분을 더블클릭해도 보라색으로 블랙크처리가 안되는데여ㅠㅠㅠ 쓰는 브라우저가 네이버 웨일이라 그런걸까옄
                • 영원
                  감사합니다
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기