HTML 레이아웃-HTML 튜토리얼-php.cn

HTML 레이아웃 요소

1. <헤더>

3. <섹션>

5. <제쳐두고>

8. <바닥글>

결론

집

웹 프론트엔드

HTML 튜토리얼

HTML 레이아웃

王林

Sep 04, 2024 pm 04:15 PM

html html5 HTML Tutorial HTML Properties HTML tags

웹페이지를 디자인할 때는 웹페이지 요소를 우아하게 배열해야 합니다. 사용자가 탐색하기 쉽고 단순해야 합니다. 이는 이러한 요소를 잘 구조화된 방식으로 배열하는 방법을 제공합니다. 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>

로그인 후 복사

출력:

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>

로그인 후 복사

출력:

HTML 레이아웃

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>

로그인 후 복사

출력:

HTML 레이아웃

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: 세부정보 요소를 클릭하지 않음

HTML 레이아웃

출력 2: 세부정보 요소를 클릭한 후

HTML 레이아웃

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>

로그인 후 복사

출력:

HTML 레이아웃

최종 코드와 출력은 다음과 같습니다.

코드:




 EduCba 




 Header Section 



  Navigation Link1  
  Navigation Link2  
  Navigation Link3  




 Section Part 
 Some Text 


 Article Part
 Some Detailed Text 


 Sidebar Part 
 This will contain static part or anything like advertisement etc. 



 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 레이아웃 요소를 자세히 살펴보았습니다.

위 내용은 HTML 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.