<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/e20ee0UFbRY?si=UIUs9Hh-6Xavvauu" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/e20ee0UFbRY?si=UIUs9Hh-6Xavvauu" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><span style="color: #000000;">HTML과 CSS를 사용하여 반응형 바닥글 디자인</span> </b></span></p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZZhx/d90630f7aa84cb9c83ab9b2ce01f0c86abe1b08c" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZZhx/d90630f7aa84cb9c83ab9b2ce01f0c86abe1b08c" data-origin-width="612" data-origin-height="341"></div><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>index_Footer tag </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="KO_YOON"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><meta charset="UTF-8"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><meta http-equiv="X-UA-Compatible" content="IE=edge"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><meta name="viewport" content="width=device-width, initial-scale=1.0"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><title>글쓰기</title></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><style></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@import‎‎ url("<a href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" target="_top" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins&display=swap</a>");</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>* {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  box-sizing: border-box;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin: 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-family: "poppins", sans-serif;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  align-items: center;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  justify-content: center;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  min-height: 100vh;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  max-width: 1440px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin: 0 auto;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 0 2rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container h2 {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 5rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #ddd;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  text-align: center;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding-bottom: 10rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>footer {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: fixed;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  bottom: 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #fff;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  box-shadow: -5px -0px 2px rgba(0, 0, 0, 0.5);</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>footer a {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  text-decoration: none;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #1c2833;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.footer_content {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: grid;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  grid-template-columns: repeat(4, 1fr);</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 2rem 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  grid-gap: 2.5rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.footer_headings {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #000;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding-bottom: 2rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: relative;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.footer_headings::after {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  content: "";</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 3px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #e74c3c;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 25%;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: absolute;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  top: 30px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  left: 0px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.first_section img {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: block;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  object-fit: cover;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.first_section p {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 1.5rem 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  text-align: justify;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.social_icons {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  justify-content: space-between;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.social_icons i {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 1.5rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  cursor: pointer;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #ddd;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 50px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 50px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  align-items: center;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  justify-content: center;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 5px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transform: translateY(0);</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transition: all 0.5s ease-in-out;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #1c2833;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.social_icons i:hover {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transform: translateY(-5px);</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* second sections */</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.second_section ul {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  list-style: none;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.second_section ul li {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin: 1rem 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.second_section ul li:first-child {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-top: 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* third section */</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.third_section ul {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  list-style: none;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.third_section ul li {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin: 1rem 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.third_section ul li:first-child {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-top: 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.third_section ul li i {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-right: 10px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #ddd;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 5px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 1.5rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 1rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.third_section span {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  align-items: center;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  justify-content: center;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* fourth section */</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form_control input,</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>textarea {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  outline: none;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border: none;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border: 1px solid #ddd;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 0.5rem 1rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-bottom: 0.5rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 5px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 0.9rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.fourth_section button {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: block;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  outline: none;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #e74c3c;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border: none;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #fff;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 0.6rem 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  cursor: pointer;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 5px;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 0.9rem;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.footer_txt {</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #f0f3f4;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 1.1rem 0;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  text-align: center;</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  box-shadow: -5px -0px 2px rgba(0, 0, 0, 0.5);</b></span> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></style></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       <body></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <div class="container"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <h2>Website Content</h2> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <footer> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <div class="container"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="footer_content"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <div class="first_section"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <h3 class="footer_headings">About Us</h3> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <img src="images/logo-1.png" alt="" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              Lorem ipsum dolor sit amet consectetur adipisicing elit. A </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              adipisci minus ratione nulla cum ut repellendus omnis, odit </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              ducimus nisi? </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="social_icons"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="fa-brands fa-facebook"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="fa-brands fa-twitter"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="fa-brands fa-pinterest"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="fa-brands fa-youtube"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <div class="second_section"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <h3 class="footer_headings">Useful links</h3> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <li><a href="#">Home</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <li><a href="#">About</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <li><a href="#">Services</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <li><a href="#">Projects</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <li><a href="#">Contact Us</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <div class="third_section"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <h3 class="footer_headings">Address</h3> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <i class="fa fa-envelope"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <span>admin@onlineittuts.com</span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              </li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <i class="fa-solid fa-location-dot"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <span>A108 Adam Street, New York, NY </span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              </li> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <i class="fa-solid fa-phone"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <span>+15589 55488 55</span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              </li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <div class="fourth_section"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <h3 class="footer_headings">Contact Us</h3> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <form action="#"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <div class="form_control"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <input type="text" placeholder="Enter an Email" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <div class="form_control"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <textarea </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                  name="" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                  id="" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                  cols="10" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                  rows="5" </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                  placeholder="Write Message....." </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                ></textarea> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <button type="button">Send</button> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </form> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <div class="footer_txt"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          All rights reservered by </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <a href="<a href="https://www.onlineittuts.com" target="_blank" class="ke-link">https://www.onlineittuts.com</a>">OnlineITtuts</a> &copy; 2023. </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </p> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </footer></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>index_Footer CSS5</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><br>@import‎ url("<a href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins&display=swap</a>"); <br><br>* { <br>  box-sizing: border-box; <br>  margin: 0; <br>  padding: 0; <br>  font-family: "poppins", sans-serif; <br>} <br><br>body { <br>  display: flex; <br>  align-items: center; <br>  justify-content: center; <br>  min-height: 100vh; <br>} <br><br>.container { <br>  max-width: 1440px; <br>  width: 100%; <br>  margin: 0 auto; <br>  padding: 0 2rem; <br>} <br><br>.container h2 { <br>  font-size: 5rem; <br>  color: #ddd; <br>  text-align: center; <br>  padding-bottom: 10rem; <br>} <br><br>footer { <br>  width: 100%; <br>  position: fixed; <br>  bottom: 0; <br>  background: #fff; <br>  box-shadow: -5px -0px 2px rgba(0, 0, 0, 0.5); <br>} <br><br>footer a { <br>  text-decoration: none; <br>  color: #1c2833; <br>} <br><br>.footer_content { <br>  display: grid; <br>  grid-template-columns: repeat(4, 1fr); <br>  padding: 2rem 0; <br>  grid-gap: 2.5rem; <br>} <br><br>.footer_headings { <br>  color: #000; <br>  padding-bottom: 2rem; <br>  position: relative; <br>} <br><br>.footer_headings::after { <br>  content: ""; <br>  height: 3px; <br>  background: #e74c3c; <br>  width: 25%; <br>  position: absolute; <br>  top: 30px; <br>  left: 0px; <br>} <br><br>.first_section img { <br>  display: block; <br>  object-fit: cover; <br>  width: 100%; <br>} <br>.first_section p { <br>  padding: 1.5rem 0; <br>  text-align: justify; <br>} <br><br>.social_icons { <br>  display: flex; <br>  justify-content: space-between; <br>} <br><br>.social_icons i { <br>  font-size: 1.5rem; <br>  cursor: pointer; <br>  background: #ddd; <br>  width: 50px; <br>  height: 50px; <br>  display: flex; <br>  align-items: center; <br>  justify-content: center; <br>  border-radius: 5px; <br>  transform: translateY(0); <br>  transition: all 0.5s ease-in-out; <br>  color: #1c2833; <br>} <br><br>.social_icons i:hover { <br>  transform: translateY(-5px); <br>} <br><br>/* second sections */ <br>.second_section ul { <br>  list-style: none; <br>} <br><br>.second_section ul li { <br>  margin: 1rem 0; <br>} <br><br>.second_section ul li:first-child { <br>  margin-top: 0; <br>} <br><br>/* third section */ <br>.third_section ul { <br>  list-style: none; <br>} <br><br>.third_section ul li { <br>  margin: 1rem 0; <br>  display: flex; <br>} <br><br>.third_section ul li:first-child { <br>  margin-top: 0; <br>} <br><br>.third_section ul li i { <br>  margin-right: 10px; <br>  background: #ddd; <br>  border-radius: 5px; <br>  font-size: 1.5rem; <br>  padding: 1rem; <br>} <br><br>.third_section span { <br>  display: flex; <br>  align-items: center; <br>  justify-content: center; <br>} <br><br>/* fourth section */ <br>.form_control input, <br>textarea { <br>  outline: none; <br>  border: none; <br>  border: 1px solid #ddd; <br>  padding: 0.5rem 1rem; <br>  margin-bottom: 0.5rem; <br>  width: 100%; <br>  border-radius: 5px; <br>  font-size: 0.9rem; <br>} <br><br>.fourth_section button { <br>  display: block; <br>  width: 100%; <br>  outline: none; <br>  background: #e74c3c; <br>  border: none; <br>  color: #fff; <br>  padding: 0.6rem 0; <br>  cursor: pointer; <br>  border-radius: 5px; <br>  font-size: 0.9rem; <br>} <br><br>.footer_txt { <br>  background: #f0f3f4; <br>  padding: 1.1rem 0; <br>  text-align: center; <br>  box-shadow: -5px -0px 2px rgba(0, 0, 0, 0.5); <br>}</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> index_Footer CSS5</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> <br>@media (max-width: 768px) { <br>  body { <br>    min-height: 50vh; <br>  } <br><br>  .footer_content { <br>    grid-template-columns: repeat(2, 1fr); <br>    grid-gap: 4rem; <br>    padding: 3rem 0; <br>  } <br><br>  .social_icons i { <br>    font-size: 1.3rem; <br>    width: 45px; <br>    height: 45px; <br>  } <br><br>  footer { <br>    position: absolute; <br>    top: 50%; <br>  } <br><br>  .container h2 { <br>    font-size: 4rem; <br>    padding-bottom: 5rem; <br>  } <br>} <br><br>@media (max-width: 568px) { <br>  .footer_content { <br>    grid-template-columns: repeat(1, 1fr); <br>    grid-gap: 3rem; <br>    padding: 2.5rem 0; <br>  } <br><br>  .container h2 { <br>    font-size: 3rem; <br>    padding-bottom: 4rem; <br>  } <br><br>  .social_icons i { <br>    font-size: 1rem; <br>    width: 35px; <br>    height: 35px; <br>  } <br><br>  footer { <br>    position: absolute; <br>    top: 30%; <br>  } <br>}</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> index_Footer tag</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>grammarly.com   22時55分</b></span></p>
<!-- -->
]]>
첫댓글 https://arhaanali.medium.com/responsive-footer-design-using-html-and-css-9a8773a5f84b