[HTML/CSS/JS] 현대자동차 글로벌 웹사이트 클론코딩

2022. 5. 16. 16:41

#1. 현대자동차 클론코딩

1. 전체 레이아웃 구조 확인

2. 구현결과

3. HTML 기본 구조 및 CSS

- index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>현대자동차 공식 웹사이트이고 싶다</title>

  <link rel="shortcut icon" href="assets/img/favicon.ico" />
  <link rel="stylesheet" href="assets/css/styleScss.min.css" />

</head>
<body>

  <!-- header -->
  <div data-includes="inc/header.html" id="include_header"></div>

  <!-- contents -->
  <div id="contents">
    <!-- top contents -->
    <div class="top_contents">

      <!-- hashtag -->
      <div class="hashtag">
      </div>
      
      <!-- main contents -->
      <div class="contents_box">
      </div>
    </div>

    <!-- middle contents -->
    <div class="middle_contents">
    </div>

    <!-- bottom contents -->
    <div class="row_contents" id="row_contents">
    </div>
  </div>

  <!-- footer -->
  <div data-includes="inc/footer.html" id="include_footer"></div>
	
  <!-- 참조 -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="assets/js/include.js"></script>
  <script src="assets/js/contentJson.js"></script>
  <script src="assets/js/socialJson.js"></script>

</body>
</html>

- style.scss

@import url('https://fonts.googleapis.com/css2?
family=Titillium+Web:wght@200;300;400;600;700;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Titillium Web', sans-serif;
  list-style: none;
  text-decoration: none;
}

.small_title {
  font-size: 12px;
  font-weight: bold;
  color: #002c5f;
  padding: 3px 0;
}

.img_text {
  font-size: 18px;
  font-weight: bold;
}

.clear::after {
  content: "";
  display: block;
  float: none;
  clear: both;
}

.close_btn:hover {
  transform: rotate(180deg);
}

4. 구현 및 상세내용

1) Header

- header.html

<div id="header">
  <!-- 로고 -->
  <div class="header_wrap clear">
    <div class="logo">
      <a href="https://www.hyundai.com/">
        <img src="assets/img/logo.webp" alt="현대자동차 로고" />
      </a>
    </div>

    <!-- 가운데 위치한 메뉴 -->
    <div class="menu">
      <ul class="menu_wrap clear">
        <li class="menu_li"><a href="#">브랜드</a></li>
        <li class="menu_li"><a href="#">아이오닉</a></li>
        <li class="menu_li"><a href="#">라이프스타일</a></li>
        <li class="menu_li">
          <a href="#" target="_blank">모델</a>
          <img class="ico_link" src="assets/img/ico_link.webp" />
        </li>
        <li class="menu_li" id="introduce"><a href="#">회사소개</a></li>
      </ul>
    </div>

    <!-- 오른쪽에 위치한 메뉴 -->
    <div class="right_menu">
      <ul class="right_menu_wrap clear">
        <li class="top_img_li margin"><a href="#"><img class="top_img" src="assets/img/btn_topmenu_language.png" /></a></li>
        <li class="top_img_li"><a href="#"><img class="top_img" src="assets/img/btn_topmenu_Channelh.webp" /></a></li>
        <li class="top_img_li">
          <button><img class="top_img" id="search_icon" src="assets/img/btn_topmenu_search.png" /></button>
        </li>
        <li class="language">
          <button id="language_btn">Language</button>
          <img class="arrow" src="assets/img/ico_more.webp" />
          <!-- 언어설정 서브메뉴 -->
          <ul class="language_menu">
            <li><a href="#">English</a></li>
            <li><a href="#">한국어</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

<!-- 회사소개 서브 메뉴 -->
<div class="sub_menu">
  <ul class="sub_menu_wrap clear">
    <li><a href="#">기업이념</a></li>
    <li><a href="#">지속가능성</a></li>
    <li><a href="#">해외사업망</a></li>
    <li><a href="#">IR정보</a></li>
    <li>
      <a href="#" target="_blank">뉴스</a>
      <img class="ico_link" src="assets/img/ico_link.webp" />
    </li>
    <li>
      <a href="#" target="_blank">문의하기</a>
      <img class="ico_link" src="assets/img/ico_link.webp" />
    </li>
    <li><img class="close_btn" src="assets/img/btn_search_close.webp" /></li>
  </ul>
</div>

