다중 열 텍스트 레이아웃을 구현하는 6가지 예제를 아래에서 설명하고, 각 예제에 대한 CSS와 HTML 코드를 제공하겠습니다. 이러한 레이아웃은 웹 페이지에서 텍스트를 다양한 열에 나눠서 표시하는데 사용됩니다.
예제 1: 두 개의 열로 텍스트 나누기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 두 개의 열로 텍스트 나누기 */
.two-columns {
column-count: 2;
}
</style>
<title>두 개의 열로 텍스트 나누기</title>
</head>
<body>
<div class="two-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla facilisi. Vivamus a libero eu nunc ullamcorper vehicula.</p>
<p>Etiam ultricies aliquet arcu, quis scelerisque nulla dignissim a.</p>
<p>Donec auctor justo eget augue aliquet, at malesuada eros vulputate.</p>
</div>
</body>
</html>
이 예제에서는 두 개의 열로 텍스트를 나누는 방법을 보여줍니다. .two-columns 클래스를 사용하여 텍스트를 두 개의 열로 나타냅니다.
예제 2: 열 너비 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 열 너비 지정 */
.custom-column-width {
column-count: 3;
column-width: 200px;
}
</style>
<title>열 너비 지정</title>
</head>
<body>
<div class="custom-column-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla facilisi. Vivamus a libero eu nunc ullamcorper vehicula.</p>
<p>Etiam ultricies aliquet arcu, quis scelerisque nulla dignissim a.</p>
<p>Donec auctor justo eget augue aliquet, at malesuada eros vulputate.</p>
</div>
</body>
</html>
이 예제에서는 열의 너비를 지정하는 방법을 보여줍니다. .custom-column-width 클래스를 사용하여 각 열의 너비를 설정합니다.
예제 3: 열 간격 조절
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 열 간격 조절 */
.custom-column-gap {
column-count: 2;
column-gap: 40px;
}
</style>
<title>열 간격 조절</title>
</head>
<body>
<div class="custom-column-gap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla facilisi. Vivamus a libero eu nunc ullamcorper vehicula.</p>
<p>Etiam ultricies aliquet arcu, quis scelerisque nulla dignissim a.</p>
<p>Donec auctor justo eget augue aliquet, at malesuada eros vulputate.</p>
</div>
</body>
</html>
이 예제에서는 열 간격을 조절하는 방법을 보여줍니다. .custom-column-gap 클래스를 사용하여 열 간의 간격을 설정합니다.
예제 4: 열 중앙 정렬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 열 중앙 정렬 */
.centered-columns {
column-count: 3;
text-align: left;
}
</style>
<title>열 중앙 정렬</title>
</head>
<body>
<div class="centered-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla facilisi. Vivamus a libero eu nunc ullamcorper vehicula.</p>
<p>Etiam ultricies aliquet arcu, quis scelerisque nulla dignissim a.</p>
<p>Donec auctor justo eget augue aliquet, at malesuada eros vulputate.</p>
</div>
</body>
</html>
이 예제에서는 열을 중앙 정렬하는 방법을 보여줍니다. .centered-columns 클래스를 사용하여 열을 중앙에 정렬하고 텍스트는 왼쪽 정렬합니다.
예제 5: 열 배경색 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 열 배경색 설정 */
.colored-columns {
column-count: 2;
column-gap: 20px;
background-color: #f2f2f2;
padding: 10px;
}
</style>
<title>열 배경색 설정</title>
</head>
<body>
<div class="colored-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla facilisi. Vivamus a libero eu nunc ullamcorper vehicula.</p>
<p>Etiam ultricies aliquet arcu, quis scelerisque nulla dignissim a.</p>
<p>Donec auctor justo eget augue aliquet, at malesuada eros vulputate.</p>
</div>
</body>
</html>
이 예제에서는 열에 배경색을 설정하는 방법을 보여줍니다. .colored-columns 클래스를 사용하여 열의 배경색을 지정하고 간격을 설정합니다.
예제 6: 텍스트 열 나열
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 텍스트 열 나열 */
.column-list {
column-count: 3;
column-gap: 20px;
column-rule: 2px solid #333;
padding: 10px;
}
</style>
<title>텍스트 열 나열</title>
</head>
<body>
<div class="column-list">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla facilisi. Vivamus a libero eu nunc ullamcorper vehicula.</p>
<p>Etiam ultricies aliquet arcu, quis scelerisque nulla dignissim a.</p>
<p>Donec auctor justo eget augue aliquet, at malesuada eros vulputate.</p>
</div>
</body>
</html>
이 예제에서는 텍스트 열을 나열하는 방법을 보여줍니다. .column-list 클래스를 사용하여 열의 나열을 설정하고 열 간의 구분선을 추가합니다.
'CSS' 카테고리의 다른 글
| 스크롤바 커스터마이징: 스크롤바 스타일 커스터마이징. (0) | 2023.12.23 |
|---|---|
| 투명 버튼: 투명한 배경을 가진 버튼 디자인. (0) | 2023.12.23 |
| 타이포그래피 스타일링: 텍스트 타이포그래피 스타일 조절. (0) | 2023.12.23 |
| 비디오 배경: 비디오 배경 설정. (0) | 2023.12.23 |
| 텍스트 음영: 텍스트 음영(글자 그림자) 설정. (0) | 2023.12.23 |
