최근 웹 개발 환경은 Vue, React와 같은 프레임워크를 중심으로 빠르게 변화하고 있습니다. 이러한 도구들은 복잡한 애플리케이션 개발을 용이하게 하지만, 때로는 웹의 근간을 이루는 HTML과 CSS의 기본 원리를 이해하는 데 장벽이 되기도 합니다.
이 글에서는 복잡한 프레임워크 없이 오직 HTML과 CSS만을 사용하여 간단하면서도 기능적인 웹 페이지를 구축하는 방법을 소개합니다. 기본적인 웹 구조를 이해하고, 각 요소가 어떻게 배치되고 스타일링되는지 학습하기 위한 이상적인 예시가 될 것입니다. 이를 통해 정적 웹사이트, 개인 포트폴리오, 또는 소규모 홍보 페이지를 손쉽게 제작할 수 있습니다.
다음은 기본 HTML 마크업과 해당 페이지의 시각적 요소를 정의하는 CSS 스타일시트입니다. 이 코드를 통해 헤더, 내비게이션, 주요 콘텐츠 영역 및 푸터로 구성된 웹 페이지의 기본 레이아웃을 이해할 수 있습니다.
HTML 마크업
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Creative Hub</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page-container">
<header id="site-header">
<div class="brand-logo"><a href="index.html"><img src="images/logo.gif" border="0" alt="Company Logo" /></a></div>
</header>
<nav id="main-nav">
<ul class="nav-menu">
<li><a href="#" class="nav-item current">홈</a></li>
<li><a href="#" class="nav-item">소개</a></li>
<li><a href="#" class="nav-item">서비스</a></li>
<li><a href="#" class="nav-item">사례 연구</a></li>
<li><a href="#" class="nav-item">포트폴리오</a></li>
<li><a href="#" class="nav-item">뉴스</a></li>
<li><a href="#" class="nav-item">연락처</a></li>
</ul>
</nav>
<main id="content-wrapper">
<section id="primary-column">
<h1 class="section-heading">My Creative Hub에 오신 것을 환영합니다</h1>
<div class="text-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a href="#">laboris nisi ut aliquip</a> ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Excepteur sint occaecat</a> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
<img src="images/middle_banner.gif" alt="Main Content Banner" />
</div>
<div class="highlight-card">
<div class="card-inner">
<h3>주요 서비스</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco:
<ul class="feature-list">
<li>전체적인 프로젝트 관리</li>
<li>합리적인 가격 정책</li>
<li>고객 만족도 최우선</li>
<li>최신 기술 적용</li>
<li>유연한 작업 방식</li>
<li>명확한 의사소통</li>
<li>지속적인 지원</li>
<li>맞춤형 솔루션 제공</li>
</ul>
</div>
</div>
<h2 class="section-heading">우리의 철학</h2>
<div class="text-content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
</section>
<aside id="secondary-column">
<h2 class="sidebar-heading">최신 소식</h2>
<div class="sidebar-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
<div class="read-more-area">
<a href="#"><img src="images/read_more.gif" width="59" height="16" border="0" alt="더 읽기" class="more-btn" /></a>
</div>
<div class="promo-block">
<a href="#"><img src="images/custom.gif" width="227" height="92" border="0" alt="프로모션" class="more-btn" /></a>
</div>
<h2 class="sidebar-heading">고객 후기</h2>
<div class="sidebar-text">
<h3>뛰어난 결과!</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
<div class="read-more-area">
<a href="#"><img src="images/read_more.gif" width="59" height="16" border="0" alt="더 읽기" class="more-btn" /></a>
</div>
</aside>
<div class="clear-floats"></div>
</main>
<footer id="site-footer">
<div class="footer-links">
<a href="#" title="">홈</a>
<a href="#" title="">소개</a>
<a href="#" title="">서비스</a>
<a href="#" title="">연락처</a>
</div>
<div class="copyright-info">
<a href="http://www.example.com">ExampleCorp</a> <a href="http://example.com" target="_blank">Web Solutions</a>
</div>
</footer>
</div>
</body>
</html>
CSS 스타일
body {
background: url(images/bg.gif) repeat-x top #abc4c0;
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 13px;
color: #3f3f3f;
line-height: 1.6;
}
.clear-floats {
clear: both;
}
h2 {
font-size: 18px;
color: #444444;
margin: 0;
padding: 5px 0;
}
h3 {
font-size: 16px;
color: #555555;
margin: 0;
padding: 4px 0;
}
#page-container {
width: 800px;
margin: 20px auto;
background-color: #FFFFFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#site-header {
width: 100%;
height: 180px;
background: url(images/top_banner.jpg) no-repeat center top;
position: relative;
}
.brand-logo {
position: absolute;
top: 30px;
left: 25px;
}
/* --- Navigation --- */
#main-nav {
width: 100%;
height: 35px;
background-color: #3C7A8F;
clear: both;
}
.nav-menu {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-start;
}
.nav-menu li {
display: inline-block;
}
.nav-item:link, .nav-item:visited {
display: block;
padding: 0 10px;
height: 35px;
line-height: 35px;
text-decoration: none;
background-color: #3C7A8F;
color: #FFFFFF;
text-align: center;
min-width: 90px;
}
.nav-item.current:link, .nav-item.current:visited {
background-color: #1A4D6B;
}
.nav-item:hover {
background-color: #000000;
color: #FFD700;
}
/* --- Content Areas --- */
#content-wrapper {
padding: 20px;
display: flow-root; /* Clear floats for content area */
}
#primary-column {
width: 530px;
float: left;
padding-right: 20px;
box-sizing: border-box;
}
.section-heading {
font-size: 20px;
font-weight: bold;
padding: 10px 0 15px 5px;
color: #1F4564;
border-bottom: 1px solid #eeeeee;
margin-bottom: 20px;
}
.text-content {
color: #555555;
margin-bottom: 25px;
text-align: justify;
}
.text-content a {
text-decoration: none;
color: #3C7A8F;
background-color: #e0f2f7;
padding: 0 3px;
border-radius: 2px;
}
.text-content a:hover {
text-decoration: underline;
color: #1A4D6B;
}
.highlight-card {
width: 100%;
border: 1px solid #DEDEDE;
background-color: #F8F8F8;
margin-bottom: 25px;
padding: 10px;
box-sizing: border-box;
}
.card-inner {
padding: 10px;
background-color: #eff3e5;
color: #666666;
}
.card-inner h3 {
color: #3A663A;
margin-bottom: 10px;
}
.feature-list {
list-style-type: disc;
margin: 15px 0 0 25px;
padding: 0;
color: #2F568A;
}
#secondary-column {
width: 250px;
float: right;
padding-left: 20px;
box-sizing: border-box;
}
.sidebar-heading {
font-size: 18px;
padding: 10px 0 15px 0;
font-weight: bold;
color: #7B9D14;
border-bottom: 1px solid #eeeeee;
margin-bottom: 20px;
}
.sidebar-text {
color: #555555;
margin-bottom: 20px;
text-align: justify;
}
.sidebar-text h3 {
color: #666666;
margin-bottom: 8px;
}
.read-more-area {
margin-bottom: 25px;
border-top: 1px dashed #CCCCCC;
padding-top: 10px;
text-align: right;
}
.more-btn {
float: right;
border: none;
vertical-align: middle;
}
.promo-block {
width: 227px;
height: 92px;
margin: 20px 0;
overflow: hidden; /* Ensures image fits */
}
/* --- Footer --- */
#site-footer {
width: 100%;
height: 70px;
clear: both;
background: url(images/footer_bg.jpg) no-repeat left top;
color: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
}
.footer-links {
display: flex;
gap: 15px;
}
.footer-links a {
text-decoration: none;
color: #92CDDD;
padding: 0 5px;
}
.footer-links a:hover {
text-decoration: underline;
color: #DDEEFF;
}
.copyright-info {
font-size: 12px;
color: #c0c0c0;
}
.copyright-info a {
color: #c0c0c0;
text-decoration: none;
}
.copyright-info a:hover {
text-decoration: underline;
}