본문 바로가기
HTML

HTML_현대자동차홈페이지_2024-07-15

by 앵보몬 2024. 7. 16.
728x90
반응형

현대자동차홈페이지

1) 목표 설정 : 만들고 싶은 홈페이지의 종류와 기능을 명확히 정의합니다.

2) 구조 설계 : 페이지 구성, 메뉴 구성, 콘텐츠 배치 등을 미리 계획합니다.

3) 디자인 구상 : 전체적인 디자인 컨셉, 색상, 글꼴 등을 정합니다.

 

그림부분을 라이브러리로 작업합니다. (요구사항)

1) 라이브러리 : https://swiperjs.com/, https://bxslider.com/

2) 그림 무료사용 : pxels(픽셀), pixabay(픽서베이)

3) 닷홈에 홈페이지 배포(deployment)

 

images.zip
0.81MB
car.css
0.01MB
car.html
0.00MB
car1.html
0.00MB
car2.html
0.00MB

 

car.html

<!DOCTYPE html>

<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>hyundai</title>
    <link rel="stylesheet" href="car.css" />
  </head>
  <body>
    <div id="container">
      <header>
        <nav>
          <ul id="main-nav">
            <li><a href="#intro">회사소개</a></li>
            <li><a href="#model">모델</a></li>
            <li><a href="#car">이 달의 추천</a></li>
            <li><a href="car1.html">문의하기</a></li>
            <li><a href="car2.html">시승예약</a></li>
          </ul>
        </nav>
      </header>

      <section id="intro">
        <div class="page-title">
          <h1>회사소개</h1>
        </div>
        <div class="content">
          <div class="photo">
            <img src="images/hyundai.jpg" alt=""/>
          </div>
          <div class="text">
            <p class="name">함께 나아가는 미래</p>
            <p>
              기술 발전은 인류애에 바탕을 두고 있을 때 비로소 의미가 있습니다. 현대자동차는 로보틱스, AAM(Advanced Air Mobility) 등의 미래 모빌리티, 그리고 수소 에너지까지 확장된 사업 영역을 영위하며 휴머니티의 관점에서 더욱 크고 의미 있는 뜻을 실현하고, 인류를 위해 옳은 일을 하고자 합니다.</p>
            <br>
            <br>
            <br>
            <div class="content">
              <div class="photo">
            <img src="images/human.jpg" alt=""/>
          </div>
            <p class="name">휴머니티에 대한 신념으로 시작한 꿈</p>
            <p>
              현대자동차는 모든 삶을 바꾸는 혁신은 반드시 사람에서 시작하고 사람에서 끝나야 한다고 믿습니다. 이는 한국 전쟁 이후 폐허가 된 국가를 일으키기 위해 도로를 닦고 다리를 놓으며 국토를 재건하고, 자동차를 통해 경제 성장의 기틀을 마련했던 고 정주영 선대회장님으로부터 이어져온 현대자동차의 이념입니다. 언제나 국민의 더 나은 내일을 위해 인간 중심의 혁신을 이어온 현대자동차는 이제 전세계 모든 인류의 안전하고 자유로운 이동을 실현하기 위해 전진합니다.</p>
          </div>
        </div>
      </section>
      <section id="model">
        <div class="page-title">
          <h1>모델</h1>
        </div>
        <div class="content">
          <div class="photo">
            <img
              src="images/avante.jpg"/>
          </div>
          <p id="aaa">
            <a href="https://www.hyundai.com/kr/ko/e/vehicles/avante/catalog" target="_blank"><b>아반떼 카탈로그</b></a>
        </div>
        <br>
        <br>
        <br>
        <div class="content">
          <div class="photo">
            <img
              src="images/GRANDEUR.jpg"/>
          </div>
          <p id="aaa">
            <a href="https://www.hyundai.com/kr/ko/e/vehicles/avante/catalog" target="_blank"><b>그렌저 카탈로그</b></a>
        </div>
        <br>
        <br>
        <br>
        <div class="content">
          <div class="photo">
            <img
              src="images/SANTAFE.jpg"/>
          </div>
          <p id="aaa">
            <a href="https://www.hyundai.com/kr/ko/e/vehicles/the-all-new-santafe-hybrid/catalog" target="_blank"><b>싼타페 카탈로그</b></a>
        </div>
        <br>
        <br>
        <br>
        <div class="content">
          <div class="photo">
            <img
              src="images/SONATA.jpg"/>
          </div>
          <p id="aaa">
            <a href="https://www.hyundai.com/kr/ko/e/vehicles/the-all-new-santafe-hybrid/catalog" target="_blank"><b>소나타 카탈로그</b></a>
        </div>
      </section>

      <section id="car">
        <div class="page-title">
          <h1>이 달의 가장 인기있는 차종</h1>
        </div>
        <div class="content">
          <div class="photo">
            <img
              src="images/SANTAFE.jpg"
              alt="싼타페"
              style="border: 1px solid white; border-radius: 50%"
            />
          </div>
          <div class="text1">
            <ol>
              <li class="text1">
                현대자동차의 대표 모델인 싼타페 MX5가 2월 판매량 1위(현대자동차 차종 기준)를 기록했습니다.
              </li>
              <li class="text1">
                우선 현대자동차는 전년 대비 4.1% 감소한 31만 4909대를 판매한 것으로 나타났습니다.
              </li>
              <li class="text1">
                아산공장 전기차 설비 공사와 함께 울산3공장 라인 합리화 공사로 그랜저, 아반떼 등의 인기 모델들이 생산을 중단한 것이 판매 감소의 주요 원인입니다.
            </li>
            </ol>
          </div>
        </div>
      </section>
      <footer>
        <p>Hyundai</p>
      </footer>
    </div>
  </body>
