HTML의 태그. HTML의 바닥글 태그는 태그 내에 정의됩니다.
, , , , , , 또는 내에서 바닥글 요소를 사용할 수 있습니다. ;. 항상 꼬리표. 이는 개별 블록 내에 포함됩니다. 웹페이지나 섹션의 바닥글 부분을 표시하는 데 사용되는 HTML의 바닥글 태그입니다. 섹션 요소로 작동하지 않으므로 개요에 새 섹션이 생성되지 않습니다.
<footer>
<p>Some text</p>
</footer>
태그는 로 묶인 태그 바닥글 섹션에 표시할 텍스트가 포함된 태그입니다.
HTML5 웹페이지나 다른 HTML 문서에서 가장 유용한 요소 중 하나입니다. 개별 블록의 일부로 간주됩니다.
HTML 특별한 종류의 속성 목록은 없지만 accesskey, data, class, contenteditable, dir, draggable, hided, id, lang, dropzone, 맞춤법 검사, 스타일, 제목, 번역 등과 같은 모든 전역 속성도 지원합니다. onafterprint, onbeforeprint, onbeforeunload, onerror, onload, onhashchange, onmessage, onoffline, onpopstate, onstorage, onresize 등과 같은 이벤트 속성으로
HTML의 바닥글 태그 예
HTML 문서에 바닥글을 포함하는 방법에는 여러 가지가 있습니다. 그 중 일부를 하나씩 살펴보겠습니다.
예시 #1
간단히
HTML 코드:
<h2 id="Footer-Example"> Footer Example </h2>
<footer>
<p>Published by EDUCBA</p>
<p>Contact us: <a href="%E2%80%9Dmailto:%5Bemail%C2%A0protected%5D%E2%80%9D"> <u> HTML의 바닥글 태그 US </u> </a>
</p></footer>
출력:
예시 #2
바닥글 개체는 가장 복구 가능한 HTML 요소(예: )를 나타내는 데 사용됩니다. 요소. getElementById();를 통해 액세스할 수 있습니다. 이 예에서는 개체를 통해 바닥글에 액세스하는 방법과 바닥글 데이터에 액세스하기 위해 새 개체를 만드는 방법을 보여줍니다.
HTML 코드:
<h3 id="Footer-Object-Example">Footer Object Example </h3>
<footer id="footerDemo">
<p>all rights reserved @ EDUCBA </p>
</footer>
<p>Press button to check footer section.</p>
<button onclick=" footerFunction()">Click Me</button>
<p id="footerobject"></p>
<script>
function footerFunction() {
var f = document.getElementById("footerDemo").innerHTML;
document.getElementById(" footerobject ").innerHTML = f;
}
</script>
출력:
예시 #3
다음은 저작권 정보가 포함된 데이터의 예시입니다.
HTML 코드:
<style type="text/css">
#shareicons img {
width: 50px;
padding: 10px;
display: inline;
}
</style>
<h1 id="Uday-Wire-Industries">Uday Wire Industries</h1>
<h4 id="u-About-US-u"> <u> About US </u> </h4>
<p>We provide all types of HB wires in different size 5.5 mm , 6.5 mm , 7 mm , 8 mm , 12mm.All those wires drawn from the machines which works on new latest technology for producing best quality of HB wires. Those are kinds of raw material which is going to be useful for various wire industries , Cement pipe making industries ,for nails manufacturing industries and many other industries in the market. Nails also in various sizes 1/10' , 1.5/10' , 2/10' , 2.5/10' , 3/10' 4/10 etc. We are dealing with wire rods and cut rods also. Binding wires also with various different types.</p> <h4 id="Our-Specialty">Our Specialty</h4>
Good quality
Smooth Wire rods
perfect coil bundle
No cut rods in coil
coils in small size packaging bundle
Please send us Your requirements to us .So we can give best to You!
Thank You !
Share on
Uday wire Industries
Shed No. 5 , 6, 7 ,8
Industrial Area, MIDC Sector
Pune.
All rights reserved @Uday wire Industries
출력:
예시 #4
다음은 고정 바닥글의 예시입니다.
HTML 코드:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footerdemo {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:blanchedalmond;
color: black;
text-align: left;
}
</style>
<img src="/static/imghwm/default1.png" data-src="img.jpg" class="lazy" style="max-width:90%" alt="HTML의 바닥글 태그" >
<div class="footerdemo">
<h4 id="About-US">About US</h4>
<ul>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> About </a> </li>
<li> <a href="#"> Career </a> </li>
<li> <a href="#"> Contact US </a> </li>
<li> <a href="#"> Visit Here </a> </li>
</ul>
</div>
출력:
예시 #5
아래 예에서 바닥글은 저작권 관련 내용을 표시하는 데 사용됩니다.
HTML 코드:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.header {
background-color:aliceblue;
padding: 10px;
text-align: center;
}
.part {
float: left;
width: 25%;
padding: 10px;
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:darkgoldenrod;
}
</style>
<div class="header">
<h1 id="Latest-Technology-trends-in-market">Latest Technology trends in market </h1>
</div>
<div class="row">
<div class="part">
<h2 id="Robotic-Process-Automation">Robotic Process Automation</h2>
<p>RPA is latest trending technology which is automating jobs. It deals with the software to automate business methodologies like processingtransactions, replying to the emails, iterpreting with data etc.</p>
</div>
<div class="part">
<h2 id="Machine-Learing">Machine Learing</h2>
<p>Machine learing is the process considered as subset of Artificial Intelligence.Its based on neural networks, deep learing and natural language processing (NLP)</p>
</div>
<div class="part">
<h2 id="Artificial-Intelligence">Artificial Intelligence</h2>
<p>One of the fastest growing technology is AI, which is based on system which built human intelligence to perform tasks. It helps to complete tasks more perfectly and in short time than humans. </p>
</div>
<div class="part">
<h2 id="BlockChain">BlockChain</h2>
<p>blockchain is trendy technology in upcoming days for maintaining transactions with encrypted and decentralized nature. Here you are going to make chain of data, so there is no need to trust on third party.</p>
</div>
</div> <br>
<div class="footer">
<h4 id="All-rights-reserved-Techpanda">All rights reserved @Techpanda 2019</h4>
</div>
출력:
결론
그래서 바닥글이 작성자 정보, 저작권 사항, 일부 중요한 사항 및 기타 데이터를 표시하는 데 사용된다는 점을 극복할 수 있습니다. 항상 body 섹션 내에 넣어야 합니다. 문서 내에서 두 개 이상의 바닥글을 사용할 수 있습니다.