[Week 01]自分のショッピングモールのホームページを完成
19293 ワード
2022.04.17
自分なりのショッピングサイトホームページ作成課題を開始!
ショッピングセンターのホームページのレイアウト
レイアウトから見ると、商品写真/商品タイトル/注文/注文ボタンは4種類のdivに分かれています.<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
作成されたコード<body>
<div class ="wrap">
<!-- Item Image -->
<div class = "item-img"></div>
<!-- Item Introduce -->
<div class="item-intro">
<h3> 무드 베어 잠옷 <span class="price"> 가격: 18,000원 / 1set </span> </h3>
<p> 귀여운 곰돌이가 그려진 피치 기모 원단의 잠옷. 부들부들한 촉감은 잠을 잘 오게 만들어요! </p>
</div>
<!-- Order information Input -->
<div class ="item-order">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">주문자 이름</span>
<input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>-- 수량을 선택하세요 -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">주소</span>
<input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">전화번호</span>
<input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<!-- Order Button -->
<div class="order-button">
<button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
</div>
</div>
</body>
Reference
この問題について([Week 01]自分のショッピングモールのホームページを完成), 我々は、より多くの情報をここで見つけました
https://velog.io/@wendyshme/Week-01-나만의-쇼핑몰-메인-페이지-완성
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
<body>
<div class ="wrap">
<!-- Item Image -->
<div class = "item-img"></div>
<!-- Item Introduce -->
<div class="item-intro">
<h3> 무드 베어 잠옷 <span class="price"> 가격: 18,000원 / 1set </span> </h3>
<p> 귀여운 곰돌이가 그려진 피치 기모 원단의 잠옷. 부들부들한 촉감은 잠을 잘 오게 만들어요! </p>
</div>
<!-- Order information Input -->
<div class ="item-order">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">주문자 이름</span>
<input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>-- 수량을 선택하세요 -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">주소</span>
<input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">전화번호</span>
<input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<!-- Order Button -->
<div class="order-button">
<button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
</div>
</div>
</body>
Reference
この問題について([Week 01]自分のショッピングモールのホームページを完成), 我々は、より多くの情報をここで見つけました https://velog.io/@wendyshme/Week-01-나만의-쇼핑몰-메인-페이지-완성テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol