Pet's House 에 오신 것을 환영합니다 | 맞춤형 반려동물 서비스

소개

이 랩에서는 웹사이트의 주요 콘텐츠 영역에 집중합니다. 이 섹션은 "Pet's House"의 서비스를 보여줍니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 93%입니다.학습자들로부터 98%의 긍정적인 리뷰율을 받았습니다.

회사 소개 레이아웃

About Us 섹션은 이미지 부분과 텍스트 콘텐츠 부분으로 나눌 수 있으며, <img> 태그를 사용하여 이미지를 추가하고, <h2> 태그를 사용하여 제목을 추가하며, <p> 태그를 사용하여 텍스트 단락을 추가합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main>
      <div class="container">
        <section id="home" class="cover-sect">
          <div class="title-text">
            <h1>Welcome</h1>
            <p>~ This website offers personalised services for pets. ~</p>
          </div>
          <div class="box-feature">
            <img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
          </div>
        </section>
        <section id="about" class="story-sect">
          <div class="section-text">
            <h2>About Us</h2>
            <p>
              we're about creating a community of happy pets and happier pet
              owners. <br /><br />
              Our exceptional customer service team is dedicated to providing
              you with a seamless shopping experience, offering expert support
              from browsing to delivery and beyond. <br /><br />We understand
              the importance of fast, reliable service, which is why we offer
              expedited shipping options and hassle-free returns.
            </p>
          </div>
          <div class="box-feature circle">
            <img src="images/intro.png" />
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

id 글로벌 속성은 전체 문서에서 고유해야 하는 식별자 (ID) 를 정의합니다. 이는 요소의 이름과 같은 class와 유사하지만, id 는 고유하다는 점이 다르며, id 속성은 북마크를 설정하는 기능도 가지고 있으며, 이는 나중에 실험에서 사용할 것입니다.
<h1>에서 <h6> HTML 요소는 여섯 개의 섹션 제목 레벨을 나타냅니다.
<br> HTML 요소는 텍스트에 줄 바꿈 (캐리지 리턴) 을 생성합니다. 줄의 구분이 중요한 시, 주소 등을 작성하는 데 유용합니다.

✨ 솔루션 확인 및 연습

디스플레이 레이아웃

Display 페이지는 주로 이미지와 텍스트로 구성되어 있으며, 이 페이지를 이미지와 텍스트로 구성된 세 개의 섹션으로 나눌 수 있습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main>
      <div class="container">
        <section id="home" class="cover-sect">
          <div class="title-text">
            <h1>Welcome</h1>
            <p>~ This website offers personalised services for pets. ~</p>
          </div>
          <div class="box-feature">
            <img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
          </div>
        </section>
        <section id="about" class="story-sect">
          <div class="section-text">
            <h2>About Us</h2>
            <p>
              we're about creating a community of happy pets and happier pet
              owners. <br /><br />
              Our exceptional customer service team is dedicated to providing
              you with a seamless shopping experience, offering expert support
              from browsing to delivery and beyond. <br /><br />We understand
              the importance of fast, reliable service, which is why we offer
              expedited shipping options and hassle-free returns.
            </p>
          </div>
          <div class="box-feature circle">
            <img src="images/intro.png" />
          </div>
        </section>
        <section id="display" class="samples">
          <div class="section-text">
            <h2>Display</h2>
          </div>
          <div class="services">
            <div class="service">
              <figure>
                <img src="images/service-1.png" alt="Dog walking services" />
                <figcaption>Provide pet care services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-2.png" alt="Pet check-up services" />
                <figcaption>Provide pet check-up services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-3.png" alt="Pet washing services" />
                <figcaption>Provide pet washing services.</figcaption>
              </figure>
            </div>
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

<figure> HTML 요소는 자체 포함된 콘텐츠를 나타내며, 선택적 캡션이 있을 수 있으며, 이는 <figcaption> 요소를 사용하여 지정됩니다. 그림, 캡션 및 내용은 단일 단위로 참조됩니다.

✨ 솔루션 확인 및 연습

요약

이 랩에서는 "Pet's House" 서비스를 선보이는 웹사이트의 주요 섹션을 개발하는 과정을 안내했습니다. 이 단계는 웹사이트가 제공하는 내용을 상세히 설명하고, 구조화된 콘텐츠와 미학을 통해 방문객에게 사이트의 가치를 높이는 데 매우 중요했습니다.

반려동물 서비스 웹사이트 소개

소개

회사 소개 레이아웃

디스플레이 레이아웃

요약