</html>

 

car1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="car.css"/>
</head>
<div id="container">
    <header>
      <nav>
        <ul id="main-nav">
          <li><a href="car.html#intro">회사소개</a></li>
          <li><a href="car.html#model">모델</a></li>
          <li><a href="car.html#car">이 달의 추천</a></li>
          <li><a href="car1.html">문의하기</a></li>
          <li><a href="car2.html">시승예약</a></li>
        </ul>
      </nav>
    </header>
<body>
  <fieldset class="memo1">
      <h4>문의하기</h4>
      <label for="memo"></label>
      <br><textarea id="memo" cols="40" rows="4" placeholder="문의하고 싶은 내용을 간략히 써 주세요"></textarea>
      <!-- <fieldset class="memo2">
        <input type="submit" value="접수하기">
        <input type="submit" value="다시쓰기">
    </fieldset> -->
    <!-- <div>
    <fieldset class="memo2">
      <input type="submit" value="접수하기">
      <input type="submit" value="다시쓰기">
    </div> -->
    <input type="submit" value="접수하기">
    <input type="submit" value="다시쓰기">
    <input type="button" value="프로그램 종료" onclick="window.close()">
  </fieldset>
</body>
</html>

 

car2.html

<!DOCTYPE HTML>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문의내역</title>
  <link rel="stylesheet" href="car.css" />
  <style>
      .container {
        width: 960px;
        margin: 0 auto;
      }

      .navi {
        width: 960px;
        height: 60px;
        padding-bottom: 10px;
        border-bottom: 2px solid #ccc;
      }

      .navi ul {
        list-style: none;
        padding-top: 10px;
        padding-bottom: 5px;
      }

      .navi ul li {
        float: left;
        width: 150px;
        padding: 10px;
      }

      .navi a:link,
      .navi a:visited {
        display: block;
        font-size: 14px;
        color: #000;
        padding: 10px;
        text-decoration: none;
        text-align: center;
      }

      .navi a:hover,
      .navi a:focus {
        background-color: skyblue;
        color: #fff;
      }

      .navi a:active {
        background-color: blue;
      }

    #signup {
      background:#fff;
      border:1px solid #222;
      border-radius: 5px;
      padding: 20px;
      width: 400px;
      margin:30px auto;
    }

    #signup fieldset {
      border: 1px solid #ccc;
      margin-bottom: 30px;
    }
       
    #signup legend {
      font-size: 16px;
      font-weight: bold;
      padding-left:5px;
      padding-bottom: 10px;
    }
 
    #signup ul li {
      line-height: 30px;
      list-style: none;
      padding: 5px 10px;
      margin-bottom: 2px;
    }
         
    #signup fieldset:first-of-type label {
      float: left;
      font-size: 13px;
      width: 60px;
    }

    /* #signup input[type=text], input[type=tel] {
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 5px;
      width: 200px;
    } */
 
    #signup input:not([type=radio]) {
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 5px;
      width: 200px;
    }
    #signup input:not([type=radio]):hover {
      border-color: #f00;
    }
    #signup input:checked + label {  /* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
      color:red;  /* 글자색 */
      font-weight:bold;  /* 글자 굵게 */
    }

    #signup button {  
      border: 1px solid #222;
      border-radius: 20px;
      display: block;
      font: 16px 맑은고딕,굴림,돋움;
      letter-spacing: 1px;
      margin: auto;
      padding: 7px 25px;
    }

    #signup b {
      float: left;
      font-size: 13px;
      width: 110px;
    }
  </style>
