HTML 3열 레이아웃
웹 사이트는 콘텐츠를 표시하기 위해 여러 열을 자주 사용합니다. 열 레이아웃은 설계자의 요구 사항에 따라 다양한 방식으로 설계할 수 있습니다.
HTML과 CSS를 결합하여 반응이 빠르고 매력적인 열 레이아웃을 구축할 수 있습니다. 이 기사에서는 3열 레이아웃 디자인에 중점을 둘 것입니다.
HTML에서 3열 레이아웃 만들기
일반적으로 HTML 열은 <div> 태그를 사용하여 정의됩니다. <div> 태그 사이에서 row 키워드로 클래스를 정의합니다.
3열 레이아웃을 정의하는 동안 3개의 <div> 요소와 그 사이에 3개의 열 클래스를 생성해야 합니다.
다음 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>
Column three layout
</h1>
<div class="row">
<div class="column" style="background-color:#404040;">Content of the column</div>
<div class="column" style="background-color:#a0a0a0;">Content of the column</div>
<div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
</div>
</body>
</html>
위의 HTML 코드를 고려하여 내부의 첫 번째 <div> 요소 내부에 row 클래스를 선언했습니다. 세 개의 열은 전체 브라우저 영역을 나눌 수 있는 클래스로 정의됩니다.
style 요소를 사용하여 세 열의 배경색을 추가할 수 있습니다.
칼럼의 내용은 전적으로 디자이너의 생각에 달려 있습니다. 위 코드의 도움으로 간단한 3열 레이아웃을 디자인할 수 있습니다.
적절한 3열 레이아웃을 얻으려면 일부 CSS 속성을 추가하는 것이 좋습니다. 이를 위해 아래 CSS 코드를 사용할 수 있습니다.
HTML 열 레이아웃에 CSS 속성 추가
HTML 속성을 사용하여 기본 열 레이아웃을 만들 수 있지만 CSS 속성을 사용하면 추가 대화형이 될 수 있습니다. 열의 스타일을 지정하는 데 도움이 됩니다.
*{
box-sizing: border-box;
}
.row{
display:grid;
grid-template-columns: 33.33% 33.33% 33.33%;
justify-content: center;
text-align: center;
font-size: 25px;
height: 300px;
}
3열 레이아웃은 그리드로 만들 수 있습니다. 위의 CSS 코드는 디스플레이 속성을 사용하여 그리드 레이아웃을 표시하는 방법을 나타냅니다.
브라우저 공간의 전체 영역을 동일한 세 개의 열로 나누는 grid-template-columns 속성이 있습니다.
CSS 속성 높이는 열의 높이를 정의했습니다. justify-content 속성은 각 열의 내용을 정당화하는 데 사용됩니다.
또한 텍스트 정렬 및 글꼴 크기를 추가했습니다.
위의 HTML 및 CSS 코드의 결과로 다음과 같은 3열 레이아웃을 얻을 수 있습니다.
웹 레이아웃은 독특한 유형의 화면에 맞아야 합니다. 몇 가지 HTML 요소를 지원하기 위해 반응형 HTML 3열 레이아웃을 생성합니다.
반응형 컬럼 레이아웃을 디자인하는 방법을 확인해보자.
HTML에서 반응형 3열 레이아웃 만들기
열 레이아웃을 반응형으로 만드는 방법에는 여러 가지가 있습니다. viewport 요소를 추가하여 다른 화면에 대한 레이아웃을 조정할 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta> 태그는 웹 페이지의 뷰포트를 설정할 viewport 요소를 추가하는 데 사용됩니다. 웹 페이지의 뷰포트를 설정하면 브라우저가 페이지의 크기와 배율을 관리하도록 지시합니다.
위의 HTML 코드를 사용하여 열 레이아웃을 모든 다양한 유형의 화면 크기에 맞게 만들 수 있습니다. 위의 코드를 HTML 코드의 head 요소 안에 다음과 같이 추가해야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
.row{
display:grid;
grid-template-columns: 33.33% 33.33% 33.33%;
justify-content: center;
text-align: center;
font-size: 25px;
height: 300px;
}
</style>
</head>
<body>
<h1>
Column three layout
</h1>
<div class="row">
<div class="column" style="background-color:#404040;">Content of the column</div>
<div class="column" style="background-color:#a0a0a0;">Content of the column</div>
<div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
</div>
</body>
</html>
결론
HTML 3열 레이아웃은 row 및 column 클래스로 <div> 요소를 정의하고 일부 CSS 스타일 속성을 추가하여 간단히 만들 수 있습니다. 이 문서에서는 HTML을 사용하여 기본 3열 레이아웃을 만들고 몇 가지 CSS 속성을 추가하여 스타일을 지정하는 방법에 대해 설명했습니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.