bootstrap을 통해 grid system에 대한 인지도가 높아진 이후 grid framework이 다수 소개되었고, 개발에 도입하는 빈도도 계속 증가하게 되었다. bootstrap과 같은 종합 framework는 물론이고, grid system만 지원하는 framework까지 그 종류도 다양하게 소개되었다.
이런 인기를 바탕으로 CSS3에서도 css standard로 grid system이 도입되기에 이르렀다.
그 동안 framework의 형태로 사용하던 grid system에 비해 css grid의 장점은 다음과 같다.
html에 class의 사용이 간단하다. 특히 반응형으로 제작할 때 class영역에 여러 개의 class명을 나열하지 않고 media query를 통해 선언하면 되기 때문에 가독성을 향상시키기에 충분하다.
column의 수를 12개로 제한하지 안아도 된다. 필요한 만큼 column을 만들 수 있다.
framework에서 제공되는 필요 없는 css 코드까지 다운로드 할 필요가 없음으로 client의 부하를 줄일 수 있다.
기본 사용법은 다음과 같다.
grid system 전체를 둘러싸게 되는 container를 선언하고 그 내부에 필요한 grid를 생성한다. 마치 <table>로 table영역 전체를 둘러싼 후 그 내부에 row와 col를 선언하는 것과 유사하다.
<!--
* css-grid-01-basic.html v0.1.0
* Update: 2019.10.28
* Author: Developer N
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css-grid-01-basic-v0.1.0</title>
<style>
.grid-container {
display: grid;
/* heigth(필요한 줄 수 만큼) / width(필요한 칸 수 만큼) */
grid: 120px 50px / auto auto auto auto auto;
grid-gap: 5px;
}
.grid-container > div {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="Developer N">
<title>date methode</title>
<script>
setInterval(function () { // 일정한 시간 간격으로 작업을 반복 실행
var date = new Date(); // Data() 객체 생성
document.body.innerHTML = date; // date 전체 요소 출력
}, 1000); // 1초 간격
</script>
</head>
<body>
</body>
</html>
Thu Oct 24 2019 20:14:11 GMT+0900 (한국 표준시)
그런데 위의 화면처럼 연도, 날자, 시간 등을 전부 사용하기 보다는 필요한 부분만 골라서 사용하는 경우가 있다.
이럴경우 각각의 요소들은 어떻게 출력하는지 알아본다.
다음 코드는 년, 월, 일, 시, 분, 초를 각각 분리하여 추출하는 방법을 나타내고 있다.
출력은 편의상 추출된 데이터를 전부 팝쳐서 한번에 출력하고 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="Developer N">
<title>date methode</title>
<script>
setInterval(function () { // 일정한 시간 간격으로 작업을 반복 실행
var date = new Date(); // Data() 객체 생성
var currenYear = date.getFullYear(); // Year 추출
var currenMonth = ( date.getMonth() + 1 ); // Month 추출
var currenDate = date.getDate(); // Date 추출
var currentHours = date.getHours(); // Hours 추출
var currenMinutes = date.getMinutes(); // Minutes 추출
var currenSeconds = date.getSeconds(); // Seconds 추출
var dateAll = date + "<br />" + // 출력 data 편집
currenYear+"년 <br />" +
currenMonth+"월 <br />" +
currenDate+"일 <br />" +
currentHours+"시 <br />" +
currenMinutes+"분 <br />" +
currenSeconds+"초 <br />" +
"입니다." ;
document.body.innerHTML = dateAll; // dateAll 출력
}, 1000); // 1초 간격
</script>
</head>
<body>
</body>
</html>
출력된 화면은 다음과 같다.
Thu Oct 24 2019 20:52:05 GMT+0900 (한국 표준시)
2019년
10월
24일
20시
52분
5초
입니다.
