2024. 2. 15. 17:14ㆍJAVA SCRIPT
Tool 참고해서 코딩함https://www.w3schools.com/bootstrap5/bootstrap_navbar.php
Bootstrap 5 Navigation Bars
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
// https://developers.kakao.com 카카오 개발자 프로그램
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
=> web test
// used code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
https://code.jquery.com/jquery-3.7.1.min.js
<style>
* { font-family: 'Noto Sans KR', sans-serif; }
a { text-decoration: none; }
</style>
http://Q1.JS%20_Query_ë³í%20copy.js
</head>
<body class="bg-light">
<div class="container-fluid p-3 bg-primary text-white text-center">
<h1>240117 과제</h1>
<p>부트스트랩 화면</p>
</div>
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title">Q1. 2의 거듭제곱</h4>
<div class="mb-3 mt-3">
<label for="num1">첫번째 수:</label>
<input type="text" class="form-control" id="num1" placeholder="1~20 사이의 정수">
</div>
<div class="mb-3">
<label for="num2">두번째 수:</label>
<input type="text" class="form-control" id="num2" placeholder="10~30 사이의 정수">
</div>
<button class="btn btn-primary" onclick="ans1()">확인</button>
<hr>
<div id="result1"></div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title">Q2. 특정 단어의 갯수</h4>
<div class="mb-3 mt-3">
<label for="num1">문장:</label>
<textarea class="form-control" rows="5" id="sentence"></textarea>
</div>
<div class="mb-3">
<!-- <label for="num2">찾을 단어:</label> -->
<input type="text" class="form-control" id="search" placeholder="찾을 단어를 입력하세요.">
</div>
<button class="btn btn-primary" onclick="ans2()">확인</button>
<hr>
<div id="result2"></div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title">Q3. 내림차순 정렬</h4>
<div class="mb-3 mt-3">
<label for="price">가격:</label>
<input type="text" class="form-control" id="price" placeholder="가격을 ;으로 분리해서 입력하세요.">
</div>
<button class="btn btn-primary" onclick="ans3()">확인</button>
<hr>
<div id="result3"></div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title">Q4. 디지털 시계</h4>
<div class="mt-4" id="date"></div>
<hr>
<div class="mb-3 mt-3">
<img id="h1" style="width: 40px;">
<img id="h2" style="width: 40px;">
<img src="../03.JavaScript/ch13.문서객체모델/img/Colon.jpg" style="width: 40px;">
<img id="m1" style="width: 40px;">
<img id="m2" style="width: 40px;">
<img src="../03.JavaScript/ch13.문서객체모델/img/Colon.jpg" style="width: 40px;">
<img id="s1" style="width: 40px;">
<img id="s2" style="width: 40px;">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
code and show (위, 아래)
'JAVA SCRIPT' 카테고리의 다른 글
| 20240327 java script (0) | 2024.03.27 |
|---|---|
| 2024.01.16 객체생성 in only new line jQuery (0) | 2024.02.15 |
| 2024.01.15 정규표현식 (0) | 2024.02.15 |
| 2024.01.14 예외처리 error is not defined javascript (0) | 2024.02.15 |
| 2024.01.13 객체에 대한 반복문 repeat centence for Object javascript (0) | 2024.02.15 |