요일 HTML

오늘 홈페이지를 만들었어요
지난 5일간 쌓인 지식을 모아 스타일링에 CSS를 가미한 기능적인 레시피북 사이트를 구축했습니다.

사이트 링크 - Ofameh_Recipe_Site

HTML 코드 블록:

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Recipe Book</title>
    <link rel="stylesheet" href="styles.css">
  
  
    <header>
      <h1 id="Ofameh-s-Recipe-Book">Ofameh's Recipe Book</h1>
    </header>
    <nav>
      <ul>
        <li>
          <button onclick="location.href='#breakfast';">Breakfast</button>
        </li>
        <li>
          <button onclick="location.href='#lunch';">Lunch</button>
        </li>
        <li>
          <button onclick="location.href='#dinner';">Dinner</button>
        </li>
        <li>
          <button onclick="location.href='#breakfast';">Dessert</button>
        </li>
        <li>
          <button onclick="location.href='#contact';">Contact</button>
        </li>
      </ul>
    </nav>
    <main>
      <section id="breakfast">
        <h2 id="Breakfast-Recipes">Breakfast Recipes</h2>
        <article>
          <h3 id="요일-HTML">요일 HTML</h3>
          <img src="/static/imghw/default1.png" data-src="./images/pancake.jpg" class="lazy" alt="요일 HTML">
          <h4 id="Ingredients">Ingredients:</h4>
          <ul>
            <li>2 cups all-purpose flour</li>
            <li>2 tablespoons sugar</li>
            <li>2 teaspoons baking powder</li>
            <li>1 teaspoon baking soda</li>
            <li>1/2 teaspoon salt</li>
            <li>2 cups buttermilk</li>
            <li>2 large eggs</li>
            <li>1/4 cup melted butter</li>
          </ul>
          <h4 id="Instructions">Instructions:</h4>
          <ol>
            <li>In a bowl, mix the dry ingredients together.</li>
            <li>In another bowl, whisk the wet ingredients together.</li>
            <li>Combine the dry and wet ingredients and mix until smooth.</li>
            <li>Heat a griddle over medium heat and grease it lightly.</li>
            <li>
              Pour batter onto the griddle and cook until bubbles form on the
              surface.
            </li>
            <li>Flip and cook until golden brown on the other side.</li>
          </ol>
        </article>
      </section>
      <section id="lunch">
        <h2 id="Lunch-Recipes">Lunch Recipes</h2>
        <article>
          <h3 id="Grilled-Cheese-Sandwich">Grilled Cheese Sandwich</h3>
          <img src="/static/imghw/default1.png" data-src="./images/grilled_cheese.jpg" class="lazy" alt="Grilled Cheese Sandwich">
          <h4 id="Ingredients">Ingredients:</h4>
          <ul>
            <li>2 slices of bread</li>
            <li>2 slices of cheese</li>
            <li>Butter</li>
          </ul>
          <h4 id="Instructions">Instructions:</h4>
          <ol>
            <li>Butter one side of each slice of bread.</li>
            <li>
              Place one slice of bread, buttered side down, on a skillet over
              medium heat.
            </li>
            <li>
              Top with cheese and the other slice of bread, buttered side up.
            </li>
            <li>
              Cook until the bread is golden brown and the cheese is melted,
              flipping once.
            </li>
          </ol>
        </article>
      </section>
      <section id="dinner">
        <h2 id="Dinner-Recipes">Dinner Recipes</h2>
        <article>
          <h3 id="Spaghetti-Bolognese">Spaghetti Bolognese</h3>
          <img src="/static/imghw/default1.png" data-src="/images/spaghetti_bolognesse.webp" class="lazy" alt="Spaghetti Bolognese">
          <h4 id="Ingredients">Ingredients:</h4>
          <ul>
            <li>200g spaghetti</li>
            <li>2 tablespoons olive oil</li>
            <li>1 onion, chopped</li>
            <li>2 garlic cloves, minced</li>
            <li>400g ground beef</li>
            <li>1 can of tomatoes</li>
            <li>2 tablespoons tomato paste</li>
            <li>1 teaspoon dried oregano</li>
            <li>Salt and pepper to taste</li>
          </ul>
          <h4 id="Instructions">Instructions:</h4>
          <ol>
            <li>Cook the spaghetti according to package instructions.</li>
            <li>
              Heat olive oil in a pan and sauté the onion and garlic until
              softened.
            </li>
            <li>Add the ground beef and cook until browned.</li>
            <li>
              Stir in the tomatoes, tomato paste, and oregano. Simmer for 20
              minutes.
            </li>
            <li>Season with salt and pepper.</li>
            <li>Serve the sauce over the spaghetti.</li>
          </ol>
        </article>
      </section>
      <section id="dessert">
        <h2 id="Dessert-Recipes">Dessert Recipes</h2>
        <article>
          <h3 id="Chocolate-Cake">Chocolate Cake</h3>
          <img src="/static/imghw/default1.png" data-src="./images/chocolate_cake.jpg" class="lazy" alt="Chocolate Cake">
          <h4 id="Ingredients">Ingredients:</h4>
          <ul>
            <li>1 and 3/4 cups all-purpose flour</li>
            <li>1 and 1/2 cups sugar</li>
            <li>3/4 cup cocoa powder</li>
            <li>1 and 1/2 teaspoons baking powder</li>
            <li>1 and 1/2 teaspoons baking soda</li>
            <li>1 teaspoon salt</li>
            <li>2 large eggs</li>
            <li>1 cup milk</li>
            <li>1/2 cup vegetable oil</li>
            <li>2 teaspoons vanilla extract</li>
            <li>1 cup boiling water</li>
          </ul>
          <h4 id="Instructions">Instructions:</h4>
          <ol>
            <li>Preheat your oven to 350°F (175°C) and grease a cake pan.</li>
            <li>In a large bowl, combine the dry ingredients.</li>
            <li>
              Add the eggs, milk, oil, and vanilla, and beat on medium speed for
              2 minutes.
            </li>
            <li>Stir in the boiling water (batter will be thin).</li>
            <li>Pour the batter into the prepared pan.</li>
            <li>
              Bake for 30-35 minutes, or until a toothpick inserted into the
              center comes out clean.
            </li>
          </ol>
        </article>
      </section>

      <section id="contact">
        <h2 id="Contact-Us"> Contact Us </h2>
        <article>
          <b> Want More Recipes </b> <br>
         <label for="subscribe"> Subscribe to our newsletter </label>
         <input type="checkbox" id="subscribe" name="subscribe"> <br>
         <br>
         Shoot us an email: <a href="mailto:osowoofameh@gmail.com" target="_blank"> <button> Email </button> </a> <br>
         <br>
         Catch Us on X: <a href="https://x.com/trader_mkk" target="_blank"> <button> Twitter </button></a>
         <br>
        </article>
      </section>
    </main>
    <footer>
      <p>
        <b>
          © 2024 Ofameh <br>
          All rights reserved.</b>
      </p>
    </footer>
  

CSS 코드 블록-

  body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header,
main,
footer {
  padding: 20px;
  margin: 10px;
}

header {
  background-color: black;
  color: white;
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

nav ul li {
  margin: 0 10px;
}

section {
  margin-bottom: 20px;
}

article {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: black;
  transform: translateY(-2px);
  color: white;
} 

이 연습의 전체 요점이 프로젝트 기반 학습이기 때문에 5일차에 지금까지 배운 모든 것을 종합하여 이것을 구축하는 것은 나에게 성취감을 안겨주었습니다.
그래서 실제로 5일 동안 이 일을 하고 이만큼 좋은 사이트를 구축할 수 있다는 것은 나에게 큰 의미가 있습니다

즉, 6~10일에는 제가 며칠 동안 웹사이트라고 부르는 기능을 다루게 되며, 여기서 매일 점점 더 어렵고 복잡해지는 사이트를 구축하게 됩니다.
거기 있어라!

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