CSS Grid 템플릿을 이용해 웹 페이지 레이아웃 편집하기
아래와 같이 예제 태그를 작성합니다. body 영역에 Text Sample 3개를 각각 Div 태그를 지정합니다. 3개의 Div 태그를 묶는 개념의 부모 태그로 Div 태그를 쓰고 id를 "grid"로 지정합니다. 3개의 Div 태그에 굵기 5px 노란색 단선을 적용합니다. style 태그에 Div 태그를 선택자로 지정한 후 서식을 작성합니다.
<html>
<head>
<title> Gride Sample </title>
<meta charset="utf-8">
<style>
div {
border:5px solid yellow;
}
</style>
</head>
<body>
<div id="grid">
<div> Text Sample.1 <div>
<div> Text Sample.2 </div>
<div> Text Sample.3 </div>
</div>
</body>
</html>
grid 템플릿을 이용해 이 3개의 박스를 하나의 영역으로 포함하여 나란히 일렬로 배치하기
노란색 테두리 선으로 둘러싸인 3개의 박스가 만들어졌습니다. 이 3개의 박스를 하나의 개념으로 묶기 위해 상위 개념의 div를 만들었으며, 동시에 서식을 적용하기 위해 id를 "grid"로 지정해놓았습니다. Style 영역에 id 선택자를 지정한 후 한 영역 내에서 3개의 div 태그를 가로로 정렬하겠습니다. id 영역의 상위 테두리는 선 굵기 10px, 파란색 단선으로 하겠습니다. display:grid; 로 그리드를 설정합니다. grid는 기본적으로 block level element로 적용됩니다. 가로로 나란히 일렬로 정렬시키기 위해 template는 columns로 설정합니다. columns에 입력한 값은 순서대로 div에 적용됩니다. fr은 fraction의 앞자리를 따 온 값입니다. fraction은 분수, 분할을 뜻합니다. 1fr 1fr 1fr 은 총 3의 부피 중 1 만큼 각각 영역을 가진다는 의미입니다.
<html>
<head>
<title> Gride Sample </title>
<meta charset="utf-8">
<style>
div {
border:5px solid yellow;
}
#grid {
border:10px solid blue;
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
</style>
</head>
<body>
<div id="grid">
<div> Text Sample.1 <div>
<div> Text Sample.2 </div>
<div> Text Sample.3 </div>
</div>
</body>
</html>
grid template 값으로 fraction과 px 값 다양하게 적용해보기
3fr 2fr 1fr로 입력하게 되면, 각 div 태그는 순서대로 총 6의 부피 중 3, 2, 1 만큼의 영역을 갖습니다. 250px, 3fr, 1fr로 입력 시 Text Sample.1 은 250px 영역을 갖고 나머지 2개 div 태그는 순서대로 총 4의 부피 중 3, 1만큼의 비율로 영역을 갖습니다.
'코딩' 카테고리의 다른 글
| html css 스타일 태그로 적용하는 방법과 link 링크 태그로 css 파일 연결하여 적용하는 방법 (0) | 2020.09.02 |
|---|---|
| css media queries 미디어 쿼리 min-width, max-width 비교하기 (0) | 2020.09.01 |
| DIV , P , SPAN 태그로 웹 디자인을 위한 contents 그룹핑하기 (0) | 2020.08.30 |
| html CSS border 속성 property 사용하여 웹 페이지 라인 꾸미기 (0) | 2020.08.30 |
| CSS 박스 모델 개념 margin, border, padding, width, height (0) | 2020.08.29 |
댓글