2024. 1. 22. 18:28ㆍ스파르타_부트캠프/웹개발
강의 자료
1주차
멜로디쉐어 만들기 2
배경화면 적용
배경 화면 적용을 위해 <head> 태그 안에 다음 코드 추가
<style>
.background-banner {
background-image: linear-gradient(45deg,
rgb(51 43 43 / 75%),
rgb(20 19 20 / 61%)), url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/music_festival.jpg");
max-height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
<body> 태그 바로 밑에 div 태그를 생성 후 background-banner를 지정한 후 이전의 navbar, main, modal, cards 추가
Footer 만들기
링크에서 contianer 하위 footer 항목 복사
https://getbootstrap.com/docs/5.3/examples/footers/
<div class="row"> 태그 삭제 및 <footer class="py-5"> 에서 class="py-5" 제거
<div class="container">
<footer>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© 2023 Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"></use></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"></use></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"></use></svg></a></li>
</ul>
</div>
</footer>
</div>
다음과 같이 footer가 추가된다.
부트스트랩 아이콘 만들기
다음 부트스트랩 주소의 CDN을 사용한다.
https://icons.getbootstrap.com/
다음 CDN을 사용한다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
이제 아이콘을 가져와서 사용한다. 원하는 아이콘을 검색한 후
코드를 복사할 수 있다.
footer 태그에 다음과 같이 붙여넣는다.
<div class="container">
<footer>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© Sparta Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-body-emphasis" href="#"><i class="bi bi-youtube"></i></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><i class="bi bi-instagram"></i></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><i class="bi bi-postcard"></i></a></li>
</ul>
</div>
</footer>
</div>
다음과 같이 icon이 추가된다.
Homework
화면을 다음과 같이 수정한다.
변경된 내용은 다음과 같다.
* navbar가 오른쪽 정렬
* 중앙의 텍스트 변경
* 앨범의 텍스트 변경
각각 다음과 같이 진행한다.
navbar 오른쪽 정렬
justify-content-center -> justify-content-end 로 변경한다.
<nav class="navbar border-bottom border-body d-flex justify-content-end" data-bs-theme="dark">
중앙의 텍스트 변경
다음 위치에서 텍스트를 변경했으며, br 태그를 사용하여 linefeed를 적용하였다.
<h1 class="display-5 fw-bold text-body-emphasis">멜로디쉐어</h1>
<br>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">노래를 들으면 생각나는 누군가가 있으신가요?
</p>
<p class="lead mb-4">당신이 감성이 담긴 인생곡 플레이리스트<br>멜로디쉐어에서 소중한 사람과 함께하세요
</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
뮤직 추가
</button>
</div>
</div>
앨범의 텍스트 변경
다음과 같이 텍스트를 변경한다.
<div class="col">
<div class="card h-100">
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/ive.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">러브 다이브</h5>
<p class="card-text">IVE(아이브)</p>
<p class="card-text">추천 by 최지웅</p>
</div>
</div>
</div>
다음과 같이 출력됨울 확인하였다.
2주차
JavaScript 맛보기
위의 내용을 개발자 도구 콘솔을 통해 수정할 수 있다.
JavaScript 기초 문법
리스트와 딕셔너리
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
console.log(names[0]['name']) // 'bob'을 출력
console.log(names[1]['name']) // 'carry'을 출력
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
console.log(names[2]['name']) // 'john'을 출력
JavaScript의 리스트, 딕셔너리는 python의 리스트, 딕셔너리와 거의 유사하다. '[]', '{}' 로 각각 리스트, 딕셔너리를 사용한다.
JavaScript & jQuery 연습하기 (1)
jquery 사용을 위해 다음 링크에 접속하여 해당 CDN을 가져온다.
https://www.w3schools.com/jquery/jquery_get_started.asp
이후 head 태그에 다음과 같이 jQuery CDN 링크를 추가한다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
다음 코드를 직접 작성하며 jquery 및 javascript에 대한 기본적인 연습을 진행하였다.
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<style>
.button-part {
display: flex;
height: 50px;
}
</style>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1"></div>
</div>
<div class="dict-part">
<h2>3. 딕셔너리</h2>
<div id="q2"></div>
</div>
<div>
<h2>4. 리스트 딕셔너리</h2>
<div id="q3"></div>
</div>
</body>
<script>
function checkResult() {
let a = ['사과', '배', '감', '귤']
$('#q1').text(a[1])
let b = {
'name': '영수',
'age': 30
}
$('#q2').text(b['name'])
let c = [
{ 'name': '영수', 'age': 30 },
{ 'name': '철수', 'age': 35 },
]
$('#q3').text(c[1]['age'])
}
</script>
</html>
jquery는 <div id="q1">에서 해당 값에 접근하기 위해 id값을 참조하여 $('#q1')을 사용한다.
이 후 리스트, 딕셔너리 등의 자료형을 사용하여 해당 태그의 텍스트를 변경해보았다.
JavaScript & jQuery 연습하기 (2)
다음 코드를 통해 jquery 기능 몇가지에 대해서 더 학습해본다.
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 붙이기</h2>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
</div>
<div class="list-part">
<h2>3. 붙이기</h2>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
<script>
function checkResult() {
let fruits = ['사과', '배', '감', '귤', '수박']
$('#q1').empty()
fruits.forEach((fruit) => {
let temp_html = `<p>${fruit}</p>`
$('#q1').append(temp_html)
})
let people = [
{ 'name': '서영', 'age': 24 },
{ 'name': '현아', 'age': 30 },
{ 'name': '영환', 'age': 12 },
{ 'name': '서연', 'age': 15 },
{ 'name': '지용', 'age': 18 },
{ 'name': '예지', 'age': 36 }
]
$('#q2').empty()
people.forEach((person)=>{
let name = person['name']
let age = person['age']
let temp_html = `<p>${name}는 ${age}살입니다.</p>`
$('#q2').append(temp_html)
})
}
</script>
</body>
</html>
``는 백틱 문자로 html 문자를 만들 때 사용하였다. 템플릿 리터럴(Template Literal)을 위해 사용하며, 위 코드상에서 ${fruit}, ${name}, ${age}에 해당하는 변수의 값을 문자열로 치환해준다.
python으로 치면 일종의 포맷문자에 해당하는 것으로 html을 동적으로 생성할 때 주로 사용한다고 한다.
리스트, 딕셔너리의 값을 forEach 구문을 사용하여 순회하였고 id를 찾아 해당 div 태그 하위에 생성된 html 문자열을 추가하였다.
[데일리모토] 시간 기능 구현하기
ChatGPT를 사용하여 현재 시간을 표시하는 javascript 함수를 생성한다.
다음은 ChatGPT에게 질문한 내용과 결과이다.
[질문]
"현재 시간을 표시해주는 javascript 함수를 생성해줘"
[결과]
function displayCurrentTime() {
// 현재 날짜와 시간을 얻어오기
const now = new Date();
// 시, 분, 초 추출
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 출력 문자열 생성
const timeString = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
// 결과를 HTML 요소에 표시
document.getElementById('current-time').innerText = timeString;
}
// 1초마다 현재 시간을 갱신하기 위해 setInterval 사용
setInterval(displayCurrentTime, 1000);
// 페이지 로드 시 초기 시간 표시
displayCurrentTime();
해당 코드를 script 태그에 추가한 후 시간 쪽 h1 태그 id에 "current-time" 을 추가한다.
<div class="greeting">
<h1>Hello, My name!</h1>
<h1 id="current-time"></h1>
</div>
화면에 다음과 같이 시간이 표시된다.
서버-클라이언트 통신 이해하기
클라이언트->서버 GET 요청 이해하기
웹에서 클라이언트가 서버에 요청 타입으로 GET, POST가 있다. 일반적으로 다음 상황 때 각 명령을 사용한다.
GET
통상적으로 데이터를 조회(Read)할 때
ex) 영화 목록 조회
POST
통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때
ex) 회원가입, 회원 탈퇴, 비밀번호 수정
이 중에서 GET 방식에 대해 정리해보면 다음과 같다.
위 URL은 "?"를 기준으로 두 부분으로 나눌 수 있다.
"?" 기준으로 앞부분이 [서버 주소], 뒷부분이 [전달 데이터]이다.
서버 주소
https://movie.daum.net/moviedb/main?
전달 데이터
movieId=161806
또 다른 예로 지금 작성하는 다음 URL을 분석해보면 다음과 같다.
google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
전달 데이터는 "&"로 나눠서 여러개의 데이터를 보낼 수 있다. 결과는 다음과 같다.
서버 주소
google.com/search
전달 데이터
q=아이폰
sourceid=chrome
ie=UTF-8
진행사항 정리
[1주차]
배경화면 이미지 및 아이콘을 적용하여 웹페이지 작성을 마무리하였다. 배경화면만 잘 적용해도 웹페이지의 기본 분위기가 살아나는 것을 볼 수 있다. 화면 디자인 기법으로 잘 이해해둘 필요가 있을 것 같다.
[2주차]
javascript 및 jquery에 대한 전반적인 학습을 하였다. javascript의 기본적인 문법은 대략적으로 알고 있었으나 jquery를 사용해본 경험은 없었기 때문에 기본적인 사용법을 익힌 것은 많은 도움이 되었다. 특히 $('#id')를 통해 태그에 접근하는 것은 빈번히 사용될 것으로 보이니 숙지해둔다.
리스트, 딕셔너리는 파이썬과 거의 유사한 형태로 사용 가능함을 배웠다. 매우 빈번히 사용하는 자료구조이므로 사용법을 충분히 숙지할 필요가 있다.
``를 사용하여 템플릿 리터럴을 만든 후 동적으로 html을 생성하는 부분은 상황에 따라 종종 사용할 수 있을 것 같으니 기억해두어야겠다.
'스파르타_부트캠프 > 웹개발' 카테고리의 다른 글
ChatGPT 웹개발 진행노트 - 6일차 (1) | 2024.02.02 |
---|---|
ChatGPT 웹개발 진행노트 - 5일차 (0) | 2024.01.25 |
ChatGPT 웹개발 진행노트 - 4일차 (0) | 2024.01.23 |
ChatGPT 웹개발 진행노트 - 2일차 (0) | 2024.01.20 |
ChatGPT 웹개발 진행노트 - 1일차 (0) | 2024.01.19 |