< CSS 중급 - 그리드 모델 (Grid model) >
[ 그리드 모델 (Grid model) ] ; float, flex 보다 최신 기술임.
[프로그래밍(Programming)/CSS] - CSS 중급 - Float Layout
[프로그래밍(Programming)/CSS] - CSS 중급 - Flex Layout
- div : division, 특별한 기능 없이 내용물 구분을 위한 tag, block element
- span : div 와 같으며, inline element
- grid 사용 방법 : display:grid; + grid-template-columns: 150px 1fr;
<head>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr; (컬럼 폭 : aaa는 150px, bbb는 나머지 전체를 사용)
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>aaa</div>
<div>bbb</div>
</div>
</body>
</html>
- grid-template-columns 사용 방법
grid-template-columns: 150px 1fr; (컬럼 폭 : aaa는 150px, bbb는 나머지 전체를 사용)
grid-template-columns: 1fr 1fr; (컬럼 폭 : aaa, bbb가 컬럼폭을 1:1로 사용)
grid-template-columns: 2fr 1fr; (컬럼 폭 : aaa, bbb가 컬럼폭을 2:1로 사용)
- 그리드(grid)를 이용해서 내용물 a,b,c를 테이블 raw 형태로 표시하는 방법
: a,b,c를 각각 독립적인 tag로 묶고(독립적이지 않은 경우는 div tag로 묶고), a,b,c 전체를 div tag로 묶어서 css style tag 에 display:grid; + grid-template-columns 를 사용하여 구현.
- https://caniuse.com : css, html, javascript 기술들을 웹브라우져들이 얼마나 그 기술을 채택하고 있으며, 지원하고 있는가의 통계를 보여주는 사이트
'프로그래밍(Programming) > CSS' 카테고리의 다른 글
| CSS 중급 - 상속, Cascading (0) | 2018.08.22 |
|---|---|
| CSS 중급 - css code의 재사용 (0) | 2018.08.22 |
| CSS 기초 - 박스 모델 (Box model) (0) | 2018.08.22 |
| CSS 기초 - 선택자(selector), 속성(property), 우선순위(priority) (0) | 2018.08.22 |
| CSS 기초 - html 문서 꾸미기, css 기본 구조 (0) | 2018.08.22 |