웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
css를 사용하여 사각형을 만드는 방법은 다양합니다. 가장 쉽게 width와 height 값을 사용할 수 있죠. 오늘은 grid 레이아웃을 사용해서 사각형과 정사각형을 만들어보겠습니다.
grid를 사용하여 정사각형 또는 직사각형을 만들기 위해서는 css의 grid-template 속성을 사용합니다. 이 속성을 사용하면 자식 요소를 쉽게 사각형으로 만들 수 있습니다. 일반적으로 하나의 사각형을 만드는 것 보다는 여러개의 동일한 사격형을 만드는 데 사용됩니다.
grid-template은 자식 요소의 높이와 너비를 사용하기 위해 아래의 두 가지 속성으로 사용됩니다.
grid-template-columns
// 너비의 값 width를 설정하기
grid-template-rows
// 높이의 값 height를 설정하기
grid-template의 값으로 fr, px, % 등의 값을 사용할 수 있겠죠. 그럼 아래에서 간단한 예제를 만들어 보면서 자세히 알아보겠습니다.
여기서는 grid-template 속성을 사용하여 너비와 높이가 각각 200px, 200px인 정사각형을 만들겠습니다.
@ 너비와 높이가 각각 200px인 정사각형 만들기
먼저 html 코드입니다.
다음에 grid-template을 사용한 css 코드입니다.
위 코드를 실행하면 아래와 같이 나타나게됩니다.
보시는 것처럼 손쉽게 정사각형을 만들었습니다. 아래에서는 동일한 크기의 사각형 여러 개를 만들어보겠습니다.
@ 100px, 100px 사각형 여러 개 만들기
이번에는 비슷하지만 다른 예제입니다. 좀 전의 절반 크기의 정사각형을 연속해서 3개 만드는 방법입니다. 반복해서 만드는 것이 grid layout의 장점을 가장 잘 사용한 부분이죠.
이제 아래와 같이 grid-template-columns와 grid-template-rows 값을 반복 사용되도록 조정하면 됩니다. 다음과 같이 속성 값을 변경할 수 있습니다.
위 예제에서 grid-template-columns 속성과 grid-template-rows 속성에 반복된 3개 값을 연속해 사용하였습니다. 이제 코드를 실행하면 아래와 같이 나타나게 됩니다.
참고로 반복된 값을 각각 선언하지 않고 repeat()를 사용할 수도 있겠습니다. repeat()에 사용된 3과 100px은 3개의 자식 요소를 동일한 100px의 값을 가지게 한다는 의미입니다.
실제 코드는 위와 동일하게 동작하는 것을 알 수 있습니다.
여기까지 css의 grid 레이아웃을 사용하여 사각형 만드는 방법을 간략히 알아보았습니다.
# css grid-template 사용하여 사각형 만들기
grid를 사용하여 정사각형 또는 직사각형을 만들기 위해서는 css의 grid-template 속성을 사용합니다. 이 속성을 사용하면 자식 요소를 쉽게 사각형으로 만들 수 있습니다. 일반적으로 하나의 사각형을 만드는 것 보다는 여러개의 동일한 사격형을 만드는 데 사용됩니다.
grid-template은 자식 요소의 높이와 너비를 사용하기 위해 아래의 두 가지 속성으로 사용됩니다.
grid-template-columns
// 너비의 값 width를 설정하기
grid-template-rows
// 높이의 값 height를 설정하기
grid-template의 값으로 fr, px, % 등의 값을 사용할 수 있겠죠. 그럼 아래에서 간단한 예제를 만들어 보면서 자세히 알아보겠습니다.
! grid-template 사각형 예제 보기
여기서는 grid-template 속성을 사용하여 너비와 높이가 각각 200px, 200px인 정사각형을 만들겠습니다.
@ 너비와 높이가 각각 200px인 정사각형 만들기
먼저 html 코드입니다.
<div class="grid-container">
<div class="grid-square"></div>
</div>
<div class="grid-square"></div>
</div>
다음에 grid-template을 사용한 css 코드입니다.
.grid-container {
display: grid;
grid-template-columns: 200px;
grid-template-rows: 200px;
}
.grid-square {
border: 2px solid #000;
}
display: grid;
grid-template-columns: 200px;
grid-template-rows: 200px;
}
.grid-square {
border: 2px solid #000;
}
위 코드를 실행하면 아래와 같이 나타나게됩니다.
<div class="grid-container">
<div class="grid-square">200 x 200</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px;
grid-template-rows: 200px;
}
.grid-square {
border: 2px solid #000;
}</style>
<div class="grid-square">200 x 200</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px;
grid-template-rows: 200px;
}
.grid-square {
border: 2px solid #000;
}</style>
보시는 것처럼 손쉽게 정사각형을 만들었습니다. 아래에서는 동일한 크기의 사각형 여러 개를 만들어보겠습니다.
@ 100px, 100px 사각형 여러 개 만들기
이번에는 비슷하지만 다른 예제입니다. 좀 전의 절반 크기의 정사각형을 연속해서 3개 만드는 방법입니다. 반복해서 만드는 것이 grid layout의 장점을 가장 잘 사용한 부분이죠.
이제 아래와 같이 grid-template-columns와 grid-template-rows 값을 반복 사용되도록 조정하면 됩니다. 다음과 같이 속성 값을 변경할 수 있습니다.
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px;
column-gap: 10px; // 컬럼 간격 10px
}
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px;
column-gap: 10px; // 컬럼 간격 10px
}
위 예제에서 grid-template-columns 속성과 grid-template-rows 속성에 반복된 3개 값을 연속해 사용하였습니다. 이제 코드를 실행하면 아래와 같이 나타나게 됩니다.
<div class="grid-container-2">
<div class="grid-square">100 x 100</div>
<div class="grid-square">100 x 100</div>
<div class="grid-square">100 x 100</div>
</div>
<style>
.grid-container-2 {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px;
column-gap: 10px;
}</style>
<div class="grid-square">100 x 100</div>
<div class="grid-square">100 x 100</div>
<div class="grid-square">100 x 100</div>
</div>
<style>
.grid-container-2 {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px;
column-gap: 10px;
}</style>
참고로 반복된 값을 각각 선언하지 않고 repeat()를 사용할 수도 있겠습니다. repeat()에 사용된 3과 100px은 3개의 자식 요소를 동일한 100px의 값을 가지게 한다는 의미입니다.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-: repeat(3, 100px);
}
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-: repeat(3, 100px);
}
실제 코드는 위와 동일하게 동작하는 것을 알 수 있습니다.
여기까지 css의 grid 레이아웃을 사용하여 사각형 만드는 방법을 간략히 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
