10.1 두 컬럼 레이아웃
웹 페이지에 복잡한 레이아웃을 만드는 것은 다양한 포지셔닝 방법과 그들의 조합에 대한 깊은 이해를 요구해. 이 강의에서는 Flexbox, Grid, 그리고 전통적인 포지셔닝과 같은 다양한 CSS 기술을 사용하여 복잡한 레이아웃을 만드는 몇 가지 실용적인 예제들을 다룰 거야.
고정된 내비게이션이 있는 블로그 레이아웃
이 레이아웃은 헤더, 고정 내비게이션 바, 주요 콘텐츠 및 사이드바를 포함해.
예:
CSS
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #444;
color: white;
padding: 10px;
box-sizing: border-box;
z-index: 1000;
}
.container {
display: flex;
margin-top: 60px; /* 고정된 내비게이션의 높이 */
}
.main-content {
flex: 3;
padding: 20px;
}
.sidebar {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: relative;
margin-top: auto;
}
HTML
<div class="header">My Blog</div>
<div class="navbar">Navigation</div>
<div class="container">
<div class="main-content">
<h1>Main Content</h1>
<p>Here is the main content of the blog.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Links and other content.</p>
</div>
</div>
<div class="footer">Footer</div>
이 예제에서 고정 내비게이션 바는 position: fixed 덕분에 페이지 스크롤 시에도 제자리에 남아.
주요 콘텐츠와 사이드바는 Flexbox를 사용하여 두 컬럼으로 배치돼.
10.2 싱글 페이지 웹사이트
고정된 헤더와 푸터가 있는 싱글 페이지 웹사이트
이 레이아웃은 헤더, 주요 콘텐츠 및 푸터를 포함해. 페이지 스크롤 시에도 헤더와 푸터는 보이도록 설정돼.
예:
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}
.main {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
bottom: 0;
z-index: 1000;
}
HTML
<div class="header">Sticky Header</div>
<div class="main">
<h1>Main Content</h1>
<p>Here is the main content of the page. Scroll to see the sticky header and footer in action.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus lectus eu tortor vehicula, et convallis lacus varius. Integer at orci in nisl faucibus placerat.</p>
</div>
<div class="footer">Sticky Footer</div>
이 예제에서 헤더와 푸터는 position: sticky 덕분에 페이지 스크롤 시에도 보이도록 설정돼.
10.3 다단계 네비게이션 바
이 레이아웃은 중첩 리스트와 가상 클래스들을 사용하여 드롭다운 메뉴를 생성하는 다단계 네비게이션 바를 포함해.
예:
CSS
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
.navbar li ul {
display: none;
position: absolute;
background-color: #333;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
float: none;
}
.navbar li ul li a {
padding: 14px 16px;
}
HTML
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
GO TO FULL VERSION