<!-- 검색 메뉴 -->
<div class="search_menu">
  <div class="search_menu_wrap">
    <input type="text" placeholder="검색어를 입력해 주세요." />
    <button class="sub_search_icon"><img src="assets/img/btn_topmenu_search.png" /></button>
    <div class="search_keyword">
      <h3>추천 검색어</h3>
      <ul>
        <li><a href="#">IONIQ 5</a></li>
        <li><a href="#">NEXO</a></li>
        <li><a href="#">Elantra</a></li>
        <li><a href="#">Kona</a></li>
        <li><a href="#">Sustainability</a></li>
        <li><a href="#">EV</a></li>
      </ul>
    </div>
    <img class="close_btn" src="assets/img/noticeCloseBtn.png" />
  </div>
</div>

- style.scss

/* --- header --- */
#header {
  position: relative;
  width: 100%;
  background-color: #f6f3f2;

  .header_wrap {
    position: relative;
    margin: auto;
    width: 1120px;

    /* --- 왼쪽에 위치한 로고 ---- */
    .logo {
      float: left;
      padding: 27px 70px 22px 0;

      img {
        display: flex;
        width: 155px;
      }
    }

    /* --- 가운데 위치한 메뉴 영역 --- */
    .menu_wrap {
      position: relative;
      float: left;
      display: flex;

      .menu_li { 
        padding: 23px 35px 26px;

        a {
          color: #555;
          font-weight: 600;
          &:hover { color: #002c5f; }
        }

        @at-root .ico_link {
          padding-left: 5px;
          filter: invert(1);
        }
      }
    }

    /* --- 오른쪽에 위치한 메뉴 영역 --- */
    .right_menu_wrap {
      .top_img_li {
        float: left;
        padding: 26px 0 23px 20px;
      }

      .margin { margin-left: 30px; }

      li button {
        border: none;
        cursor: pointer;
        background-color: #f6f3f2;

      }
      .top_img {width: 17px;}

      .language {
        button {
          padding: 20px 0 20px 30px;
          font-size: 19px;
          font-weight: 600;
          color: #555;
          &:hover { color: #002c5f; }
        }

        .arrow {
          position: relative;
          width: 10px;
          filter: invert(.6);
          cursor: pointer;
          transition: .5s;
        }
      }

      /* --- 언어 설정 메뉴 --- */
      .language_menu {
        position: absolute;
        right: 0px;
        padding: 20px 30px 0;
        background-color: #f6f3f2;
        text-align: center;
        z-index: 9;
        display: none;

        li {
          padding-bottom: 10px;
          &:last-child a {
            color: #000;
            font-weight: bold;
          }

          a {
            color: #555;
            font-size: 14px;
            &:hover {
              color: #000;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}

/* --- 회사소개 서브메뉴 --- */

.sub_menu {
  position: absolute;
  width: 100%;
  border-top: 1px solid #e4dcd3;
  border-bottom: 1px solid #e4dcd3;
  background-color: #f6f3f2;
  z-index: 9;
  display: none;
  // max-height: 0px;
  // transition: max-height .5s ease-in-out;

  .sub_menu_wrap {
    width: 1120px;
    margin: auto;

    li:first-child {
      margin-left: 60px;
    }

    li:not(:last-child) {
      position: relative;
      float: left;
      padding: 22px 0 22px 80px;
    }

    a {
      color: #555;
      font-weight: 600;
      &:hover { color: #002c5f; }
    }

    .close_btn {
      position: relative;
      left: 200px;
      top: 25px;
      cursor: pointer;
      transition: .5s;
    }
  }
}

/* --- 돋보기 서치 메뉴 --- */
.search_menu {
  position: absolute;
  width: 100%;
  background-color: #f2f2f2;
  z-index: 9;
  display: none;

  .search_menu_wrap {
    width: 1120px;
    margin: auto;

    /* 입력창 */
    input {
      width: 500px;
      margin: 30px 280px;
      font-size: 18px;
      border: none;
      padding: 15px 20px;
      outline: none;
    }

    .sub_search_icon {
      position: relative;
      top: -2px;
      right: 25.5%;
      border: none;
      background-color: #fff;
      padding: 18px 19px 19px;
      cursor: pointer;

      img { width: 15px;}
    }

    .search_keyword {
      position: relative;
      margin: auto;
      width: 520px;
      padding-bottom: 90px;

      h3 { padding: 10px 0; }

      li {
        float: left;
        padding-right: 30px;
        color: #555;
        font-size: 18px;
        cursor: pointer;

        a {
          color: #555;
          &:hover { color: #00aad2; }
        }
      }
    }

    .close_btn {
      background-color: #f2f2f2;
      position: relative;
      left: 1100px;
      top: -230px;
      cursor: pointer;
      transition: .5s;
    }
  }
}

- include.js

Array.from(document.querySelectorAll("*[data-includes]")).forEach(async v => {
  const include = v.dataset.includes;
  let html = null;

  try {
    const response = await axios.get(include);
    html = response.data;
  } catch(e) {
    console.error(e);
  };

  if(html != null) {
    v.outerHTML = html;

    // 회사소개 마우스 올리면 나오는 메뉴 구현
    const introduce = document.querySelector("#introduce");
    const sub = document.querySelector(".sub_menu");
    
    introduce.addEventListener("mouseover", e => {
      // sub.style.maxHeight = 100 + "px";
      sub.style.display = "block";
      searchMenu.style.display = "none";
      languageMenu.style.display = "none";
    });
    introduce.addEventListener("mouseout", e => {
      // sub.style.maxHeight = null;
      sub.style.display = "none";
    });

    // 하위 메뉴 유지
    sub.addEventListener("mouseover", e => {
      sub.style.display = "block";
    });
    sub.addEventListener("mouseout", e => {
      sub.style.display = "none";
    });

    // 돋보기 누르면 나오는 검색창 구현
    // on / off 구현
    let searchToggle = true;

    const searchIcon = document.querySelector("#search_icon");
    const searchMenu = document.querySelector(".search_menu");

    searchIcon.addEventListener("click", e => {
      if(searchToggle === true) {
        searchMenu.style.display = "block";
        sub.style.display = "none";
        languageMenu.style.display = "none";

        searchToggle = false;
      } else {
        searchMenu.style.display = "none";

        searchToggle = true;
      }
    });


    // 언어 설정 버튼 on/off
    // language 옆에 화살표 애니메이션 구현
    let languageToggle = true;

    const languageBtn = document.querySelector("#language_btn");
    const languageMenu = document.querySelector(".language_menu");
    const languageArrow = document.querySelector(".arrow");

    languageBtn.addEventListener("click", e => {
      if(languageToggle === true) {
        languageMenu.style.display = "block";
        languageArrow.style.transform = "rotate(180deg)";

        sub.style.display = "none";
        searchMenu.style.display = "none";

        languageToggle = false;
      } else {
        languageMenu.style.display = "none";
        languageArrow.style.transform = "none";

        languageToggle = true;
      }
    });


    
    // x 버튼 누르면 메뉴 닫기 구현
    const closeBtn = document.querySelectorAll(".close_btn").forEach(v => {
      v.addEventListener("click", e => {

        // 회사소개 닫기
        sub.style.display = "none";

        // 돋보기 닫기
        searchMenu.style.display = "none";
      });
    });
  };
});

2) Top-contents

- index.html

      <!-- hashtag -->
      <div class="hashtag">
        <ul>
          <li><a href="#"># 아이오닉 5</a></li>
          <li><a href="#"># 인터뷰</a></li>
          <li><a href="#"># 넥쏘</a></li>
          <li><a href="#"># 브랜드비전</a></li>
          <li><a href="#"># 현대자동차 × 방탄소년단</a></li>
          <li><a href="#"># 아임인차지</a></li>
          <li><a href="#"># for Tomorrow</a></li>
          <li><a href="#"># 현대자동자 × 블룸버그</a></li>
        </ul>
      </div>
      
      <!-- main contents -->
      <div class="contents_box">
        <div class="contents head_contents">
          <div class="contents_wrap">
            <p class="category" id="category"></p>
            <h2 class="subject title" id="subject"></h2>
            <img class="contents_img" id="contents_img" />
          </div>
          <div class="contents_wrap">
            <div class="ioniq_dj_text">
              <p class="category white" id="category"></p>
              <h3 class="subject white" id="subject"></h3>
            </div>
            <img class="contents_img" id="contents_img" />
          </div>
        </div>
      </div>

- style.scss

/* --- hashtag --- */
#contents {
  position: relative;
  width: 100%;

  .top_contents {
    position: relative;
    width: 1120px;
    margin: auto;

    .hashtag {
      padding: 50px 0 50px;

      ul {
        display: flex;
        text-align: center;
      }

      a {
        display: inline-block;
        padding: 0 30px;
        color: #888;
        font-size: 13px;
        border-right: 1px solid #e1e1e1;
        transition: .5s;
        &:hover { color: #00aad2; }
      }
    }
  }
}

/* --- main contents --- */
.contents {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 30px 0;

  .category {
    display: block;
    color: #002c5f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .subject {
    display: block;
    font-size: 18px;
  }

  .title { font-size: 45px; }
  .contents_img { cursor: pointer; }

  .ioniq_dj_text {
    position: relative;

    .white {
      position: relative;
      padding: 0 18px;
      top: 95px;
      color: #fff;
    }

    h3 { font-size: 23px; }
  }
}

.head_contents {
  padding-bottom: 50px;
  align-items: flex-end;
}

- contentJson.js

// axios를 통해 호출한 데이터를 가지고 자바스크립트로 HTML 요소 생성
const contentJson = async e => {
  let json = null;

  try {
    // axios로 로컬 json 파일 호출 (json-sever x)
    json = await axios.get("assets/backend/content.json");
  } catch(e) {
    console.error(e);
    return;
  }
  
  if(json != null) {
    const {data} = json;

    const contentsBox = document.querySelector(".contents_box");

    // for문을 사용해서 HTML 요소를 생성한다.
    for(let i = 0; i < 4; i++) {
      const makeContents = document.createElement("div");
      makeContents.classList.add("contents");
      contentsBox.appendChild(makeContents);

      for(let i = 0; i < 3; i++) {
        const makeContentsWrap = document.createElement("div");
        makeContentsWrap.classList.add("contents_wrap");
        makeContents.appendChild(makeContentsWrap);

        const makeContentsImg = document.createElement("img");
        makeContentsImg.classList.add("contents_img");
        makeContentsImg.setAttribute("id", "contents_img");
        makeContentsWrap.appendChild(makeContentsImg);

        const makeCategory = document.createElement("p");
        makeCategory.classList.add("category");
        makeCategory.setAttribute("id", "category");
        makeContentsWrap.appendChild(makeCategory);

        const makeSubject = document.createElement("h3");
        makeSubject.classList.add("subject");
        makeSubject.setAttribute("id", "subject");
        makeContentsWrap.appendChild(makeSubject);
      }
    }

    // 생성한 아이디와 클래스값으로 호출
    const category = document.querySelectorAll("#category");
    const subject = document.querySelectorAll("#subject");
    const contentsWrap = document.querySelectorAll(".contents_wrap");
    const contentsImg = document.querySelectorAll("#contents_img");

    // json 객체의 내용을 가져온다.
    data.content.forEach((v,i) => {
      // 카테고리 추가
      category[i].innerHTML = v.category;
      // 서브젝트 추가
      subject[i].innerHTML = v.subject;
      // 각 컨텐츠에 사진 크기만큼 영역 지정
      contentsWrap[i].style.width = v.width + "px";

      // 이미지 파일 지정
      contentsImg[i].setAttribute("src", v.img_pc);
      // 이미지 크기 지정
      contentsImg[i].setAttribute("width", v.witdh);
      // 이미지 높이 지정
      contentsImg[i].setAttribute("height", v.height);
      // 이미지 클릭시 해당 url창을 띄운다.
      contentsImg[i].addEventListener("click", e => {
        window.open(v.url);
      })
    });
  }
};
// 호출
contentJson();

+ content.json

{
  "content": [
	{
		"category": "지속가능한 생활",
		"subject": "나만의 도시 정원을 가꾸는 법",
		"url": "https://www.hyundai.com/worldwide/ko/lifestyle/how-to-create-your-own-urban-garden",
		"img_pc": "assets/img/40-lifestyle-urban-gardening-pc-736.webp",
		"img_m": "assets/img/40-lifestyle-urban-gardening-m-580x514.webp",
		"width": 736,
		"height": 390
	},
	{
		"category": "지속가능한 모빌리티",
		"subject": "Power your beat: 아이오닉 5의 파워를 이용한 DJ공연",
		"url": "https://www.hyundai.com/worldwide/ko/ioniq/power-your-beat-dj-set",
		"img_pc": "assets/img/11-ioniq-power-your-beat-pc-352x390.webp",
		"img_m": "assets/img/11-ioniq-power-your-beat-m-580x280.webp",
		"width": 352,
		"height": 390
	},
	{
		"category": "고성능",
		"subject": "고성능 차를 운전하는 방법",
		"url": "https://www.hyundai.com/worldwide/ko/brand/how-to-drive-a-high-performance-car",
		"img_pc": "assets/img/05-n-drive-high-performance-pc-448.webp",
		"img_m": "assets/img/05-n-drive-high-performance-m-580x320.webp",
		"width": 448,
		"height": 400
	},
	{
		"category": "파트너쉽",
		"subject": "현대자동차 × WhisperAudios ASMR – 투싼과 함께 ASMR 사운드스케이프를 제작하다",
		"url": "https://www.hyundai.com/worldwide/ko/brand/asmr-tucson",
		"img_pc": "assets/img/86-brand-tucson-asmr-pc-352x400.webp",
		"img_m": "assets/img/86-brand-tucson-asmr-m-280.webp",
		"width": 352,
		"height": 400
	},
	{
		"category": "아이오닉",
		"subject": "밤하늘 별자리를 만나다: 아이오닉 5와 함께 맞이하는 새해",
		"url": "https://www.hyundai.com/worldwide/ko/ioniq/chasing-stars-with-ioniq-5",
		"img_pc": "assets/img/10-chasing-stars-pc-256.webp",
		"img_m": "assets/img/10-chasing-stars-m-280.webp",
		"width": 256,
		"height": 400
	},
	{
		"category": "아이오닉",
		"subject": "아이오닉 포레스트 신시도 프로젝트: 다음 세대를 위한 나무 심기",
		"url": "https://www.hyundai.com/worldwide/ko/ioniq/ioniq-forest-sinsido-project",
		"img_pc": "assets/img/09-ioniq-forest-pc-256.webp",
		"img_m": "assets/img/09-ioniq-forest-m-280.webp",
		"width": 256,
		"height": 400
	},
	{
		"category": "브랜드",
		"subject": "CES 2022: 현대자동차, 로보틱스와 메타버스가 결합된 메타모빌리티로 이동 경험의 영역을 확장하다",
		"url": "https://www.hyundai.com/worldwide/ko/brand/ces-2022",
		"img_pc": "assets/img/85-brand-ces-2022-pc-448.webp",
		"img_m": "assets/img/85-brand-ces-2022-m-280.webp",
		"width": 448,
		"height": 400
	},
	{
		"category": "아이오닉",
		"subject": "데이비드 드 로스차일드 × 현대자동차 – 차세대 탐험가에게 주는 영감",
		"url": "https://www.hyundai.com/worldwide/ko/ioniq/david-de-rothschild-hyundai-part-4",
		"img_pc": "assets/img/08-ioniq-david-de-rothschild-part4-pc-352x400.webp",
		"img_m": "assets/img/08-ioniq-david-de-rothschild-part4-m-580x320.webp",
		"width": 352,
		"height": 400
	},
	{
		"category": "아이오닉",
		"subject": "데이비드 드 로스차일드 × 현대자동차 – 모빌리티의 미래",
		"url": "https://www.hyundai.com/worldwide/ko/ioniq/david-de-rothschild-hyundai-part-3",
		"img_pc": "assets/img/07-ioniq-david-de-rothschild-part3-pc-352x400.webp",
		"img_m": "assets/img/07-ioniq-david-de-rothschild-part3-m-580x320.webp",
		"width": 352,
		"height": 400
	},
	{
		"category": "아이오닉",
		"subject": "데이비드 드 로스차일드 × 현대자동차 – 자연에게 목소리를 주다",
		"url": "https://www.hyundai.com/worldwide/ko/ioniq/david-de-rothschild-hyundai-part-2",
		"img_pc": "assets/img/06-ioniq-david-de-rothschild-part2-pc-352x400.jpg",
		"img_m": "assets/img/06-ioniq-david-de-rothschild-part2-m-280.jpg",
		"width": 352,
		"height": 400
	},
	{
		"category": "아이오닉",
		"subject": "데이비드 드 로스차일드 × 현대자동차 - 자연 환경 보호를 최우선으로 하는 협업",
		"url": "https://www.hyundai.com/worldwide/ko/ioniq/david-de-rothschild-hyundai-part-1",
		"img_pc": "assets/img/05-ioniq-david-de-rothschild-part1-pc-352x400.webp",
		"img_m": "assets/img/05-ioniq-david-de-rothschild-part1-m-280.webp",
		"width": 352,
		"height": 400
	},
	{
		"category": "브랜드",
		"subject": "헤리티지 시리즈 그랜저: 모던하게 재탄생된 1986년 플래그십 세단",
		"url": "https://www.hyundai.com/worldwide/ko/brand/heritage-series-grandeur",
		"img_pc": "assets/img/84-brand-heritage-grandeur-pc-448.webp",
		"img_m": "assets/img/84-brand-heritage-grandeur-m-580x320.webp",
		"width": 448,
		"height": 400
	},
	{
		"category": "브랜드",
		"subject": "브리타 라이니키 × 현대자동차 – 전기차 주행에 관한 다섯 가지 질문",
		"url": "https://www.hyundai.com/worldwide/ko/brand/ev-literacy-britta-reineke-part-3",
		"img_pc": "assets/img/83-brand-ev-literacy-part-three-pc-352x400.webp",
		"img_m": "assets/img/83-brand-ev-literacy-part-three-m-280.webp",
		"width": 352,
		"height": 400
	},
	{
		"category": "아이오닉",
		"subject": "아이오닉 콘셉트카 '세븐' : &quot;나만의 시간(Me Time)&quot;과 &quot;가족과의 시간(Family Time)&quot;을 위한 혁신",
		"url": "https://www.hyundai.com/worldwide/ko/ioniq/introducing-the-seven-concept",
		"img_pc": "assets/img/04-ioniq-seven-pc-256.webp",
		"img_m": "assets/img/04-ioniq-seven-m-280.webp",
		"width": 256,
		"height": 400
	}
   ]
}

3) Middle-contents

- index.html

    <!-- middle contents -->
    <div class="middle_contents">
      <div class="global_area">
        <img src="./assets/img/main-hyundai-in-your-country-pc.webp" />
        <div class="global_text">
          <h3>국가별 사이트를 방문해 보세요.</h3>
          <p>국가별 사이트를 방문하면 더 자세한 정보를 확인할 수 있습니다.</p>
          <button type="button">바로가기</button>
        </div>
      </div>
    </div>

- style.scss

/* --- middle contents --- */
.middle_contents {
  position: relative;
  margin-top: 150px;
  width: 100%;
  background-color: #002c5f;

  .global_area {
    position: relative;
    display: flex;
    justify-content: center;
    margin: auto;
    padding: 150px;

    .global_text {
      position: relative;
      width: 352px;
      padding: 30px;
      color: #fff;
      word-break: keep-all;

      h3 {
        font-size: 40px;
        margin-bottom: 10px;
      }

      p {
        font-size: 16px;
        margin-bottom: 30px;
      }

      button {
        padding: 8px 45px;
        border: none;
        font-size: 16px;
        color: #fff;
        background-color: #777673;
        cursor: pointer;
      }
    }
  }
}

4) Bottom-contents

- index.html

    <!-- bottom contents -->
    <div class="row_contents" id="row_contents">
      <div class="social_title">
        <p>소셜미디어</p>
        <h3>소셜미디어 둘러보기</h3>
      </div>
      <div class="social_contents"></div>
    </div>
  </div>

- style.scss

/* --- bottom contents --- */
.row_contents {
  position: relative;
  width: 1120px;
  margin: auto;
  padding: 70px 0 90px;

  .social_title {
    margin-bottom: 20px;

    p {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #002c5f;
      margin-bottom: 3px;
    }

    h3 { font-size: 40px; }
  }

  // --- 자바스크립트로 생성한 요소 --- //
  .social_contents {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .social_wrap {
      margin-bottom: 20px;
      cursor: pointer;

      .social_text {
        position: absolute;
        display: flex;
        top: 0;
        width: 300px;
        min-height: 300px;
        padding: 30px;
        margin: 29px 28px;
        font-size: 18px;
        color: #fff;
        line-height: 1.5;
        transition: .5s;
        word-break: keep-all;
        z-index: 5;

        .insta_icon {
          position: absolute;
          width: 30px;
          height: 30px;
          bottom: 10%;
        }
      }

      .row_social_text { top: 50%; }
    }
  }
}

- socialJson.js

// axios를 통해 호출한 데이터를 가지고 자바스크립트로 HTML 요소 생성
const socialJson = async e => {
  let json = null;

  try {
    // axios로 로컬 json 파일 호출 (json-sever x)
    json = await axios.get("assets/backend/social.json");
  } catch(e) {
    console.error(e);
    return;
  }
  
  if(json != null) {
    const {data} = json;

    const socialContents = document.querySelector(".social_contents");

    // for문을 사용해서 HTML 요소 생성
    for(let i = 0; i < 6; i++) {
      const makeSocialWrap = document.createElement("div");
      makeSocialWrap.classList.add("social_wrap");
      socialContents.appendChild(makeSocialWrap);

      const makeSocialImg = document.createElement("img");
      makeSocialImg.classList.add("social_img");
      makeSocialImg.setAttribute("id", "social_img");
      makeSocialWrap.appendChild(makeSocialImg);

      const makeSocialText = document.createElement("div");
      makeSocialText.classList.add("social_text");
      makeSocialText.setAttribute("id", "social_text");
      // i값이 2보다 작은 요소에 클래스값 추가
      if(i > 2) {
        makeSocialText.classList.add("row_social_text");
      };
      makeSocialWrap.appendChild(makeSocialText);
    };

    // 생성한 아이디와 클래스 값으로 호출
    const socialWrap = document.querySelectorAll(".social_wrap");
    const socialImg = document.querySelectorAll("#social_img");
    const socialText = document.querySelectorAll("#social_text");
  
    // forEach 문으로 data값에 접근
    data.social.forEach((v, i) => {
      // 이미지 파일 지정
      socialImg[i].setAttribute("src", v.img);
      // 이미지 클릭시 해당 url창을 띄운다.
      socialImg[i].addEventListener("click", e => {
        window.open(v.url);
      });

      // 마우스 올리면 텍스트 나타나는거 구현
      socialText[i].addEventListener("mouseover", e => {
        socialText[i].innerHTML = v.text;
        socialText[i].style.backgroundColor = "#002c5f";
        socialText[i].style.opacity = "1";

        // 인스타 아이콘
        const instaIcon = document.createElement("img");
        instaIcon.classList.add("insta_icon");
        instaIcon.setAttribute("src", "assets/img/instagram.webp");
        socialText[i].appendChild(instaIcon);
      });
      socialText[i].addEventListener("mouseout", e => {
        socialText[i].style.opacity = "0";
      });
    });
  }
};
socialJson();

+ social.json

{
	"social": [
	{
		"img": "assets/img/worldwide-main-instagram-01-8iihs-220315.webp",
		"url": "https://www.instagram.com/p/Ca3LimLKynU/?taken-by=hyundai_worldwide",
		"text": "2022년, 현대자동차 8개 차종이 미국 IIHS 충돌평가에서<br />최고안전한차로 선정되었습니다. @iihs_autosafety<br />#AutoSafety"
	},
	{
		"img": "assets/img/worldwide-main-instagram-02-womens-day-220315.webp",
		"url": "https://www.instagram.com/p/Ca07Q8kIAQU/?taken-by=hyundai_worldwide",
		"text": "여러분이 없었다면, 세상은 분명 지금과는 달랐을 것입니다.<br />#InternationalWomensDay"
	},
	{
		"img": "assets/img/worldwide-main-instagram-03-ioniq5-220315.webp",
		"url": "https://www.instagram.com/p/CarRgBarKow/?taken-by=hyundai_worldwide",
		"text": "아이오닉 5 고객의 50% 이상이 선택한 스마트 센스 패키지.<br />#PowerYourWorld"
	},
	{
		"img": "assets/img/worldwide-main-instagram-04-asmr-220315.webp",
		"url": "https://www.instagram.com/p/CaUGs3fj_Ks/?taken-by=hyundai_worldwide",
		"text": "🔊온몸의 긴장을 풀고 편안한 휴식을 만끽하고 싶다면? 마음을 안정시키는 이 ASMR 사운드를 감상해보세요.<br />#ASMcaR"
	},
	{
		"img": "assets/img/worldwide-main-instagram-05-asmr-220315.webp",
		"url": "https://www.instagram.com/p/CaWrGunDu9H/?taken-by=hyundai_worldwide",
		"text": "🔊편안히 몸을 기대고 지금 이 순간을 즐겨보세요!<br />#ASMcaR"
	},
	{
		"img": "assets/img/worldwide-main-instagram-06-asmr-220315.webp",
		"url": "https://www.instagram.com/p/CaZQEKEDoBH/?taken-by=hyundai_worldwide",
		"text": "🔊헤드폰을 끼고, 투싼 ASMR과 함께 고요하고 평안한 시간 속으로 빠져보세요.<br />#ASMcaR"
	}
	]
}

5) Footer

- footer.html

<div id="footer">
  <div class="footer_wrap">
    <div class="footer_logo">
      <a href="https://www.hyundai.com/">
        <img src="assets/img/footer_logo_pc.webp" alt="현대로고"/>
      </a>
    </div>
    <div class="footer_middle">
      <div class="footer_text">
        <h4>문의/법적고지</h4>
        <ul>
          <li><a href="#">법적고지</a></li>
          <li><a href="#">개인정보 처리방침</a></li>
          <li><a href="#">쿠키정책</a></li>
          <li><a href="#">사이트맵</a></li>
        </ul>
      </div>
      <div class="footer_text">
        <h4>기업소개</h4>
        <ul>
          <li><a href="#">관계사</a></li>
          <li><a href="#">사업망</a></li>
          <li>
            <a href="#">협력업체</a>
            <img class="ico_link" src="assets/img/ico_link.webp" />
          </li>
          <li><a href="#">모델 히스토리</a></li>
        </ul>
      </div>
      <div class="footer_text">
        <h4>관련 사이트</h4>
        <ul>
          <li>
            <a href="#">N</a>
            <img class="ico_link" src="assets/img/ico_link.webp" />
          </li>
          <li>
            <a href="#">현대 모터스튜디오</a>
            <img class="ico_link" src="assets/img/ico_link.webp" />
          </li>
          <li>
            <a href="#">채널현대</a>
            <img class="ico_link" src="assets/img/ico_link.webp" />
          </li>
          <li>
            <a href="#">현대아트랩</a>
            <img class="ico_link" src="assets/img/ico_link.webp" />
          </li>
        </ul>
      </div>
      <div class="footer_text">
        <h4>Hyundai Social Media</h4>
        <p>Worldwide</p>
        <ul class="footer_social">
          <li><a href="#"><img src="assets/img/facebook.webp" alt="페이스북"></a></li>
          <li><a href="#"><img src="assets/img/instagram.webp" alt="인스타그램"></a></li>
          <li><a href="#"><img src="assets/img/youtube.webp" alt="유튜브"></a></li>
          <li><a href="#"><img src="assets/img/twitter.webp" alt=""></a></li>
        </ul>
        <p>Lifestyle</p>
        <ul class="footer_social">
          <li><a href="#"><img src="assets/img/instagram.webp" alt="인스타그램"></a></li>
        </ul>
      </div>
    </div>
    <div class="copyright">
      &copy; 2022 Hyundai Motor Company
    </div>
  </div>
</div>

- style.scss

/* --- footer --- */
#footer {
  position: relative;
  width: 100%;
  background-color: #000;
}

.footer_wrap {
  width: 1120px;
  margin: auto;
  padding: 74px 0 70px;

  .footer_logo {
    margin-bottom: 75px;
    width: 60px;
  }

  .footer_middle {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 75px;
  }

  .footer_text {
    position: relative;

    h4 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: 1px;
    }

    p {
      margin-bottom: 10px;
      font-size: 0.9em;
      color: #c7c1bb;
      letter-spacing: 0.5px;
    }

    li {
      margin-bottom: 10px;
    }

    .ico_link { filter: none; }

    a {
      font-size: 0.9em;
      color: #c7c1bb;
      letter-spacing: 0.5px;
      &:hover { color: #fff; }
    }

    .footer_social {
      position: relative;
      display: flex;

      li { padding-right: 20px; }

      img {
        width: 22px;
        opacity: .7;
        &:hover { opacity: 1; }
      }
    }

    @at-root .copyright {
      font-size: 0.9em;
      color: #c7c1bb;
      letter-spacing: 0.5px;
    }
  }
}

저작자표시 비영리 변경금지

'ETC > CloneCoding' 카테고리의 다른 글

[React] 배스킨라빈스 클론코딩 (0)	2022.05.16
[HTML/CSS/JS] 스타벅스 클론코딩 (0)	2022.05.16

{ chanCo }

[HTML/CSS/JS] 현대자동차 글로벌 웹사이트 클론코딩

#1. 현대자동차 클론코딩

1. 전체 레이아웃 구조 확인

2. 구현결과

3. HTML 기본 구조 및 CSS

4. 구현 및 상세내용

'ETC > CloneCoding' 카테고리의 다른 글

+ Recent posts

티스토리툴바