AI 웹개발 취업캠프 - 2일차 과제 제출 [NIPA/정보통신산업진흥원]

윤태경·2023년 7월 19일

NIPA웹개발취업캠프

과제

배웠던 HTML 내용을 토대로 내가 만들고 싶은 웹사이트의 메인페이지 레이아웃을 잡아보기

참고 사이트

https://web.joongna.com/

레이아웃 분석

웹브라우저의 내용을 담고 있는 body 요소 내의 컨텐츠를 header, nav, main, footer 4가지로 나누었다. 그후 내가 원하는 서비스 내용을 담아 소스코드를 작성해보았다.

1. header

2. nav

3. main

스케치

분석한 사이트를 토대로 레이아웃을 스케치하였다.

소스코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>컴퓨터나라</title>
</head>
<body>
  <header>
    <h1><a href="#">컴퓨터나라</a></h1>
    <input placeholder="검색창"/>
  </header>
  <nav>
    <ul>
      <li>CPU</li>
      <li>VGA</li>
      <li>Mainboard</li>
      <li>RAM</li>
      <li>PSU</li>
    </ul>
  </nav>
  <main>
    <section>
      <article>
        <h3>요즘 뜨는 CPU</h3>
        <div>INTEL</div>
        <div>AMD</div>
      </article>
      <article>
        <h3>요즘 뜨는 VGA</h3>
        <div>NVIDIA</div>
        <div>RADEON</div>
      </article>
    </section>
  </main>
  <footer>
    <h4>contact</h4>
    <p>010-0000-0000</p>
    <p>@naver.com</p>
  </footer>
</body>
</html>