이번 글에서는 HTML을 처음 접하는 분들을 위해, 간단한 웹사이트 레이아웃 예제 코드를 통해 HTML의 기본 구조와 스타일링 방법을 설명하겠습니다. 이 코드는 웹페이지를 구성하는 주요 요소들을 포함하고 있으며, 각 부분이 어떤 역할을 하는지 자세히 알아보겠습니다.
____
코드 설명
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 연습용 예제</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header,
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
}
main {
padding: 20px;
background-color: white;
}
nav ul {
list-style: none;
padding: 20px;
}
nav ul li {
display: inline;
margin-right: 10px;
}
section {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<header>
<h1>내 웹사이트</h1>
</header>
<nav>
<ul>
<li><a href="#section1">소개</a></li>
<li><a href="#section2">서비스</a></li>
<li><a href="#section3">연락처</a></li>
</ul>
</nav>
<main>
<section id="section1">
<h2>소개</h2>
<p>여기에 소개 내용을 작성하세요.</p>
</section>
<section id="section2">
<h2>서비스</h2>
<p>여기에 제공하는 서비스 내용을 작성하세요.</p>
</section>
<section id="section3">
<h2>연락처</h2>
<p>여기에 연락처 정보를 작성하세요.</p>
</section>
</main>
<footer>
<p>© 2024 내 웹사이트. 모든 권리 보유.</p>
</footer>
</div>
</body>
</html>코드 상세 설명
1. <!DOCTYPE html>
이 선언문은 HTML5 문서임을 나타내며, 웹 브라우저에 이 문서가 최신 표준을 따르고 있음을 알립니다.
2. <html lang="ko">
<html> 태그는 HTML 문서의 루트 요소로, 문서의 모든 콘텐츠를 포함합니다. lang="ko" 속성은 문서의 기본 언어가 한국어임을 지정합니다.
3. <head>
<head>태그에는 웹페이지의 메타데이터와 스타일 정보가 포함됩니다.<meta charset="UTF-8" />: 이 줄은 웹페이지에서 UTF-8 문자 인코딩을 사용하도록 설정합니다.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: 이 줄은 모바일 장치에서 웹페이지가 잘 보이도록 뷰포트를 설정합니다.<title>HTML 연습용 예제</title>: 이 줄은 웹페이지의 제목을 지정하며, 브라우저 탭에 표시됩니다.<style>: 인라인 스타일을 적용할 수 있는 공간입니다. 이 예제에서는 웹페이지 전체의 기본적인 스타일을 정의하고 있습니다.
4. <body>
<body>태그 안에는 웹페이지에 실제로 표시되는 콘텐츠가 포함됩니다.<header>: 웹페이지의 헤더 부분으로, 보통 사이트의 제목이나 로고가 들어갑니다. 여기서는 "내 웹사이트"라는 제목을 표시합니다.<nav>: 네비게이션 메뉴로, 웹페이지 내의 다른 섹션으로 이동할 수 있는 링크들이 포함됩니다.<main>: 메인 콘텐츠를 포함하는 부분입니다. 이 예제에서는 세 개의 섹션(소개, 서비스, 연락처)을 포함하고 있습니다.<footer>: 웹페이지의 하단 부분으로, 저작권 정보나 추가적인 링크가 포함될 수 있습니다.
5. CSS 스타일링
5.1 header와 footer의 스타일링
코드
header,
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
}설명
background-color: #333;:
이 속성은 header와 footer의 배경색을 지정합니다. #333은 짙은 회색(거의 검은색)에 해당하는 색상입니다. 어두운 배경색을 사용하면 header와 footer가 페이지의 다른 부분과 구분되어 눈에 띄게 됩니다.color: white;:
이 속성은 텍스트의 색상을 흰색으로 지정합니다. 어두운 배경색과 대비되는 흰색 텍스트를 사용하여 가독성을 높이고, 중요한 정보가 담긴 header와 footer가 쉽게 눈에 들어오게 합니다.text-align: center;:
이 속성은 텍스트를 중앙에 정렬합니다. header와 footer에 포함된 텍스트가 화면의 중앙에 위치하게 되며, 시각적으로 균형 잡힌 레이아웃을 제공합니다. 중앙 정렬은 특히 header와 footer에 있는 제목이나 저작권 정보와 같은 콘텐츠를 강조하는 데 효과적입니다.padding: 1em 0;:
이 속성은 header와 footer 내부의 콘텐츠 주위에 여백을 추가합니다. 1em은 기본 글꼴 크기를 기준으로 한 단위로, 이 경우 텍스트 위아래에 적절한 공간을 만들어 줍니다. 이 여백 덕분에 텍스트가 너무 조밀하게 보이지 않고, 충분한 공간이 확보되어 전체적으로 여유로운 레이아웃을 구성할 수 있습니다.
5.2 전체적인 디자인 조정
위에서 설명한 스타일링 외에도, 이 예제에서는 페이지의 전체적인 디자인을 결정짓는 몇 가지 중요한 CSS 규칙이 포함되어 있습니다.
코드
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}설명
font-family: Arial, sans-serif;:
이 속성은 웹페이지에서 사용할 기본 글꼴을 지정합니다. Arial과 sans-serif 글꼴은 깔끔하고 모던한 느낌을 주며, 대부분의 장치에서 지원되기 때문에 안전한 선택입니다. 이를 통해 일관된 텍스트 스타일을 유지할 수 있습니다.
margin: 0;과 padding: 0;:
이 두 속성은 페이지 전체의 기본 여백과 패딩을 제거합니다. 브라우저마다 기본적으로 설정된 여백과 패딩이 있는데, 이를 제거함으로써 모든 스타일링을 처음부터 명확하게 정의할 수 있게 됩니다.
background-color: #f0f0f0;:
이 속성은 페이지의 배경색을 밝은 회색으로 설정합니다. 밝은 배경은 콘텐츠가 돋보이도록 하고, 가독성을 높이는 데 도움을 줍니다. 어두운 배경색의 header와 footer와 대조를 이루어 전체적인 디자인에 깊이감을 더합니다.
이 예제 코드는 HTML 구조와 함께 CSS를 사용해 웹페이지의 레이아웃과 디자인을 조정하는 방법을 보여줍니다. 특히, header와 footer의 스타일링은 웹페이지의 첫인상을 결정짓는 중요한 요소로, 어두운 배경과 흰색 텍스트의 대비를 통해 주요 정보를 강조하고 있습니다.
이처럼 기본적인 스타일링 요소들을 적절히 활용하면, 간단한 웹페이지라도 깔끔하고 보기 좋은 레이아웃을 구성할 수 있습니다. 앞으로 이러한 기초를 바탕으로 더 다양한 스타일링 기법을 시도해 보며, 자신의 웹페이지를 보다 세련되고 사용자 친화적으로 만들어 보시길 바랍니다.
낄낄낄낄낄 ㅎㅎㅎㅎㅎㅎㅎㅎㅎ (실성한거 아님)
결론
이 예제 코드를 통해 HTML의 기본 구조와 스타일링 방법을 배울 수 있었습니다. HTML5의 시맨틱 태그를 사용해 웹페이지의 구조를 명확히 하고, CSS를 사용해 페이지의 디자인을 간단히 설정할 수 있다는 것을 알게 되었습니다. 또한, 웹페이지를 구성할 때 header, nav, main, footer와 같은 시맨틱 태그를 사용하면 가독성과 유지보수성이 향상된다는 점을 느꼈습니다.
이러한 기초적인 웹페이지 구성 방법을 이해하고 나면, 더 복잡한 레이아웃과 스타일링도 쉽게 적용할 수 있을 것입니다. 앞으로 이러한 기초를 바탕으로 더 다양한 웹페이지를 만들어 보고, CSS의 고급 기능을 활용하는 방법도 배워나가고 싶습니다. 이 글이 HTML을 처음 배우는 분들에게 도움이 되길 바랍니다.
