HTML 및 CSS를 사용하여 웹 사이트에 대한 도움말 섹션을 만드는 방법

5381 단어 htmltutorialcsswebdev
안녕하세요 친구,

또 다른 HTML 및 CSS 프로젝트에 오신 것을 환영합니다. 이 자습서에서는 HTML 및 CSS를 사용하여 웹 사이트에 대한 도움말 섹션을 만드는 방법을 배웁니다. 그럼 시작하겠습니다...

프로젝트 설정:

폴더 helpSection 만들기 (데스크톱에 만들었습니다. 원하는 위치에 만들 수 있습니다.)
여기에 index.html 및 styles.css 파일 2개가 필요합니다.
이것은 작은 튜토리얼이므로 별도의 폴더를 만들지 않고 helpSection 폴더에 모든 것을 덤프합니다...

이제 VS 코드에서 내 프로젝트를 열겠습니다. 무엇을 사용하든 상관없이 원하는 코드 편집기를 사용할 수 있습니다.

index.html에서 컨테이너를 만들고 해당 컨테이너에서 이미지 섹션과 정보 섹션을 만들고 나중에 스타일을 지정할 수 있도록 클래스를 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Help Section</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
    <main>
        <section class="container">
          <section class="img-section">
          </section>
          <section class="info"> 
          </section>
        </section>
      </main>
</body>
</html>


이제 컨테이너의 스타일을 지정하고 Google 글꼴을 추가하고 싶습니다. 기본 글꼴은 너무 지루합니다😜😜 농담입니다. 개인적으로 모든 프로젝트에서 Google 글꼴을 사용하는 것을 좋아합니다. 필수는 아니지만 누군가의 개인 취향에 따라 다릅니다.

프로젝트에서 Google 글꼴을 가져오려면 sytles.css 파일을 열고 @import url()을 사용합니다.
@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300;400;500;600&display=swap');
또한 기본 패딩과 여백을 재설정하고 방금 가져온 글꼴 모음을 설정해 보겠습니다.

@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300;400;500;600&display=swap');
*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
 font-family: 'Akshar', sans-serif;
  transition: all 200ms ease-in;

}
body{
  padding:20px;
  margin: auto;
}
section.container{
  margin: auto;
  margin-top: 50px;
  min-width: 500px;
  width: 80%;
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 40px;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  padding: 20px;
}


출력은 다음과 같아야 합니다.



이제 index.html로 돌아와 섹션에 콘텐츠를 추가해 보겠습니다.

<section class="img-section">
        <img src="https://i.postimg.cc/7YZF63WQ/help-banner.png" alt="help image" />
      </section>
      <section class="info">
        <h3>NEED HELP?</h3>
        <p class="text1">We’re committed to serving you with the best possible support.</p>

        <p class="text2">CALL OUR TOLL FREE HELPLINE</p>
        <h3 class="head2">1800 000 4321</h3>
        <hr />
        <h3>VISIT US</h3>
        <p class="text3">Find our branch near you 
           <button>Click Here</button>
        </p>
      </section>


이제 HTML에 콘텐츠를 추가했으므로 이제 몇 가지 스타일을 추가하겠습니다. styles.css를 열고 다음 코드를 추가합니다.,

section.info{
  display: flex;
  flex-direction: column;
  gap: 20px;

}
section.info h3{
  font-size: 30px;
  font-weight: 500;
}
section.info p.text1{
  margin-top: -10px;
  font-size: 18px;
  font-weight: 500;
}
section.info p.text2{
  letter-spacing: 0.25px;
  font-weight: bold;
  margin-top: 10px;
}
section.info h3.head2{
  margin-top: -18px;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 1.75em;
}
section.info p.text3{
  margin-top: -15px;
  font-size: 1.25em;
}
section.info p.text3 button{
  padding: 5px 10px;
  border-radius: 8px;
  outline: none;
  border: none;
  background: brown;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.15em;
  cursor: pointer;
}


출력은 아래 이미지와 같아야 합니다.



내가 만들려는 최종 프로젝트와 거의 비슷해 보입니다..

그러나 여기에 한 가지가 있습니다. 반응이 없습니다. 작은 화면 크기에 반응하도록 미디어 쿼리를 추가해 보겠습니다.

style.css 열기

@media screen and (max-width:900px){
  section.container{
    width:80%;
    display: flex;
    flex-direction: column;
  } 
  section.container section.img-section{
    text-align: center;
  }
  section.container section.img-section img{
    width: 100%;


  }
}
@media screen and (max-width: 480px){
  section.container{
    width: 100%;
  }
  section.container section.img-section img{
    padding: 0;    
    width: 100%;
    overflow: hidden;

  }
}


우리 페이지는 작은 화면에서 이렇게 보여야 합니다...



오늘은 그게 다야!

아래 댓글 섹션에서 이 기능이 마음에 드셨는지 알려주세요. 내 코드를 개선하는 데 도움이 되는 귀하의 의견을 환영합니다.

좋아요와 팔로우 부탁드립니다. 이런 것들을 더 많이 공유하도록 격려합니다..

좋은 일이!
VueJs, Tailwind CSS, NodeJs 및 Laravel을 사용하여 Shopify Embed 앱을 구축하는 방법
제로 라인의 JS로 대화형 CSS 아바타 편집기 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage