웹페이지를 디자인할 때는 웹페이지 요소를 우아하게 배열해야 합니다. 사용자가 탐색하기 쉽고 단순해야 합니다. 이는 이러한 요소를 잘 구조화된 방식으로 배열하는 방법을 제공합니다. HTML 레이아웃은 웹 페이지에 매우 좋은 모양을 제공하고 디자인하기 쉬운 방법을 제공합니다. 이는 간단한 표준 HTML 태그를 사용하여 웹 요소를 디자인할 수 있는 간단한 방법입니다. HTML은 웹페이지의 다양한 부분을 디자인할 수 있는 다양한 레이아웃 요소를 제공합니다.
HTML 레이아웃 요소
이 기사에서는 다양한 레이아웃 요소와 그 예를 살펴보겠습니다. 이러한 요소들을 활용하여 신문과 유사한 단순한 구조를 디자인해보겠습니다.
1. <헤더>
이 요소는 웹페이지의 헤더를 정의하는 데 사용됩니다. 여기에는 페이지 제목이나 일부 로고 또는 소개 콘텐츠가 포함됩니다.
코드 :
<!DOCTYPE html>
<html>
<head>
<title> EduCba </title>
</head>
<body>
<header style = "height: 100px; width: 100%; background-color: #607D8B;" >
<h1 style=" color: #fff; text-align: center; padding-top: 25px; font-size: 30px;" > Header Section</h1>
</header>
</body>
</html> 로그인 후 복사
출력 :
2.
이 요소에는 메뉴 목록에 대한 링크가 포함됩니다. 이 요소는 다양한 탐색 링크에 대한 컨테이너와 같습니다. 링크는 다른 페이지나 같은 페이지에 있습니다.
코드 :
마지막 예의 헤더 아래에 탐색 요소를 추가해 보겠습니다. <스타일> 추가
요소 및
헤더 섹션 바로 아래 부분.
<head>
<style>
li{
display: inline-flex;
padding: 25px
}
ul{
text-align: center;
}
</style>
</head>
<body>
<nav style = "background-color: #607d8b70;" >
<ul>
<li> <a href = "#"> Navigation Link1 </a> </li>
<li> <a href = "#"> Navigation Link2 </a> </li>
<li> <a href = "#"> Navigation Link3 </a> </li>
</ul>
</nav>
</body> 로그인 후 복사
출력 :
3. <섹션>
이 요소는 웹페이지의 메인 섹션과 같습니다. 여기에는 모든 종류의 정보가 포함될 수 있습니다. 텍스트, 이미지 등을 포함할 수 있습니다.
4.
이름에서 알 수 있듯이 이 요소에는 단락과 같은 콘텐츠, 항목에 대한 자세한 설명 또는 모든 종류의 정보가 포함됩니다. 일반적으로 웹페이지의 정보를 담는 주요 부분이 됩니다.
5. <제쳐두고>
이 요소는 섹션이나 기사와 같이 기본 콘텐츠 측면의 콘텐츠를 정의합니다. 이 정보 요소는 선택 사항이며 일반적으로 추가 정보나 광고 내용을 포함합니다.
코드 :
이 세 가지 요소를 모두 탐색 모음 아래에 추가해 보겠습니다.
<style>
li { display: inline-flex;
padding: 25px
}
section{
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
}
article{
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
}
aside{
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
}
h2 , p {
text-align: center;
color: #9c27b0;
}
ul{
text-align: center;
}
</style>
<body>
<div class = "main" >
<section>
<h2> Section Part </h2>
<p> Some Text </p>
</section>
<article>
<h2> Article Part </h2>
<p> Some Detailed Text </p>
</article>
<aside>
<h2> Sidebar Part </h2>
<p> This will contain static part or anything like advertisement etc. </p>
</aside>
</div>
</body> 로그인 후 복사
출력 :
6.
이 요소는 사용자에게 웹페이지에 대한 추가 세부정보를 표시합니다. 여기에는 사용자가 선택할 수 있는 추가 정보가 포함될 수 있습니다. 이 요소는 기본적으로 클릭 시 세부정보를 표시하거나 숨기는 기능을 제공합니다.
7.
이 요소는 <세부정보> 요소. 숨겨지고 클릭 시 표시되는 정보가 이 태그에 포함됩니다. 이 요소는 세부정보 요소 안에 있습니다.
코드 :
기존 예시의 요약 요소와 함께 세부정보 요소를 추가해 보겠습니다.
에서 추가 섹션과 기사 요소 부분 뒤에 아래 코드를 추가합니다. 태그.
<body>
<details>
<summary> Summary: click here to show details</summary>
<p> Details: Upon clicking summary element, details will be shown to the user </p>
</details>
</body>
<style>
details {
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
}
details p {
font-size: 18px;
}
summary {
color: white;
font-size: 22px;
}
</style> 로그인 후 복사
출력 1 : 세부정보 요소를 클릭하지 않음
출력 2: 세부정보 요소를 클릭한 후
8. <바닥글>
모든 웹페이지 하단에는 바닥글이라는 섹션이 하나씩 있습니다. 이 <바닥글> 요소는 웹페이지 하단의 바닥글 섹션을 정의합니다. 바닥글 섹션에는 일반적으로 저작권, 연도, 연락처 정보 등이 포함됩니다. 웹페이지 하단에 바닥글을 두는 것이 표준 관행입니다.
코드 :
웹페이지 하단에 바닥글을 추가해 보겠습니다.
<footer style = " height: 100px; background-color:#607D8B; width: 100%; text-align: center;">
<h3 style = " color: #fff; text-align: center; padding-top: 10px; font-size: 30px; " >Footer Section</h3>
<p> © Copyright ( Year ) </p>
</footer> 로그인 후 복사
출력 :
최종 코드와 출력은 다음과 같습니다.
코드:
EduCba
Article Part
Some Detailed Text
Summary: click here to show details
Details: Upon clicking summary element, details will be shown to the user
<footer style = " height: 100px; background-color:#607D8B; width: 100%; text-align: center;">
<h3 style = " color: #fff; text-align: center; padding-top: 10px; font-size: 30px; " >Footer Section</h3>
<p> © Copyright ( Year ) </p>
</footer>
로그인 후 복사
출력 :
결론
따라서 HTML 레이아웃 요소는 웹페이지를 디자인할 때 매우 유용합니다. 개발자가 잘 구조화된 웹 페이지를 디자인하는 데 도움이 됩니다. 이러한 레이아웃 요소를 적절하게 사용하면 웹 페이지의 읽기 환경이 향상됩니다. 우리는 대부분의 주요 HTML 레이아웃 요소를 자세히 살펴보았습니다.
위 내용은 HTML 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
