-
[CSS Grid] 2. Hello World CSS Grid프로그래밍/HTML5 Web 2018. 7. 14. 17:31반응형
코스이름은 Your First Grid 인데 너의 첫 그리드 라고 제목짓긴 좀 그래서 그냥 Hello World라고 지었다. 이번 강의는 매우 심플하다.
Grid을 사용해서 행과 열 모양을 만드는 강좌이다.
<html><head><link rel="stylesheet" href="basic.css"><style>.container{display: grid;grid-template-columns: 100px auto;grid-template-rows: 50px 50px 200px;grid-gap: 3px;}</style></head><body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>아래와 같은 코드인데 완성시키면 아래와 같은 모양으로 완성이 된다.
일단 내가 이해한바로는
display 값에서 grid를 사용하겠다고 선언하고, 행과 열에서 px을 지정해주는데 auto의 경우에는 남는 비율을 전부 차지하는것 같았다.
grid-gap의 경우에는 사이의 빈공간을 의미하는것같다.
반응형'프로그래밍 > HTML5 Web' 카테고리의 다른 글
안드로이드 브라우저 상단 주소창 색 지정하는 방법 (0) 2019.05.03 [CSS Grid] 1. 코스 소개 (0) 2018.07.14 CSS Grid 공부를 시작하며 (0) 2018.07.14 [HTML5] 웹워커 Web Worker 기초 상식과 개요 (0) 2016.07.13 [HTML5] HashChange Event 해쉬 변경 이벤트 처리 PushState와 popState 메서드 (0) 2016.07.11
