CSS 레이아웃 프레임워크 공개: 5가지 인기 프레임워크 분석
소개:
웹 디자인 및 개발 과정에서 좋은 레이아웃을 달성하는 방법은 항상 중요한 과제였습니다. CSS 레이아웃 프레임워크는 강력한 도구와 구성 요소를 제공하여 복잡한 레이아웃을 보다 쉽게 생성하고 개발 효율성을 향상시키는 데 도움이 됩니다. 이 기사에서는 5가지 인기 있는 CSS 레이아웃 프레임워크를 살펴보고 구체적인 코드 예제를 제공합니다.
1. Bootstrap
Bootstrap은 현재 가장 인기 있는 CSS 레이아웃 프레임워크 중 하나입니다. 다양한 스타일과 구성 요소를 제공하므로 반응형 웹 페이지를 빠르게 구축할 수 있습니다. 다음은 부트스트랩을 사용하여 탐색 모음, 콘텐츠 영역 및 하단 저작권 정보가 포함된 페이지 레이아웃을 구현하는 방법을 보여주는 간단한 예입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
<title>Bootstrap Layout Example</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="col-md-4">
<h3>Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">© 2020. All rights reserved.</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
</body>
</html>로그인 후 복사
2. Foundation
Foundation은 또 다른 인기 있는 CSS 레이아웃 프레임워크로, 다양한 구성 요소와 스타일도 제공합니다. 아래는 Foundation을 사용하여 구현한 기본 레이아웃의 예입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
<title>Foundation Layout Example</title>
</head>
<body>
<nav class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Logo</li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="grid-container">
<div class="grid-x">
<div class="cell medium-8">
<h1>Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="cell medium-4">
<h3>Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer>
<div class="grid-container">
<div class="grid-x">
<div class="cell">
<p>© 2020. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>로그인 후 복사
3. Semantic UI
Semantic UI는 이름 지정과 사용이 매우 직관적입니다. 아래는 Semantic UI를 이용하여 구현한 기본 레이아웃의 예이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css">
<title>Semantic UI Layout Example</title>
</head>
<body>
<div class="ui inverted menu">
<a class="active item">Logo</a>
<a class="item" href="#">Home</a>
<a class="item" href="#">About</a>
<a class="item" href="#">Services</a>
<a class="item" href="#">Contact</a>
</div>
<div class="ui container">
<div class="ui grid">
<div class="eleven wide column">
<h1>Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="five wide column">
<h3>Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<div class="ui inverted vertical footer segment">
<div class="ui container">
<p>© 2020. All rights reserved.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.js"></script>
</body>
</html>로그인 후 복사
4. Bulma
Bulma는 디자인이 간단하고 아름답고 사용하기 쉽고 사용자 정의가 쉬운 CSS 레이아웃 프레임워크입니다. 아래는 Bulma를 사용하여 구현한 기본 레이아웃의 예입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css">
<title>Bulma Layout Example</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">Logo</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Services</a>
<a class="navbar-item" href="#">Contact</a>
</div>
</div>
</nav>
<div class="container">
<div class="columns">
<div class="column is-three-quarters">
<h1 class="title">Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="column">
<h3 class="subtitle">Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>© 2020. All rights reserved.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bulma"></script>
</body>
</html>로그인 후 복사
5. Tailwind CSS
Tailwind CSS는 HTML에서 직접 사용할 수 있는 풍부한 실용적인 클래스를 제공하는 고도로 사용자 정의 가능한 CSS 프레임워크입니다. 다음은 Tailwind CSS를 사용하여 구현한 기본 레이아웃의 예입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@1.4.6/dist/tailwind.min.css" rel="stylesheet">
<title>Tailwind CSS Layout Example</title>
</head>
<body>
<nav class="bg-gray-200">
<div class="container mx-auto">
<ul class="flex">
<li class="p-4">Logo</li>
<li class="p-4"><a href="#">Home</a></li>
<li class="p-4"><a href="#">About</a></li>
<li class="p-4"><a href="#">Services</a></li>
<li class="p-4"><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="container mx-auto">
<div class="flex">
<div class="w-3/4 p-8">
<h1 class="text-4xl">Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="w-1/4 p-8">
<h3 class="text-2xl">Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer class="bg-gray-200">
<div class="container mx-auto p-8">
<p>© 2020. All rights reserved.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
// Tailwind CSS does not require JavaScript
</script>
</body>
</html>로그인 후 복사
결론:
이 기사에서는 Bootstrap, Foundation, Semantic UI, Bulma 및 Tailwind CSS 등 5가지 인기 있는 CSS 레이아웃 프레임워크를 소개합니다. 이러한 프레임워크를 사용하면 복잡한 웹 페이지 레이아웃을 보다 효율적으로 구현할 수 있습니다. 각 프레임워크에는 고유한 특성과 스타일이 있으며 실제 요구 사항에 따라 적합한 프레임워크를 선택하세요.
위 내용은 5가지 인기 CSS 레이아웃 프레임워크 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
