HTML 기초 2 예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>myFlix</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
* {
font-family: "Dongle", serif;
font-size: 25px;
font-weight: 40;
font-style: normal;
/* 전체 폰트 설정 */
}
.main {
width: 100%;
background-image: url('https://resize-image.vocus.cc/resize?norotation=true&quality=80&url=https%3A%2F%2Fimages.vocus.cc%2F646c1291-1607-49a4-a3ac-1bd8cc514bd8.jpg&width=740&sign=QRGA5-Jbhp3-u6P1tU6rcuezl5oarI1nYs7A8RvNoSY');
background-position: center;
background-size: cover;
}
body {
background-color: black;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
}
.form-floating > input {
background-color: transparent;
color: white;
}
.form-floating > label {
color: white;
}
.form-select {
background-color: transparent;
color: white;
}
.input-group>label {
background-color: transparent;
color: white;
}
.mypostingbox > button {
width: 100%;
}
</style>
</head>
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-info">MyFlix</a></li>
<li><a href="#" class="nav-link px-2 text-white">Home</a></li>
<li><a href="#" class="nav-link px-2 text-white">Series</a></li>
<li><a href="#" class="nav-link px-2 text-white">Movies</a></li>
<li><a href="#" class="nav-link px-2 text-white">Favorite</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-info">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="main">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">장송의 프리렌</h1>
<p class="col-md-8 fs-4">프리렌은 과거 용사의 동료로서 다른 동료들과 함께 강대한 마왕을 무찌른 영웅이지만 남들과 다른 점이 있다. 바로 영원에 가까운 삶을 사는
엘프란 것. 프리렌은 용사 힘멜이 노환으로 사망한 뒤 장례식에 참가하고 난 뒤에야, 자신이 용사 힘멜을 알려고 노력하지 않았고 함께 한 시간을 헛되이 보냈다고 뒤늦게 후회한다.
그래서 이번에는 사람을 이해하고자 다시금 여행을 떠난다.
</p>
<button type="button" class="btn btn-outline-dark">Record</button>
<button type="button" class="btn btn-outline-dark">info</button>
</div>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://image.tving.com/ntgs/contents/CTC/caip/CAIP1500/ko/20200507/P001227842.png/dims/resize/1280"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">귀멸의 칼날</h5>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://i.ytimg.com/vi/G03U9GUZ7Ww/maxresdefault.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">봇치 더 록</h5>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://an2-img.amz.wtchn.net/image/v2/ARhIdDYUW0pqwX4r35za3g.jpg?jwt=ZXlKaGJHY2lPaUpJVXpJMU5pSjkuZXlKdmNIUnpJanBiSW1SZk1USTRNSGczTWpCeE9EQWlYU3dpY0NJNklpOTJNaTl6ZEc5eVpTOXBiV0ZuWlM4eE5qa3lOakF3TlRJME16YzRPVEExT0RZd0luMC5iVExkdWwzQVU0Mno2VlRPU2tlLVgzWTBSVHdtNGxoZUlORHFUQ1o2czJr"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">은혼</h5>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://an2-img.amz.wtchn.net/image/v2/st7oQC95Kc6Y2wUREtj5EQ.jpg?jwt=ZXlKaGJHY2lPaUpJVXpJMU5pSjkuZXlKdmNIUnpJanBiSW1SZk1USTRNSGczTWpCeE9EQWlYU3dpY0NJNklpOTJNaTl6ZEc5eVpTOXBiV0ZuWlM4eE5qRTFPRGN5T0Rnd01qUXhNekk0TlRjNUluMC5WbENnTTB5RFRVaEViRDVIdzFpV05yVjBWNTB5MnNZQjI3bmczbEYzVmJF"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">단간론파</h5>
</div>
</div>
</div>
</div>
</div>
<div class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">image address</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">title</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">review</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="3">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="추천 이유">
<label for="floatingInput">comment</label>
</div>
<button type="button" class="btn btn-light">save</button>
</div>
</body>
</html>
자바스크립트(JavaScript)란?
**자바스크립트(JavaScript)**는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어로, 주로 웹 페이지를 동적으로 만들고 사용자와 상호작용할 수 있도록 하는 데 사용됩니다. HTML과 CSS와 함께 웹의 핵심 기술 중 하나입니다.
특징
1. 인터프리터 언어:
• 자바스크립트는 브라우저에서 바로 실행되며, 컴파일 과정이 필요 없습니다.
2. 크로스 플랫폼:
• 대부분의 웹 브라우저에서 지원되어 플랫폼에 상관없이 사용할 수 있습니다.
3. 동적:
• 자바스크립트는 실행 중에 변수의 타입을 바꾸거나 함수를 재정의할 수 있는 유연성을 제공합니다.
4. 객체 기반:
• 객체(Object)를 활용하여 데이터를 구조화하고 재사용성을 높일 수 있습니다.
5. 비동기 프로그래밍:
• 자바스크립트는 비동기 처리를 지원하여, 네트워크 요청이나 타이머 등을 효율적으로 관리합니다(예: Promises, async/await).
6. 브라우저 내장 엔진:
• 모든 주요 브라우저는 자바스크립트를 실행하는 JavaScript 엔진을 내장하고 있습니다(예: 크롬의 V8 엔진).
주요 용도
1. 웹 개발 (프론트엔드):
• 버튼 클릭 이벤트 처리, 폼 검증, 애니메이션, 동적 콘텐츠 업데이트 등.
2. 웹 서버 개발 (백엔드):
• Node.js와 같은 런타임 환경을 사용하여 서버를 구축할 수 있습니다.
3. 모바일 앱 개발:
• React Native, Ionic 같은 프레임워크를 사용하여 모바일 앱 개발.
4. 데스크톱 애플리케이션:
• Electron 같은 프레임워크를 통해 크로스 플랫폼 데스크톱 애플리케이션 개발.
5. 게임 개발:
• HTML5 Canvas와 WebGL을 사용하여 브라우저 기반 게임 개발.
6. 머신 러닝 및 데이터 시각화:
• TensorFlow.js, D3.js 같은 라이브러리를 활용.
1. 변수 (Variable)
변수는 데이터를 저장하는 상자라고 생각하면 됩니다.
그 상자에 이름을 붙이고 값을 넣어두면, 나중에 그 이름으로 꺼내 쓸 수 있습니다.
let 이름 = "철수"; // "이름"이라는 변수에 "철수"을 넣음
console.log(이름); // 결과: 철수Tip:
• let은 변할 수 있는 값을 저장할 때.
• const는 변하지 않는 값을 저장할 때 사용 합니다.
2. 리스트 (List)
리스트는 여러 값을 한꺼번에 저장하는 상자라고 보면 됩니다.
숫자, 문자열, 다른 리스트 등 다양한 데이터를 모아둘 수 있습니다.
let 과일 = ["사과", "바나나", "딸기"]; // 리스트 생성
console.log(과일[0]); // 결과: 사과 (리스트의 첫 번째 값)Tip:
• 리스트의 첫 번째 값은 [0]으로 접근해요. 두 번째 값은 [1], 세 번째는 [2] 이런 식입니다.
3. 딕셔너리 (Dictionary)
딕셔너리는 키(key)와 값(value)을 짝지어서 저장하는 상자 라고 생각하면 됩니다.
이름표(key)를 붙여서 값을 저장합니다.
let 사람 = {
이름: "철수",
나이: 34
}; // 딕셔너리 생성
console.log(사람.이름); // 결과: 철수
console.log(사람["나이"]); // 결과: 34Tip:
• 딕셔너리에서는 key: value 형태로 데이터를 저장합니다.
• 사람.이름 또는 사람["이름"]으로 접근 가능합니다.
4. 함수 (Function)
함수는 여러 동작을 묶어놓은 도구 입니다.
반복적으로 사용해야 하는 동작을 미리 만들어두고, 필요할 때 호출해서 실행합니다.
function 인사하기(이름) {
console.log(`안녕하세요, ${이름}님!`);
}
인사하기("철수"); // 결과: 안녕하세요, 철수님!Tip:
• 함수는 function 키워드로 만듭니다.
• 인사하기("철수")처럼 함수 이름 뒤에 ()를 붙이면 함수가 실행됩니다.
예제)
let 학생들 = ["철수", "영희", "민수"]; // 리스트
let 점수표 = { 철수: 85, 영희: 92, 민수: 78 }; // 딕셔너리
function 점수출력(이름) {
console.log(`${이름}의 점수는 ${점수표[이름]}점입니다.`);
}
점수출력(학생들[1]); // 결과: 영희의 점수는 92점입니다.
5. 조건문 (Conditional Statement)
조건문은 **“만약 이렇다면 이렇게 해라”**라고 프로그램에 지시하는 것으로,
주어진 조건이 맞는지 확인한 뒤, 맞으면 특정 코드를 실행합니다.
• if, else if, else
• switch (여러 조건을 처리할 때 사용)
예제 1: if문
let 나이 = 20;
if (나이 >= 20) {
console.log("성인이네요!");
} else {
console.log("아직 미성년자예요.");
}해석:
• 만약(if) 나이가 20 이상이면 "성인이네요!" 출력.
• 그렇지 않으면(else) "아직 미성년자예요." 출력.
예제 2: if-else if문
let 점수 = 85;
if (점수 >= 90) {
console.log("A학점!");
} else if (점수 >= 80) {
console.log("B학점!");
} else {
console.log("C학점 이하...");
}해석:
• 점수가 90 이상이면 “A학점!”
• 점수가 80 이상이면 “B학점!”
• 나머지는 “C학점 이하…” 출력.
예제 3: switch문
let color = "blue";
switch (color) {
case "red":
console.log("빨강");
break;
case "blue":
console.log("파랑");
break;
default:
console.log("모르는 색깔");
}
6. 반복문 (Loop)
반복문은 **“같은 일을 여러 번 반복하라”**는 지시를 내릴 때 사용합니다.
• for
• while
• do...while
• for...of (리스트 반복)
• for...in (객체 반복)
예제 1: for문
리스트 안에 있는 내용을 차례로 출력하는 예제:
let 과일 = ["사과", "바나나", "딸기"];
for (let i = 0; i < 과일.length; i++) {
console.log(과일[i]);
}해석:
1. i를 0으로 시작.
2. i가 과일.length보다 작을 동안 반복.
3. 매번 i를 1씩 증가시키고, 과일[i]를 출력.
• 출력 결과
사과
바나나
딸기
예제 2: while문
조건이 참인 동안 계속 반복하는 예제:
let 카운트 = 5;
while (카운트 > 0) {
console.log(카운트);
카운트--; // 카운트를 1씩 줄임
}해석:
• 카운트가 0보다 크면 실행.
• 매번 실행할 때마다 카운트를 1씩 줄임.
• 출력 결과
5
4
3
2
1
예제 3:foreach문
자바스크립트에서 **리스트(Array)**의 각 요소를 하나씩 꺼내서 반복 작업을 수행할 때 사용하는 메서드.
forEach는 자바스크립트의 배열(Array) 객체에서만 사용할 수 있는 메서드입니다.
기본 문법
array.forEach(function(요소, 인덱스, 배열) {
// 반복 작업
});매개변수:
1. 요소: 배열에서 현재 처리 중인 요소.
2. 인덱스: 배열에서 현재 요소의 위치 (옵션).
3. 배열: forEach를 호출한 배열 자체 (옵션).
예제 1)
let fruits = ["사과", "바나나", "딸기"];
fruits.forEach(function(과일) {
console.log(과일);
});• 출력 결과
사과
바나나
딸기TIP
자바스크립트는 **동적 타입(dynamic typing)**을 사용하는 언어라서, 변수나 매개변수를 선언할 때 자료형(type)을 명시하지 않아도 됩니다.
function(과일)에서 **과일은 매개변수(parameter)**예요. 이 매개변수는 배열의 현재 요소 값을 받아옵니다.
같은 결과 예)
let fruits = ["사과", "바나나", "딸기"];
fruits.forEach(function(item) {
console.log(item); // 여기서는 매개변수 이름을 item으로 사용
});
예제2)
let fruits = ["사과", "바나나", "딸기"];
fruits.forEach(function(과일, 인덱스) {
console.log(`${인덱스}번째 과일: ${과일}`);
});• 출력 결과
0번째 과일: 사과
1번째 과일: 바나나
2번째 과일: 딸기
예제3) 화살표 함수로 표현
let fruits = ["사과", "바나나", "딸기"];
fruits.forEach((과일, 인덱스) => {
console.log(`${인덱스}번째 과일: ${과일}`);
});주의점
1. forEach는 중간에 멈출 수 없습니다.
• 한 번 시작하면 배열의 끝까지 무조건 실행합니다.
• 반복을 멈춰야 한다면 for문이나 for...of를 사용해야 합니다.
2. return은 forEach에서 함수 내부로만 영향을 미침.
• return을 써도 전체 반복문 실행에 영향을 주지 않습니다.
'코딩 > 웹개발' 카테고리의 다른 글
| 배포해보기 + 파이썬 맛보기 (0) | 2025.01.23 |
|---|---|
| Firebase 시작하기 (0) | 2025.01.22 |
| Fetch 기초 (1) | 2025.01.22 |
| JQuery 기초 (0) | 2025.01.21 |
| HTML 기초 1 (0) | 2025.01.17 |