☑️ 반응형 웹
@media : 화면의 크기별로 다른 css 적용이 가능하다.
/* 화면 크기 : 최대 600px 까지 */
@media(max-width: 600px){
body{background-color: red;}
}
/* 화면 크기 : 601~999px 까지 */
@media(min-width: 601px) and (max-width:999px){
body{background-color: green;}
}
/* 화면 크기 : 1000px ~ * */
@media(min-width: 1000px){
body{background-color: blue;}
}☑️ Bootstrap
CDN 방식 : Content Delivery Network. 인터넷상에서 바로 css 파일 전송받기
*네트워크 환경이 되어야지 작업가능
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container mt-3">
<h2>Flex</h2>
<p>To create a flexbox container and transform direct children into flex items, use the d-flex class:</p>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
<div class="p-2 bg-black">Flex item 4</div>
</div>
</div>☑️ JavaScript
HTML 페이지의 동작을 사용자의 요구에 맞도록 수행 기능
브라우저의 언어, 인터프리터 방식의 언어
- html : 웹페이지의 틀.
- css : 스타일. 색상,크기,간격...
- javascript : 동작을 처리
✅자바 : 컴파일방식 + 인터프리터 방식
✅자바스크립트
- 인터프리터 방식(컴파일과정 없음 : 목적파일이 없음)
- 문법적으로 문제되는 구문을 미리 예측하기 어려움
- 코드를 한줄씩 실행하므로 실행되는 시점까지 실행가능 (실행전까지 문법오류를 알수 없음)
*인터프리터 방식 : 코드를 한줄씩 번역 바로 실행하는 언어
- 코드가 실행되면 웹 브라우저에 내장되어 있는 자바스크립트 parser가 해석
- 미리 번역해두는 컴파일링 언어에 비해서 속도가 느린편
- 미리 번역해두지 않기 때문에 오류 발생시 수정이 편함
* 스크립팅 언어
- 다른 응용 프로그램에 삽입되어 동작하는 언어
- JavaScript는 HTML 문서 내에 삽입되어 동작함
☑️ 주석
//한줄주석
/* 여러줄 주석 (블럭주석) */
<script type="text/javascript">
//한줄주석
/* 여러줄 주석 (블럭주석) */
//internal 방식
console.log('Hello World!');
</script>
☑️ 자바스크립트의 특징
- 접근제한자 개념없음.
- 변수 선언이 필요없음. 초기화시 자료형 결정
- 웹 환경에 특화된 언어 => 보안등의 이유로 기능 제한됨
- 보안에 취약함 : 소스가 외부 공개됨
☑️ 기본형식
<script type="text/javascript">
자바스크립트 내용
</script>
✅ 특징
- HTML에서 제공하는 <script>태그 사용
- 자바스크립트 작성 영역을 설정
- 그 사이에 자바스크립트 코드 작성
- 시작 태그의 속성으로 오는 type은 HTML5부터 default로 부여되니 생략
✅ 위치
- <script>태그는 <head>,<body> 어디에도 사용 가능
- 심지어 <html>태그 밖에도 작성 가능
- 웹 표준과 웹 접근성을 고려해 되도록 <html>안에 작성
- 자바스크립트 파일이 너무 큰 경우 파일을 인식하는데 시간이 오래 걸림
- 되도록 <body>의 가장 하단에 입력
✅ 세미콜론 (;)
- 명령이 끝났다는 것을 표현
- 자바스크립트는 줄바꿈이 생기면 자동으로 명령이 끝났다고 판단
- 보통 오류가 발생하지 않음
☑️ 사용법
- 인라인(inline) : 태그내에 간단히 소스코드를 추가
- 내부(internal) : html 파일 내에 script 태그로 소스코드 추가
- 외부(external) : 별도의 .js 파일로 스스코드 추가.
✅ 인라인방식 ( inline )
<태그 on이벤트명="자바스크립트 소스코드(해당 요소에 이벤트 발생시 실행시킬 소스코드)" >
<a herf='javascript:자바스크립트 소스코드'>내용</a>
<button onclick="window.alert('안녕하세요')">알림창 출력</button>
<button onclick="console.log('반갑습니다.')">콘솔 출력</button>
<a href="javascript:btnClick()">링크태그에서 자바스크립트 실행(콘솔)</a>
<a href="javascript:alert('반갑습니다.')">링크태그에서 자바스크립트 실행(알림창)</a>
✅ 내부방식 ( internal )
- 현재 html 문서내에 script태그 영역 안에 소스코드를 작성
- script태그는 head태그든, body태그든 어디서든 작성 가능
- html태그에서 이벤트 핸들러를 통해 함수 실행 시킴
*이벤트 핸들러 : 이벤트 발생시 동작하는 함수
<button id="btn">알림창 출력</button>
<button onclick="btnClick();">콘솔 출력</button>
<script>
let btn = document.getElementById("btn");
// btn 변수 : <button id="btn">알림창 출력</button> 태그 객체 저장
btn.onclick = function(){ // 핸들러 정의
window.alert("알림창 출력버튼 클릭");
}
function btnClick(){
console.log("콘솔출력 버튼 클릭");
}
</script>
✅외부방식 ( external )
- 자바스크립트 양이 많거나 여러개의 html파일에서 공통적으로 활용하는 코드가 많을 때 사용
- 자바스크립트 코드 부분을 외부 파일(*.js)로 저장
<script src="sample.js" rel="javascript"></script>
<button onclick="test()">외부함수 호출</button>☑️ 자료형
✅ 기본자료형
1) number : 정수/실수 구분이 없다.
NaN(Not a Number) : 숫자가 아님
Infinity/-Infinity : +0/-0으로 나눈 값. 불능
2) string : 문자/문자열 구분이 없다. 작음따옴표, 큰따옴표 모두 사용 가능함
3) boolean : true/false
4) null : 값이 없다.
5) undefined : 값이 저장된 적이 없다. 초기화되지 않은 상태의 변수임
var a; // 변수 선언
console.log(a); // 초기화 되지 않으므로 undefined 상태. 오류발생 안됨
✅ 자바스크립트 변수의 특징
1) 동적타입. 선언하지 않아도 변수 사용 가능
2) 변수선언시에 자료형을 작성하지 않는다.
3) 변수에 값을 저장할때 자료형이 결정됨 => 변수에 저장된 값이 수정되면 자료형 변경됨.
a = 10;
console.log(a, typeof a); // 10 'number'
// 값이 변경시 자료형 변경
a = 'hello World'; // 변수 초기화
console.log(a, typeof a); // hello World string
4) 변수 선언 없이 변수 사용이 가능함.
✅ 변수 선언 키워드
1) var
var a; // 변수 선언
console.log(a); // 초기화 되지 않으므로 undefined 상태. 오류발생 안됨
// 동일한 변수명으로 재선언 가능
var a;
a = 10;
console.log(a, typeof a);
// 변수의 범위
if(true){
var age = 29; // var 선언된 변수의 범위(scope)은 함수 영역(functional scope)
}
(1) 범위 : 함수레벨
(2) 변수 선언 생략 가능
(3) 같은 변수명으로 다시 선언이 가능
(4) 변수의 초기화 생략 가능 (undefined 상태)
2) let(ES6 표준)
//let : 중복 선언 불가
let user = "user";
console.log(user, typeof user);
// let user = "use2"; 재선언 불가능
console.log(age, typeof age);
if(true){
let name = "홍길동"
}
console.log(name); // 아무값도 출력x, 오류x
(1) 범위 : 블록레벨 {} => 지역변수
(2) 변수 선언 생략 가능
(3) 같은 변수명으로 다시 선언이 불가능
(4) 변수 초기화 생략 가능 (메모리에 변수 생성 전)
3) const(ES6 표준)
// const : 중복선언 불가능, 변수의 값 변경 불가(상수)
const pw = "pw1";
console.log(pw, typeof pw);
// pw = "pw2"; 변수 변경 불가. 상수
console.log(age, typeof age);
if(true){
const hobby = "운동"; // const, let로 선언된 변수의 범위는 블록영역
}
console.log(hobby); // 아무값도 출력x, 오류x
(1) 범위 : 블록레벨 {} => 지역변수
(2) 변수 선언 생략 불가능
(3) 같은 변수명으로 다시 선언이 불가능
(4) 변수 초기화 생략 불가능 => 상수
(5) 저장된 값을 변경 불가능 => 상수
✅ 호이스팅
1) hoisting
2) 코드 중 항상 먼저 처리가 되는 코드
//변수선언이 먼저 처리됨 : 호이스팅
c = Math.sqrt(25);
var c; // 변수 선언
console.log(c, typeof c);
3) 대상 : 변수선언, 함수 정의 등
☑️ 데이터 입출력
✅ 데이터를 출력하는 구문
<script>
// alert("브라우저의 확인창에 메세지를 띄웁니다.");
document.write("<hr/>")
document.write("document.write() 함수를 이용하여 화면에 출력합니다.<br>안녕하세요");
let test = document.getElementById("test");
test.innerHTML = "<table border='1'><tr><td>innerHTML 테스트</td></tr></table>";
</script>
[window.]alert ("브라우저의 확인창에 출력시킬 메세지")
[window.]console.log ("브라우저의 콘솔창 출력시킬 메세지")
document.write("브라우저의 화면에 출력시킬 메세지")
태그.innerHTML = "태그 내부의 출력시킬 메세지"
✅ 데이터를 입력하는 구문
<script>
function testConfirm(){
//메세지대화창 : alert("확인창"), confirm("선택창") :확인(true),취소(false)
// prompt("입력창")
let result = confirm("홍길동님이시면 확인 아니면 취소를 눌러주세요");
console.log(result);
const divEl = document.getElementById("area");
if(result){
divEl.innerHTML = "<h3>환영합니다</h3>";
}else{
divEl.innerHTML = "<h3>안녕히가세요</h3>";
}
}
</script>
변수 = [window.]confirm("질문내용");
변수 = [window.]prompt("질문내용");
변수 = 특정요소.속성(id, className, innerHTML, innerText, ...);
✅ window.prompt("질문내용");
prompt 호출시 "질문내용"과 입력할 수 있는 "텍스트 상자"와 "확인/취소"버튼이 보여지는 브라우저의 알람창 발생
확인 버튼 클릭시 텍스트 상자에 입력된 value값을 "문자열"로 반환, 취소 버튼 클릭시 null 반환 => 변수에 담아서 활용 가능
<script>
function testPrompt1(){
let name = prompt("당신의 이름은 무엇입니까?");
let age = prompt("당신의 나이는 몇살입니까?");
const divEl = document.getElementById("area2");
divEl.innerHTML = "<b>"+ age + "살, " + name + "님. 반갑습니다.</b>";
}
</script>✅ 급여 계산하기
시간당 임금을 입력받고, 8시간까지는 시간당 시급을 받고,
8시간 초과 근무는 시간당 시급의 1.5배를
받는다고 할때 근무시간 만큼 근무했들 때의 일당을 #totalPay에 출력하기
| 시간당임금 | |
|---|---|
| 근무시간 | |
| 받을 수 있는 총급여 | |
<script>
function calc() {
let payPerHour = document.getElementById("payPerHour").value;
let workTime = document.getElementById("workTime").value;
let totalPay =(payPerHour * workTime) + ((workTime > 8)?(payPerHour*0.5*(workTime-8)):0);
document.getElementById("totalPay").value = totalPay;
}
</script>
✅ 합계구하기
- document.getElementById("total").innerHTML
- document.getElementById("total").innerText
<button onclick="totalSum()">합계구하기</button>
<div id="total"></div>
<script>
function totalSum() {
let num = prompt("숫자만 입력하세요",0);
let sum = 0;
for(let i=1;i<=num;i++) {
sum += i;
}
// document.getElementById("total").innerHTML = "<h1>"+num + "까지의합:"+sum+"</h1>";
document.getElementById("total").innerText = "<h1>"+num + "까지의합:"+sum+"</h1>";
}
</script>☑️ TEST
<table>
<caption>바구니수 계산하기</caption>
<tr>
<th>바구니당 사과 갯수</th>
<td>
<select id="cnt">
<option value="5">5개</option>
<option value="10">10개</option>
<option value="15">15개</option>
<option value="20">20개</option>
</select>
</td>
</tr>
<tr>
<th>사과의 총갯수</th>
<td><input type="text" id="apple"></td></tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="바구니수 계산하기" onclick="calc()" style="width:100%; text-align:center;">
</td>
</tr>
<tr>
<th>필요한 바구니수</th>
<td>
<input type="text" id="basketcnt">
</td>
</tr>
</table>
<script>
//
function calc(){
let cnt = document.getElementById("cnt").value;
let apple = document.getElementById("apple").value;
let total = apple / cnt;
document.getElementById("basketcnt").value = Math.ceil(total);
}
</script>
<input type="button" value="세로출력" onclick="print1()">
<input type="button" value="가로출력" onclick="print2()">
<input type="button" value="2단출력" onclick="print3()">
<div id="gugudan"></div>
<script>
function print1(){
let result = "<table><caption>세로출력</caption>";
for(let i = 2; i <= 9; i++){
result += "<tr><th>" + i + "단</th></tr>";
for(let z = 1; z <= 9; z++){
result += "<tr><td>" + i +"x" + z + "=" + i*z + "</td></tr>";
}
}
result += "</table>";
document.getElementById("gugudan").innerHTML = result;
}
function print2() {
let result = "<table><caption>가로출력</caption>";
result += "<tr>";
for (let i = 2; i <= 9; i++) {
result += "<th>" + i + "단</th>";
}
result += "</tr>";
for (let j = 1; j <= 9; j++) {
result += "<tr>";
for (let i = 2; i <= 9; i++) {
result += "<td>" + i + "x" + j + "=" + (i * j) + "</td>";
}
result += "</tr>";
}
result += "</table>";
document.getElementById("gugudan").innerHTML = result;
}
function print3() {
let result = "<table><caption>2단출력</caption>";
for (let start = 2; start <= 6; start += 4) {
result += "<tr>";
for (let i = start; i < start + 4; i++) {
result += "<th>" + i + "단</th>";
}
result += "</tr>";
for (let j = 1; j <= 9; j++) {
result += "<tr>";
for (let i = start; i < start + 4; i++) { // 4개 단씩 출력
result += "<td>" + i + "x" + j + "=" + (i * j) + "</td>";
}
result += "</tr>";
}
}
result += "</table>";
document.getElementById("gugudan").innerHTML = result;
}
</script>
'JavaScript' 카테고리의 다른 글
| [BCGD] 비전공자 백엔드 개발 도전기 (34) (0) | 2025.03.22 |
|---|---|
| [BCGD] 비전공자 백엔드 개발 도전기 (33) (1) | 2025.03.21 |
| [JS] 숫자 카운터 스크립트 (1) | 2024.09.13 |
| [JS] Tab 메뉴 만들기(forEach, Id) (0) | 2024.08.11 |
| [JavaScript] Canvas Totorial(지우개 효과) (0) | 2024.07.23 |