우리 조는 "오늘의 집" 사이트로 클론 코딩을 하기로 했다.
나는 그 중 [홈페이지 상단 이미지, 홈페이지 쇼트컷] 에 대해 팀원들에게 설명해주는 것을 맡았다.
1. 홈페이지 상단 이미지
<!-- 홈 페이지 상단 이미지 ------------------------------------------------------->
<div class="container home-header">
<!-- 상단 이미지 상단 영역 -->
<div class="home-header__upper">
<div>
<!-- 홈페이지의 상단 배너 이미지 -->
<img
src="https://image.ohou.se/i/bucketplace-v2-development/uploads/projects/cover_images/164309149487027066.jpg?gif=1&w=850&h=567&c=c"
alt="홈페이지 메인 이미지"
/>
<!-- 상단 이미지와 관련된 제목 및 링크 -->
<div class="home-header-tit">
<!-- 상단 이미지 제목 -->
<h4>전형적인 구조를 색다르게!</h4>
<!-- 이미지를 클릭했을 때의 링크 -->
<a href="#">보러가기</a>
</div>
</div>
</div>
<!-- 상단 이미지 하단 영역 -->
<div class="home-header__lower">
<!-- 하단 배너 슬라이더 영역 -->
<div class="home-header__lower-banner">
<!-- 배너 슬라이더 목록 -->
<ul class="banner-slider">
<!-- 첫 번째 배너 -->
<li class="banner-item">
<!-- 배너를 클릭했을 때의 링크 -->
<a href="">
<!-- 모바일 화면에 보여질 배너 이미지 -->
<img
class="col-img"
src="https://image.ohou.se/i/bucketplace-v2-development/static/home_banner/sign_up_mobile_v2.png?gif=1&w=850"
alt="베너 이미지1"
/>
<!-- 웹 화면에 보여질 배너 이미지 -->
<img
class="row-img"
src="https://image.ohou.se/i/bucketplace-v2-development/static/home_banner/sign_up_web_v2.png?gif=1&w=512"
alt="베너 이미지1"
/>
</a>
</li>
<!-- 두 번째 배너 -->
<li class="banner-item">
<a href="">
<!-- 모바일 화면에 보여질 배너 이미지 -->
<img
class="col-img"
src="https://image.ohou.se/i/bucketplace-v2-development/uploads/banners/home_banner/164459861986493304.png?gif=1&w=850"
alt="베너 이미지1"
/>
<!-- 웹 화면에 보여질 배너 이미지 -->
<img
class="row-img"
src="https://image.ohou.se/i/bucketplace-v2-development/uploads/banners/home_banner/164459862593345523.png?gif=1&w=512"
alt="베너 이미지1"
/>
</a>
</li>
<!-- 세 번째 배너-->
<li class="banner-item">
<a href="">
<!-- 모바일 화면에 보여질 배너 이미지 -->
<img
class="col-img"
src="https://image.ohou.se/i/bucketplace-v2-development/uploads/banners/home_banner/164559250412286029.png?gif=1&w=850"
alt="베너 이미지1"
/>
<!-- 웹 화면에 보여질 배너 이미지 -->
<img
class="row-img"
src="https://image.ohou.se/i/bucketplace-v2-development/uploads/banners/home_banner/164559252959722925.png?gif=1&w=512"
alt="베너 이미지1"
/>
</a>
</li>
<!-- 네 번째 배너 -->
<li class="banner-item">
<a href="">
<!-- 모바일 화면에 보여질 배너 이미지 -->
<img
class="col-img"
src="https://image.ohou.se/i/bucketplace-v2-development/uploads/banners/home_banner/164559255249087796.png?gif=1&w=850"
alt="베너 이미지1"
/>
<!-- 웹 화면에 보여질 배너 이미지 -->
<img
class="row-img"
src="https://image.ohou.se/i/bucketplace-v2-development/uploads/banners/home_banner/164559255881515784.png?gif=1&w=512"
alt="베너 이미지1"
/>
</a>
</li>
</ul>
</div>
</div>
</div>
2. 홈페이지 쇼트컷
<!-- 홈 페이지 쇼트컷 ---------------------------------------------------------->
<nav class="container home-shortcut">
<!-- 쇼트컷 메뉴 목록을 담은 컨테이너 -->
<ul class="home-shortcut__container">
<!-- 쇼트컷 메뉴 항목1 -->
<li class="home-shortcut__item">
<!-- 쇼트컷 메뉴 링크 -->
<a href="">
<!-- 쇼트컷 메뉴에 대한 이미지 -->
<img
src="https://image.ohou.se/image/resize/bucketplace-v2-development/uploads-shortcut-home_feed_shortcut_sets-164014793582210313.png/512/none"
alt="쇼핑하기 바로가기 이미지"
/>
<!-- 쇼트컷 메뉴의 이름 -->
<h4>쇼핑하기</h4>
</a>
</li>
<!-- 쇼트컷 메뉴 항목2 -->
<li class="home-shortcut__item">
<!-- 쇼트컷 메뉴2 링크 -->
<a href="">
<!-- 쇼트컷 메뉴2에 대한 이미지 -->
<img
src="https://image.ohou.se/image/resize/bucketplace-v2-development/uploads-shortcut-home_feed_shortcut_sets-164319427178391528.png/512/none"
alt="쇼핑하기 바로가기 이미지"
/>
<!-- 쇼트컷 메뉴2의 이름 -->
<h4>빠른가구배송</h4>
</a>
</li>
<!-- 쇼트컷 메뉴 항목3 -->
<li class="home-shortcut__item">
<!-- 쇼트컷 메뉴3 링크 -->
<a href="">
<!-- 쇼트컷 메뉴3에 대한 이미지 -->
<img
src="https://image.ohou.se/image/resize/bucketplace-v2-development/uploads-shortcut-home_feed_shortcut_sets-164014820673208281.png/512/none"
alt="쇼핑하기 바로가기 이미지"
/>
<!-- 쇼트컷 메뉴3의 이름 -->
<h4>평수별집구경</h4>
</a>
</li>
<!-- 쇼트컷 메뉴 항목4 -->
<li class="home-shortcut__item">
<!-- 쇼트컷 메뉴4 링크 -->
<a href="">
<!-- 쇼트컷 메뉴4에 대한 이미지 -->
<img
src="https://image.ohou.se/image/resize/bucketplace-v2-development/uploads-shortcut-home_feed_shortcut_sets-164197550064065066.png/512/none"
alt="쇼핑하기 바로가기 이미지"
/>
<!-- 쇼트컷 메뉴4의 이름 -->
<h4>공간별사진</h4>
</a>
</li>
<!-- 쇼트컷 메뉴 항목5 -->
<li class="home-shortcut__item">
<!-- 쇼트컷 메뉴5 링크 -->
<a href="">
<!-- 쇼트컷 메뉴5에 대한 이미지 -->
<img
src="https://image.ohou.se/image/resize/bucketplace-v2-development/uploads-shortcut-home_feed_shortcut_sets-164154620376380239.png/512/none"
alt="쇼핑하기 바로가기 이미지"
/>
<!-- 쇼트컷 메뉴5의 이름 -->
<h4>빠른시공상담</h4>
</a>
</li>
<!-- 쇼트컷 메뉴 항목6 -->
<li class="home-shortcut__item">
<!-- 쇼트컷 메뉴6 링크 -->
<a href="">
<!-- 쇼트컷 메뉴6에 대한 이미지 -->
<img
src="https://image.ohou.se/image/resize/bucketplace-v2-development/uploads-shortcut-home_feed_shortcut_sets-164319433881719285.png/512/none"
alt="쇼핑하기 바로가기 이미지"
/>
<!-- 쇼트컷 메뉴6의 이름 -->
<h4>오늘의집이사</h4>
</a>
</li>
<!-- 쇼트컷 메뉴 항목7 -->
<li class="home-shortcut__item">
<!-- 쇼트컷 메뉴7 링크 -->
<a href="">
<!-- 쇼트컷 메뉴7에 대한 이미지 -->
<img
src="https://image.ohou.se/image/resize/bucketplace-v2-development/uploads-shortcut-home_feed_shortcut_sets-164214406605962730.png/512/none"
alt="쇼핑하기 바로가기 이미지"
/>
<!-- 쇼트컷 메뉴7의 이름 -->
<h4>오늘의딜</h4>
</a>
</li>
<!-- 쇼트컷 메뉴 항목8 -->
<li class="home-shortcut__item">
<!-- 쇼트컷 메뉴8 링크 -->
<a href="">
<!-- 쇼트컷 메뉴8에 대한 이미지 -->
<img
src="https://image.ohou.se/image/resize/bucketplace-v2-development/uploads-shortcut-home_feed_shortcut_sets-164300900422684836.png/512/none"
alt="쇼핑하기 바로가기 이미지"
/>
<!-- 쇼트컷 메뉴8의 이름 -->
<h4>22년 신년운세</h4>
</a>
</li>
</ul>
</nav>'1차 스터디' 카테고리의 다른 글
| 9. 실행 컨텍스트 (0) | 2024.04.02 |
|---|---|
| 8. 웹사이트 내비게이션 및 이미지 슬라이드 구현 소개 (0) | 2024.03.29 |
| 7. DOM과 이벤트 소개 (0) | 2024.03.28 |
| 6. 자바스크립트 기초 문법 (0) | 2024.03.27 |
| 5. 자바스크립트 기초 (0) | 2024.03.27 |