728x90
반응형
저는 작년에 결혼을 했는데요.
사진 찍는 것을 좋아하고, 오래 연애하기도 해서 사진이 정말 많았어요.
모바일 청첩장에도 사진을 많이 넣고싶어서 결국 셀프로 만들기로 결정했는데요.
이번 포스팅에서는 모바일 청첩장을 셀프로 만드는 방법을 공유드리려고 합니다.
먼저 제가 참고했던 코드는 AndersonChoi님의 코드입니다.
좋은 코드 공유해주셔서 감사합니다:)
(물론 그대로 사용하지는 않았고, 살짝 가공해서 사용했습니다.)
GitHub - AndersonChoi/wedding-card: 결혼식 청첩장
결혼식 청첩장. Contribute to AndersonChoi/wedding-card development by creating an account on GitHub.
github.com
준비물
- 깃허브 아이디(깃 블로그 사용중이라면 새로 만드시는 것을 추천드려요)
- 모바일 청첩장에 넣을 사진
깃허브 아이디가 아직 없으시다면 아래 포스팅을 참고해서 만들어주세요.
템플릿 적용은 안하셔도 됩니다.
깃허브 블로그 만드는 방법 및 테마 설정
가끔 구글 검색을 해보면 티스토리, 네이버 블로그 외에 깃허브 블로그도 많이 뜨는 것을 볼 수 있죠.깃허브 블로그는 일반 블로그 용도로도 사용하실 수 있는데요.그 외에 본인만의 페이지 만
jaeyoon-95.tistory.com
구조
assets > 사진, 아이콘 등을 저장해둘 폴더
css > 청첩장 css 파일을 저장해둘 폴더
js > 청첩장 기능 javascript 파일을 저장해둘 폴더
pages > 앨범 보기 등 상세 페이지를 저장해둘 폴더
index.html > 메인 페이지 html파일
위와 같이 폴더가 있습니다.
우리는 주로 js, index.html파일을 건들 예정이고, 필요하다면 pages 내에 새로 페이지를 정의할겁니다.
메인 페이지
웹으로 열였을 때 위의 페이지 내에 이름이 적히는 부분이 있는데요.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="assets/img/url-main.jpg">
<meta property="og:description" content="2024.03.01 재윤🤍영석 결혼합니다."/>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>재윤🤍영석</title> --> 여기를 수정하시면 됩니다.이 부분은 위의 코드 내에서 수정하시면 됩니다.
먼저 들어가자마자 보일 인삿말 및 사진 부분 인데요.
<!-- Header-->
<header class="masthead d-flex align-items-center">
<div class="container px-4 px-lg-5 text-center">
<h2 class="mb-1"> </h2>
<h2 class="mb-1"> </h2>
<h2 style="font-family: 'Amatic SC', sans-serif; color: white; font-weight: bold;">Jaeyun&YeongSeok</h1> --> 여기 수정 필요
<br>
<h2 style="font-family: 'Amatic SC', sans-serif; color: white; font-weight: bold;">| We invite you to our wedding |</h2> --> 여기 수정 필요
<p style="font-family: 'Song Myung', serif; color: white; font-size: 13px;"><br>❤️2024.03.01❤️<br>오전 11시 30분<br>빌라드지디 청담</p> --> 여기 수정 필요
</div>
</header>
<!-- Contents -->
<section class="content-section bg-light" id="about">
<div class="container px-4 px-lg-5 text-center">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-10">
<p style="font-family: 'Song Myung', serif; font-size: 16px;"> --> 여기 수정 필요
함께하는 일곱 번째 봄에 서로의 인생을 품으려 합니다.
<br>
늘 봄날처럼 밝고 행복하게 살도록 노력하겠습니다.
<br>두 사람이 함께하는 새로운 시작에<br> 귀한 발걸음으로 축복해 주시면 감사하겠습니다.
</p>
<h2 style="font-family: 'Song Myung', serif;"><br>재윤🤍영석 드림</h2> --> 여기 수정 필요
</div>
</div>
</div>
</section><!-- Header -->, <!-- Contents --> 부분을 보시면 됩니다.
수정 필요한 부분은 다 남겨두었어요!
여기서부터는 기능이 조금씩 들어가는데요.
전화 아이콘, 송금 아이콘 클릭시 전화번호와 계좌번호가 복사되고, 혼주 연락처 보기를 클릭할 경우 토글로 펼치기 기능이 생깁니다.
먼저 보이는 파일인 html 파일만 살펴볼게요.
<!-- Introduction -->
<section class="content-section bg-primary text-white text-center" id="services">
<div class="container px-4 px-lg-5">
<div class="content-section-heading">
<p style="font-family: 'Song Myung', serif; font-size: 25px; font-weight: bold;">신랑&신부</p>
</div>
<br>
<div class="row gx-4 gx-lg-5">
<div class="col-lg-6 col-md-6 mb-5 mb-lg-0">
<p style="font-family: 'Song Myung', serif; font-size: 20px;">최재혁 조미희의 장남</p> --> 수정 필요
<h3 style="font-family: 'Song Myung', serif;">신랑 최영석👰🏻♂️</h3> --> 수정 필요
<img src="assets/img/ys.jpg" class="img-fluid rounded-circle" alt="신랑 이미지"> --> 수정 필요
<p><br></p>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="xxxxxxxx-"><i class="fa-solid fa-phone"></i></a> --> 수정 필요
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" onclick="yeongseokAccountNumber(); return false;" href="#!"><i class="fa-solid fa-comments-dollar"></i></a> --> 수정 필요
</li>
</ul>
<div id="foldableSection">
<p style="font-family: 'Song Myung', serif; font-size: 20px;" class="toggle-button" onclick="toggleFoldable()">혼주 연락처보기<span id="toggleIcon">▼</span></p>
<div class="foldable-content">
<p style="font-family: 'Song Myung', serif; font-size: 15px;">최재혁 <a href="tel:01000000000"><i class="fa-solid fa-phone fa-sm"></i></a> <a href="sms:01000000000"><i class="fa-solid fa-envelope fa-sm"></i></a> <a onclick="yeongseoksFatherAccountNumber(); return false;" href="#!"><i class="fa-solid fa-comments-dollar"></i></a></p> --> 수정 필요
<p style="font-family: 'Song Myung', serif; font-size: 15px;">조미희 <a href="tel:01000000000"><i class="fa-solid fa-phone fa-sm"></i></a> <a href="sms:01000000000"><i class="fa-solid fa-envelope fa-sm"></i></a></p> --> 수정 필요
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 mb-5 mb-lg-0">
<p style="font-family: 'Song Myung', serif; font-size: 20px;">이병관 안성원의 장녀</p> --> 수정 필요
<h3 style="font-family: 'Song Myung', serif;">신부 이재윤🤵🏻♀️</h3> --> 수정 필요
<img src="assets/img/jy.jpg" class="img-fluid rounded-circle" alt="신부 이미지"> --> 수정 필요
<p><br></p>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-5" href="xxxxxxxx"><i class="fa-solid fa-phone"></i></a> --> 수정 필요
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-5" onclick="jaeyunAccountNumber(); return false;" href="#!"><i class="fa-solid fa-comments-dollar"></i></a> --> 수정 필요
</li>
</ul>
<div id="foldableSection">
<p style="font-family: 'Song Myung', serif; font-size: 20px;" class="toggle-button" onclick="toggleFoldable2()">혼주 연락처보기<span id="toggleIcon2">▼</span></p>
<div class="foldable-content2">
<p style="font-family: 'Song Myung', serif; font-size: 15px;">이병관 <a href="tel:01000000000"><i class="fa-solid fa-phone fa-sm"></i></a> <a href="sms:01000000000"><i class="fa-solid fa-envelope fa-sm"></i></a></p> --> 수정 필요
<p style="font-family: 'Song Myung', serif; font-size: 15px;">안성원 <a href="tel:01000000000"><i class="fa-solid fa-phone fa-sm"></i></a> <a href="sms:01000000000"><i class="fa-solid fa-envelope fa-sm"></i></a></p> --> 수정 필요
</div>
</div>
</div>
</div>
</div>
</section>다른 건 단순히 텍스트만 바꾸거나, 이미지 경로만 바꿔주면 되는데요.
기능이 포함된 부분은 js파일을 수정해줘야합니다.
### html에서의 호출 방법
<p style="font-family: 'Song Myung', serif; font-size: 20px;" class="toggle-button" onclick="toggleFoldable()">혼주 연락처보기<span id="toggleIcon">▼</span></p>
### js 내에서 정의된 함수
function toggleFoldable() {
var content = document.querySelector('.foldable-content');
var toggleIcon = document.getElementById('toggleIcon');
// 펼치기/접기 상태 변경
if (content.style.display === 'none') {
content.style.display = 'block';
toggleIcon.innerText = '▲';
// 추가로 펼쳐진 상태에서 수행할 동작 추가 가능
} else {
content.style.display = 'none';
toggleIcon.innerText = '▼';
// 추가로 접힌 상태에서 수행할 동작 추가 가능
}
}위의 코드는 혼주 정보 토글 액션을 정의한 부분인데요.
js파일 내에 toggleFoldable()이라는 함수를 정의해주었습니다.
이건 따로 수정할 필요는 없고, 이렇게 정의되어 있는 것만 알고계시면 될 것 같습니다.
### html 내에서 호출 코드
<a class="social-link rounded-circle text-white mr-3" onclick="groom_account(); return false;" href="#!"><i class="fa-solid fa-comments-dollar"></i></a>
### js 내에서 기능 정의 코드
// 신랑 계좌번호 복사
function groomAccountNumber(){
var groom_account = '00000000 카카오뱅크';
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.value = groom_account;
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
alert("신랑의 계좌번호가 복사되었습니다.\n00000000 카카오뱅크")
}위에서 계좌번호를 클릭할 경우 복사가 되는 액션을 정의했다고 말씀드렸는데요.
js 파일 내에 있는 000AccountNumber() 함수 내에 있는 계좌번호만 수정해주시면 됩니다.
저는 저, 신랑, 시아버지 이렇게만 정의해두었고요.
필요하시면 함수 더 만드시면 되겠습니다.
다음은 갤러리인데요.
여기서 사진을 다 보여주지 않고, 갤러리 클릭할 경우에만 넘어갈 수 있도록 했어요.
이거는 pages 폴더 내에 또 다른 페이지를 넣어두었습니다.
<!-- Photo Zone -->
<section class="content-section" id="portfolio">
<div class="container px-4 px-lg-5">
<div class="content-section-heading text-center">
<p style="font-family: 'Song Myung', serif; font-size: 25px; font-weight: bold;">갤러리</p>
</div>
<div class="row gx-0">
<div class="col-lg-6">
<a class="portfolio-item" href="pages/studio.html"> --> 수정 필요
<div class="caption">
<div class="caption-content">
<div class="h2" style="font-family: 'Song Myung', serif;">스튜디오 사진 보러가기</div> --> 수정 필요
<p class="mb-0" style="font-family: 'Song Myung', serif;">At IVE Studio</p> --> 수정 필요
</div>
</div>
<img class="img-fluid" src="assets/img/main.jpg" alt="..." /> --> 수정 필요
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="pages/jeju.html"> --> 수정 필요
<div class="caption">
<div class="caption-content">
<div class="h2" style="font-family: 'Song Myung', serif;">제주 스냅 사진 보러가기</div> --> 수정 필요
<p class="mb-0" style="font-family: 'Song Myung', serif;">At Jeju Island</p> --> 수정 필요
</div>
</div>
<img class="img-fluid" src="assets/img/jeju-main.jpg" alt="..." /> --> 수정 필요
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="pages/self.html"> --> 수정 필요
<div class="caption">
<div class="caption-content">
<div class="h2" style="font-family: 'Song Myung', serif;">셀프 스냅 사진 보러가기</div> --> 수정 필요
<p class="mb-0" style="font-family: 'Song Myung', serif;">Memories of 6 years</p> --> 수정 필요
</div>
</div>
<img class="img-fluid" src="assets/img/self-main.jpeg" alt="..." /> --> 수정 필요
</a>
</div>
</div>
</div>
</section>폴더 개수에 따라 수정이 필요하고, 각 폴더의 이름과 pages내에 html파일 링크를 수정하시면 됩니다.
마지막으로 식장에 대한 정보를 적고, 맵을 보여주면 되는데요.
저는 맵은 구글 맵으로 했습니다. 카카오맵은 연동해놓으니 어떤 폰은 안되고, 어떤 폰은 되더라고요.
<!-- Information -->
<section class="content-section bg-primary text-white">
<div class="container px-4 px-lg-5 text-center">
<p class="mb-4" style="font-family: 'Song Myung', serif; font-size: 20px;">📢2024.03.01 오전 11시 30분📢<br>빌라드지디 청담</p> --> 수정 필요
<p style="font-family: 'Song Myung', serif; font-size: 16px;"><br>홀에서 예식을 보신 뒤 1층으로 이동하시거나<br>1층에서 스크린으로 예식을 보며 식사 하실 수 있습니다.😊</p> --> 수정 필요
<div id="foldableSection">
<p style="font-family: 'Song Myung', serif; font-size: 15px;" class="toggle-button" onclick="toggleFoldable3()">층별 안내<span id="toggleIcon3">▼</span></p> --> 수정 필요
<div class="foldable-content3" style="display: none;">
<p style="font-family: 'Song Myung', serif; font-size: 10px;">아이콘을 누르시면 페이지로 이동합니다.</p> --> 수정 필요
<p style="font-family: 'Song Myung', serif; font-size: 12px;">1층 - 연회장<a class="no-style" href="https://chungdamvilladegd.com/CelesteCusine">🍽</a></p> --> 수정 필요
<p style="font-family: 'Song Myung', serif; font-size: 12px;">2층 - 메인홀<a class="no-style" href="https://chungdamvilladegd.com/EspaceEmpyree">💒</a></p> --> 수정 필요
<p style="font-family: 'Song Myung', serif; font-size: 12px;">3층 - 신부대기실<a class="no-style" href="https://chungdamvilladegd.com/PavillonMariee">👰🏻♀️</a></p> --> 수정 필요
</div>
</div>
<a class="btn btn-xl btn-light me-4" style="font-family: 'Song Myung', serif; font-size: 12px;" href="https://chungdamvilladegd.com/Location">오시는 길</a> --> 수정 필요
<a class="btn btn-xl btn-dark" style="font-family: 'Song Myung', serif; font-size: 12px;" href="https://chungdamvilladegd.com/Course">메뉴 보러가기</a> --> 수정 필요
<p style="font-family: 'Song Myung', serif; font-size: 18px;"><br>축하화환은 정중히 사양합니다.<br>좋은 마음만 감사히 받겠습니다.💐<br></p> --> 수정 필요
</div>
</section>
<!-- Map-->
<div class="form-group">
<div class="col-md-12">
<div class="my-3 text-center">
<a href="https://naver.me/xM28SuGC"> --> 수정 필요
<img alt="naver-map" class="map-icon" id="naver-map"
src="assets/img/map/naver-map.png"/>
</a>
<a href="https://kko.to/NYdZbVMERT"> --> 수정 필요
<img alt="kakao-map" class="map-icon" id="kakao-map"
src="assets/img/map/kakao-map.png"/>
</a>
<a href="https://maps.app.goo.gl/LwnLrfGHoNFKWo1A6"> --> 수정 필요
<img alt="google-map" class="map-icon" id="google-map"
src="assets/img/map/google-map.png"/>
</a>
</div>
<div class="my-3">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12657.922222904594!2d127.04513706057449!3d37.52016777181734!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca5419460f02b%3A0xc83d0b0bd4ba3c31!2z67mM652865Oc7KeA65SUIOyyreuLtA!5e0!3m2!1sko!2skr!4v1700744494639!5m2!1sko!2skr" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></iframe> --> 수정 필요
</div>
</div>
</div>
<!-- Footer-->
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<footer class="footer text-center">
<div class="container px-4 px-lg-5">
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-5" title="카카오톡으로 공유하기" href="javascript:kakaoShare()"><i class="fa-solid fa-arrow-up-right-from-square"></i></a> --> 수정 필요
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-5" title="링크 복사하기" onclick="copyLink(); return false;" href="#!"><i class="fa-solid fa-link"></i></a> --> 수정 필요
</li>
</ul>
<p class="text-muted small mb-0" style="font-family: 'Gowun Dodum', sans-serif;">Made By zzaeyun</p>
</div>
</footer>여기서 필요한 것들이 꽤 많이 있는데요.
크게 구글맵과 카카오 공유하기에서 필요합니다. 먼저 구글맵을 볼게요.
구글맵은 정말 간단한데요.
본인의 식장을 찾으신 뒤에 공유 > 지도 퍼가기를 선택하시면 나오는 iframe태그를 복사해서 그대로 붙여넣으시면 됩니다.
카카오톡 공유하기는 위와 같이 공유되는 것을 뜻합니다.
지금은 다 만료되어서 사진이 다 짤리긴 하지만, 다음과 같이 예쁘게 전달 가능합니다.
먼저 카카오톡 공유하기를 위해서는 카카오톡 디벨로퍼스에서 앱 등록 후 앱 키를 발급받으셔야합니다.
하는 방법이 어렵지 않으니 아래 포스팅을 참고해서 진행해주세요!
카카오톡 공유하기 만드는 방법
SNS 혹은 다른 중요한 문서나 사진을 발견하면 요즘은 카카오톡 공유하기로 많이 공유하더라고요.저도 웹페이지를 만들 일이 있어서 카카오톡 공유하기를 종종 썼었는데요.카카오톡 공유하기를
jaeyoon-95.tistory.com
앨범 페이지
앨범 페이지는 정말 간단합니다.
저는 크게 스튜디오, 제주스냅, 셀프스냅 이렇게 나눠서 페이지를 만들었습니다.
pc버전으로 보면 사진 4개씩 끊어서 보여주고, 모바일은 한 장씩 보여집니다.
<!-- here -->
<div class="container">
<div class="row d-flex flex-wrap align-items-center" data-target="#lightbox">
<h2 style="font-family: 'Song Myung', serif;"><br>2018</h2>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/1.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/2.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/3.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/4.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/8.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/9.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/10.jpeg" data-target="#indicators" alt="" />
</div>
<h2 style="font-family: 'Song Myung', serif;"><br>2019</h2>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/11.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/12.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/13.jpeg" data-target="#indicators" alt="" />
</div>
<h2 style="font-family: 'Song Myung', serif;"><br>2020</h2>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/14.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/15.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/16.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/17.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/18.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/19.jpeg" data-target="#indicators" alt="" />
</div>
<h2 style="font-family: 'Song Myung', serif;"><br>2021</h2>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/20.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/21.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/22.jpeg" data-target="#indicators" alt="" />
</div>
<h2 style="font-family: 'Song Myung', serif;"><br>2022</h2>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/23.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/24.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/25.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/26.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/27.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/28.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/29.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/30.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/31.jpeg" data-target="#indicators" alt="" />
</div>
<h2 style="font-family: 'Song Myung', serif;"><br>2023</h2>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/32.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/33.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/34.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/35.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/36.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/37.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/38.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/39.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/40.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/41.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/42.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/43.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/44.jpeg" data-target="#indicators" alt="" />
</div>
<div class="col-12 col-md-6 col-lg-3">
<img src="../assets/img/self/45.jpeg" data-target="#indicators" alt="" />
</div>
</div>여기는 별도로 수정할 부분이 사진 경로입니다.
아주 간단하죠!
코드 다운로드
코드는 아래의 레파지토리에서 다운 가능합니다.
제 사진을 올려놨기 때문에, 다운받으셔서 지우시면 됩니다.
GitHub - comgongnuna/comgongnuna.github.io
Contribute to comgongnuna/comgongnuna.github.io development by creating an account on GitHub.
github.com
반응형
'꿀팁 > 소소한 팁' 카테고리의 다른 글
| 카카오톡 공유하기 만드는 방법 (0) | 2025.03.03 |
|---|---|
| 깃허브 터미널 사용자 정보 등록하는 방법 (0) | 2025.03.03 |
| 깃허브 블로그 만드는 방법 및 테마 설정 (0) | 2025.03.03 |
| 쉘 스크립트(bash shell script) 기본 문법 정리 (1) | 2023.06.13 |
| bardapi를 사용해보자 (0) | 2023.06.10 |