</head>
<body>
  <div id="container">
    <header>
      <nav>
        <ul id="main-nav">
          <li><a href="car.html#intro">회사소개</a></li>
          <li><a href="car.html#model">모델</a></li>
          <li><a href="car.html#car">이 달의 추천</a></li>
          <li><a href="car1.html">문의하기</a></li>
          <li><a href="car2.html">시승예약</a></li>
        </ul>
      </nav>
    </header>
    <form id="signup">    
      <fieldset>
        <legend>개인 정보</legend>
        <ul>
          <li>
            <label for="fullname">이름</label>
            <input id="fullname" name="fullname" type="text" required placeholder="홍길동">
          </li>
          <li>
            <label for="tel">연락처</label>
            <input id="tel" name="tel" type="tel" required placeholder="xxx-xxxx-xxxx">
          </li>
          <li>
            <label for="text">주민정보</label>
            <input id="text name="text" type="text" required placeholder="xxxxxx-xxxxxxx">
          </li>          
        </ul>
      </fieldset>
      <fieldset>  
        <legend>선호하는 차량</legend>
        <ul>
          <li>
            <input type="radio" name="room" id="basic">
            <label for="basic">아반떼</label>
            <input type="radio" name="room" id="family">
            <label for="family">그렌저</label>
          </li>      
          <li>
            <input type="radio" name="room" id="family">
            <label for="family">싼타페</label>
            <input type="radio" name="room" id="family">
            <label for="family">소나타</label>
          </li>          
        </ul>
      </fieldset>
      <button type="submit">예약하기</button>
    </form>
  </div>
</body>
</html>

 

car.css

@import url("https://fonts.googleapis.com/css2?family=Dongle:wght@300&display=swap");

body {
    font-family: "Dongle", sans-serif;
    font-size: x-large;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 1.3em;
}

p {
    font-size: 5em;
    line-height: 2.5;
    font-weight: bolder;
}

.name{
    color: darkgray;
    text-shadow: 5px 5px 5px white;
    text-align: center;
}

.text1 {
    font-size: 2em;
}

nav {
    grid-area: nav;
    height: 70px;
    background: skyblue;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

#main-nav {
    list-style: none;
    margin: 0;
    padding: 10px;
    text-align: center;
}

#main-nav li {
    margin-right: 0;
    box-shadow: 10px;
    text-align: center;
    font-size: 2em;
    display: inline-block;
    color: #fff;
    margin: auto;
    line-height: 20px;
}

nav ul li a {
    display: inline-block;
    width: 150px;
    font-size: 0.8em;
    padding: 10px 20px;
    background-color: skyblue;
    font-weight: bolder;
    color: white;
    text-decoration: none;
    transition-duration: 0.5s;
    transition-property: all;
    transition-timing-function: ease-in;
    text-align: center;
    box-shadow: 10px 10px 20px skyblue;
}

nav ul li a:hover {
    background-color: white;
    color: skyblue;
}

