[CSS] 제이쿼리(JQuery)로 추억앨범 웹사이트 만들기 - javascript

조민경·2024년 12월 6일
CSSJavaScript코딩이 처음이어도 쉽게 배우는 웹개발 A to Z

CSS

목록 보기
4/9

✔️ 아래 링크에서 만든 추억앨범 웹사이트에 제이쿼리를 적용해봅시다!
[CSS] 부트스트랩(bootstrap)으로 추억앨범 웹사이트 만들기 - html

💻 기존 CSS 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>나만의 추억앨범</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=Gowun+Dodum&display=swap');
            * {
                font-family: 'Gowun Dodum', sans-serif;
            }
            .mytitle {
                height: 250px;
                color: white;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
                background-position: center;
                background-size: cover;
            }
            .mytitle > button {
                width: 150px;
                height: 50px;
                background-color: transparent;
                color: white;
                border: 1px solid white;
                border-radius: 5px;
                margin-top: 20px;
            }
            .mycards {
                width: 1200px;
                margin: 30px auto 0px auto;
            }
            .mypostingbox {
                width: 500px;
                margin: 30px auto 0px auto;
                padding: 20px;
                box-shadow: 0px 0px 3px 0px blue;
                border-radius: 5px;
            }
            .mybtn {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
            .mybtn > button {
                margin-right: 5px;
            }
        </style>
    </head>
    <body>
        <div class="mytitle">
            <h1>나만의 추억앨범</h1>
            <button>추억 저장하기</button>
        </div>
        <div class="mypostingbox">
            <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-dark">기록하기</button>
                <button type="button" class="btn btn-outline-dark">닫기</button>
            </div>
        </div>
        <div class="mycards">
            <div class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">앨범 제목</h5>
                            <p class="card-text">앨범 내용</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">앨범 제목</h5>
                            <p class="card-text">앨범 내용</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">앨범 제목</h5>
                            <p class="card-text">앨범 내용</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">앨범 제목</h5>
                            <p class="card-text">앨범 내용</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>



📝 추억앨범 프로젝트

😃 PostBox 에 입력한 내용에 따라 카드 생성하는 법을 배워 볼 거예요!


✔️ jQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

💻 해당 코드를 head 안에 넣기!

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>나만의 추억앨범</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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"
    />
    <style>
      ...
    </style>
</head>


✔️ 추억 저장하기 버튼

🖱️ 버튼을 클릭하여 PostBox 열고 닫기(toggle)

🙂 "토글(toggle)"은 두 가지 상태 사이를 전환하는 동작을 의미합니다. 즉, 어떤 속성이나 상태를 켜거나 끄는 동작을 말합니다.

...
<script>
	function openclose() {
		$('#postingbox').toggle();
	}
</script>
...
<body>
    <div class="mytitle">
        <h1>나만의 추억 앨범</h1>
        <button onclick="openclose()">추억 저장하기</button>
    </div>
    <div class="mypostingbox" id="postingbox">
...
  • $('#postingbox') -> id="postingbox"인 항목 가르키기
  • $('#postingbox').toggle() -> id="postingbox"인 항목 toggle 활성화
  • onclick="openclose()" -> 버튼 누르면 openclose() 함수 호출



✔️ Postingbox에 데이터 넣고 카드 생성하기

🙂 지금부터 포스팅박스에 적은 데이터를 토대로 카드를 생성해 볼 거예요!
.val()은 JQuery 메서드 중 하나로 선택한 요소의 값을 가져오는 역할을 합니다.


💳 makeCard() 함수에 변수 추가하기

function makeCard(){
	let image = $('#image').val();
	let title = $('#title').val();
	let content = $('#content').val();
	let date = $('#date').val();
}
  • let으로 새로 변수를 만들어 $('') 안에 있는 id의 값을 .val()로 가져오기

📋 id값 변경하기

 <div class="mypostingbox" id="postingbox">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="image" placeholder="앨범 이미지" />
                <label for="floatingInput">앨범 이미지</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="title" placeholder="앨범 제목" />
                <label for="floatingInput">앨범 제목</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="content" placeholder="앨범 내용" />
                <label for="floatingInput">앨범 내용</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="date" placeholder="앨범 날짜" />
                <label for="floatingInput">앨범 날짜</label>
            </div>
  • id="floatingInput" 값 바꿔주기

🖱️ 기록하기 버튼에 함수 등록하기

<button type="button" onclick="makeCard()" class="btn btn-dark">기록하기</button>
  • 버튼 클릭시 makeCard() 호출

💳 makeCard() 함수에 추가할 카드 생성

let temp_html = `
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">앨범 제목</h5>
                            <p class="card-text">앨범 내용</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>`;
                $('#card').append(temp_html);
  • body의 class="mycards"의 카드 하나 가져와서 복사 붙여넣기
  • $('#card').append(temp_html) -> id="card" 뒤에 temp_html을 append해라



🔧 내가 작성한 내용으로 카드 추가되게 수정하기

function makeCard(){
    let image = $('#image').val();
    let title = $('#title').val();
    let content = $('#content').val();
    let date = $('#date').val();

    let temp_html = `
    <div class="col">
        <div class="card h-100">
            <img
                src="${image}"
                class="card-img-top"
                alt="..."
            />
            <div class="card-body">
                <h5 class="card-title">${title}</h5>
                <p class="card-text">${content}</p>
            </div>
            <div class="card-footer">
                <small class="text-body-secondary">${date}</small>
            </div>
        </div>
    </div>`;
    $('#card').append(temp_html);
}
  • ${} 안에 원하는 변수명 넣기
  • 이미지 링크
https://www.agoda.com/wp-content/uploads/2020/04/Jeju-Island-hotels-things-to-do-in-Jeju-Island-South-Korea.jpg



💻 완성 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>나만의 추억앨범</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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"
        />
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
            * {
                font-family: 'Gowun Dodum', sans-serif;
            }
            .mytitle {
                height: 250px;
                color: white;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
                background-position: center;
                background-size: cover;
            }
            .mytitle > button {
                width: 150px;
                height: 50px;
                background-color: transparent;
                color: white;
                border: 1px solid white;
                border-radius: 5px;
                margin-top: 20px;
            }
            .mycards {
                width: 1200px;
                margin: 30px auto 0px auto;
            }
            .mypostingbox {
                width: 500px;
                margin: 30px auto 0px auto;
                padding: 20px;
                box-shadow: 0px 0px 3px 0px blue;
                border-radius: 5px;
            }
            .mybtn {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
            .mybtn > button {
                margin-right: 5px;
            }
        </style>
        <script>
            function openclose() {
                $('#postingbox').toggle();
            }
            function makeCard() {
                let image = $('#image').val();
                let title = $('#title').val();
                let content = $('#content').val();
                let date = $('#date').val();

                let temp_html = `
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="${image}"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">${title}</h5>
                            <p class="card-text">${content}</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">${date}</small>
                        </div>
                    </div>
                </div>`;
                $('#card').append(temp_html);
            }
        </script>
    </head>
    <body>
        <div class="mytitle">
            <h1>나만의 추억앨범</h1>
            <button onclick="openclose()">추억 저장하기</button>
        </div>
        <div class="mypostingbox" id="postingbox">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="image" placeholder="앨범 이미지" />
                <label for="floatingInput">앨범 이미지</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="title" placeholder="앨범 제목" />
                <label for="floatingInput">앨범 제목</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="content" placeholder="앨범 내용" />
                <label for="floatingInput">앨범 내용</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="date" placeholder="앨범 날짜" />
                <label for="floatingInput">앨범 날짜</label>
            </div>
            <div class="mybtn">
                <button type="button" onclick="makeCard()" class="btn btn-dark">기록하기</button>
                <button type="button" class="btn btn-outline-dark">닫기</button>
            </div>
        </div>
        <div class="mycards">
            <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">앨범 제목</h5>
                            <p class="card-text">앨범 내용</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">앨범 제목</h5>
                            <p class="card-text">앨범 내용</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">앨범 제목</h5>
                            <p class="card-text">앨범 내용</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <img
                            src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">앨범 제목</h5>
                            <p class="card-text">앨범 내용</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-body-secondary">앨범 날짜</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
profile
조민경
이전 포스트

[CSS] 부트스트랩(bootstrap)으로 넷플릭스 따라만들어보기 - html

다음 포스트

[CSS] 제이쿼리(JQuery)로 넷플릭스 만들기 - javascript

0개의 댓글