WEB2 - CSS

그리드

그리드의 기본 사용법

강의

caniuse 홈페이지

 

소스코드

변경사항

 

 

 

그리드 써먹기

강의

 

 

소스코드

변경사항

Grid 기능의 호환성

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

댓글

댓글 본문
  1. 열공강아지
    2/3
  2. Sansol Park
    처음에는 따라하지 않고, 그냥 처음부터 끝까지 쭈욱 강의영상을 가벼운 마음으로 보기만 해보세요~!

    집중해서 보지 않고, 그냥 듣기만 하고

    그 다음에 영상을 보고 실습을 하거나
    동일한 주제로 강의하는 다른 영상이나 책, 웹페이지를 찾아서 공부하면 좀 더 이해가 잘되실 거에요!
    대화보기
    • 서른다섯시작
      만들어져 있는 코드로 계속 이어서 연속적으로 강의가 진행돼다 보니까
      따라해도 막히게 되면 웹페이지가 엉터리가 돼서 다음 강의를 못 따라가네요..ㅠㅠ
      그냥 못하는 저를 탓해야겠죠..
    • TheDuck
      2023. 02. 01 완료
    • BBIYA
      2023.01.13
    • 오오
      2022.12.22
    • 2022.12.21 11. 그리드 써먹기까지 했습니다.
    • 드가자
      11
    • 엠제이
      10172022
    • 보통사람 박코딩
      할수있다
    • 아아뜨아
      221010
    • solfany
      2022.9 28 수강 완료
    • 코딩왕초보
      2022.09.26
    • 코딩드림
      22.09.24 재밌어요!
    • 당당
      2022.09.09
    • start_new_life
      기존 것들은 정말 쉬운 것들 이였네요.. 여기서 처음으로 뇌가 꼬이는 듯한 느낌이 들었습니다. 수 번 따라해보고 해서 겨우 이해했습니다.
    • 수강완료
    • 코딩다람쥐
      2022.09.02 수강완료
    • 제이드
      **https://caniuse.com/?search=grid**

      쌤이 써주신 코드 그대로 복붙하면 실습이 잘 되는데,
      제가 똑같이 적어서 실행하면 제대로 안나오네요 대체 원인이 뭔지 모를
    • 모카
      2022.08.29
    • 8/21
    • MelonMusk
      08/20
    • MelonMusk
      08/19
    • 뿔고래
      grid-template-columns: 1fr 2fr;
      3등분해서 1칸과 2칸으로 나누어서 표현한다.

      div로 묶은 다음에 div의 display속성을 grid로 설정하면 표를 만들 수 있다.

      종속을 표현하고 싶다면 띄어쓰기로 표현할 수 있다.
      #grid ol{}
    • 히야
      2022년 8월 17일 수강 완료했습니다. 감사드립니다!
    • 참새튀김
      22.08.17
    • 22.08.11
    • 헤밍웨이
      220809
    • 여름이
      22.8.6.
    • phoenix0428
      2022-08-04
    • robert
      2022-07-29
    • 코드만다
      22.07.26
    • 꾸준히가답이다
      화이팅
    • 코딩러버
      점점 복잡해지고 머리가 아파오기 시작한다..
    • toonfac
      220703 오후 4시 31분 완료
    • 22.06.29
    • 양빵
      220610
    • 김재원
      5/16
    • 매듭달열하루
      22.04.28
      CSS 그리드
    • 고배배
      220417
    • 그리드 편하네요
    • 서우
      22.04.12.
    • block level element를 사용하려면 div (디자인 하는데 사용)
      inline level element를 사용하려면 span
      grid를 사용하면 상자간의 비율을 조절할 수 있고 상자 안에 넣는 글자수에 따라 자동으로 크기가 조정됨.
      선택자를 쓸 때도 선택자가 많아지면 어떤 것을 그리드 하는지 헷갈릴 수 있음.
      따라서 #grid ol 이런 식으로 그리드 뒤에 선택자를 붙여줘서 구분.
    • 너구리기린
      2022.03.26
    • 이윤
      220319
    • B_frog
      220314
    • ^^
    • DH니스
      2022.03.09
    • 김원식
      안녕하세요!열심히 따라하면서 배우고 있는 수강생 한명입니다!
      border를 설정할때 ol{border: 1xp solid gray}로 설정시 강의처럼 화면 전체에 블록형태로 안나오고 계속 인라인 형태로 나오는고 웹 설정으로 확인을 할경우 높이가 설정이 되어있는데 혹시 이거를 웹의 크기에 맞게 높이가 조정되도록 어떻게 해야지 수정이 가능할까요?
      class를 설정해서 .ol{border:1px solid gray}할 시에는 똑같이 나오는데 혹시 이런식으로 설정을 하여 해도 아무런 문제가 없는 걸까요??
    • 지구
      2022.03.06 복습 후 재수강 필요!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기