#container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        /* "header header" */
        "nav nav"
        "content content"
        "footer footer";
    width: 100%;
    margin: 0 auto;
}

header {
    grid-area: header;
    grid-column: 1/2;
    width: 100%;
    height: 500px;
    background: url(images/car.jpg) center no-repeat;
    background-size: cover;
}

#intro {
    grid-area: intro;
    position: relative;
    width: 100%;
    padding: 15px 5% 10px 5%;
}

#model {
    grid-area: model;
    position: relative;
    width: 100%;
    padding: 15px 5% 10px 5%;
}

#car {
    grid-area: car;
    position: relative;
    width: 100%;
    padding: 15px 5% 10px 5%;
}

footer {
    grid-area: footer;
    width: 100%;
    height: 100px;
    background: skyblue;
    clear: both;
}

#container section:nth-child(odd) {
    background: rgb(204, 204, 204);
}

.page-title {
    position: absolute;
    top: 20px;
    left: 0;
    padding: 30px 50px;
}

.page-title h1 {
    margin-bottom: 30px;
}

.content {
    margin: 80px auto 10px;
    width: 90%;
    padding: 20px;
}

.content ol {
    margin-top: 20px;
    font-size: 0.8em;
}

.sub-titles {
    color: #0094ff;
    font-weight: 600;
}


footer p {
    font-family: 'Oleo Script', cursive;
    font-size: 1.5em;
    line-height: 100px;
    color: white;
    text-align: center;
}

#intro,
#model,
#car {
    clear: both;
    height: 420px;
    padding: 15px 2% 10px 5%;
}

.photo {
    width: 42%;
    display: block;
}

.photo>img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: 30px;
}

#intro .photo,
#model .photo {
    float: left;
    margin-right: 5%;
}

#car .photo {
    float: right;
    margin-left: 10%;
    margin-right: 5%;
}

@media screen and (min-width: 992px) {
    #container {
        width: 995px;
        margin: 0 auto;
        border: 1px solid #ccc;
        grid-template-columns: 2fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
            "header header"
            "intro intro"
            "model model"
            "car car"
            "footer footer";
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #container {
        margin: 0 auto;
        border: 1px solid #ccc;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "header header"
            "intro model"
            "car car"
            "footer footer";
    }

    header {
        grid-column: 1 / -1;
    }

    #intro,
    #model,
    #car {
        height: auto;
        font-size: 60%;
    }
}

@media screen and (max-width: 767px) {
    #container {
        display: grid;
        margin: 0 auto;
        border: 1px solid #ccc;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        grid-template-areas:
            "header"
            "intro"
            "model"
            "car"
            "footer";
    }
    nav ul li a {
        display: block;
        width: 60px;
        font-size: 0.5em;
        padding: 0px auto;
        background-color: skyblue;
        font-weight: bolder;
        color: white;
        text-decoration: none;
        transition-duration: 0.5s;
        transition-property: all;
        transition-timing-function: ease-in;
        text-align: center;
        box-shadow: 10px 10px 20px skyblue;
    }
}

header {
    height: 300px;
    grid-column: 1 / -1;
}

#intro,
#model,
#car {
    height: auto;
    font-size: 30%;
}

#aaa {
    font-size: xx-large;
}

a:link {
    color: white;
}

a:visited {
    color: white;
}

a:hover {
    color: brown;
    font-size: 22px;
}

a:active {
    color: aqua;
}

#memo{
    width: 100%;
}

fieldset{
    width: 90%;
}

h4{
    height: 1px;
}

.memo1{
    width: 100%;
}

 

 

728x90
반응형

'HTML' 카테고리의 다른 글

HTML_기업은행홈페이지_2024-08-08  (0) 2024.08.08
HTML(홈페이지만들기_주의사항)_2024-08-01  (0) 2024.08.01
HTML(media_query)_2024-07-12  (2) 2024.07.14
HTML(Animation)_2024-07-10  (0) 2024.07.11
HTML(transition)_2024-07-10  (0) 2024.07.10

관련글

티스토리툴바