HTML, CSS, JS, jQeury를 다시한번 복습하는 개념으로 강의를 들었습니다.
처음 배울때의 재미를 다시 느끼고 기본 개념을 익히면서 나만의 추억 앨범이라는 페이지를 만들면서 연습했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./common.css" />
<script src="main.js"></script>
<script>
function openClose() {
$("#postingbox").toggle();
}
</script>
</head>- 헤드태그 안에 부트스트랩 과 제이쿼리cdn 추가하고 스크립트로 제이쿼리를 사용하였습니다.
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button class="titleBtn" onclick="openClose()">추억 저장하기</button>
</div>
<div class="mypostingBox" id="postingbox">
<div class="form-floating mb-3">
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="앨범 이미지"
/>
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="앨범 제목"
/>
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="앨범 내용"
/>
<label for="floatingInput">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="앨범 날짜"
/>
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-light">기록하기</button>
<button type="button" class="btn btn-dark">닫기</button>
</div>
</div>
</body>- 바디에는 부트스트랩으로 버튼과 플로팅 라벨을 가져왔습니다.
지금은 비록 보기 힘들게 되어있지만 나중에는 컴포넌트를 구분해서 보기 좋게 바꿔야겠다.
오늘은 둘쩨날이라 강의를 정리하고 다음날부터는 내가 잘 몰랐던 부분이나 새로 알게된 내용을 더 배워야겠다. 추가로 알고리즘 공부도 더 해야겠다. 머리가 굳어서 잘 굴러가지 않는다,,
프론트엔드 잘하고 싶다