티스토리 뷰

블로그 꾸미기

티스토리 움직이는 이미지 슬라이더 배너 만들기

cocoder 2024. 3. 18. 22:16
728x90

 

안녕하세요 cocoder 입니다.

 

이번엔 bootstrap 이라는 라이브러리를 사용하여서 움직이는 이미지 슬라이더 배너를 만들어보겠습니다.

 

 

 

시작전에 최소 2장의 사진을 준비해주세요.

 

티스토리 관리페이지 '꾸미기 > 스킨편집' 후에 html 편집 버튼을 클릭합니다.

 

</head> 태그 바로위에 아래의 코드를 붙여넣기 합니다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

 

 

 

무료 이미지 호스팅 사이트를 이용하여 이미지를 업로드 합니다.

 

무료 이미지 호스팅 사이트 하나를 알려드릴게요.

https://postimages.org/

 

Postimages — 무료 이미지 호스팅 / 이미지 업로드 사이트

무료 이미지 업로드 및 포럼에 대한 호스팅 통합을 제공합니다. 무료 사진호스팅 및 사진은 웹 사이트와 블로그에 대한 공유.

postimages.org

 

이미지를 업로드 하고 직접링크를 복사해 둡니다. 2개의 이미지 모두의 경로를 각각 복사해 두어야합니다.

 

복사한 이 경로를 사용하여 슬라이더에 이미지를 띄울겁니다.

 

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div style="
	background-image:url('이미지1 주소'); 
	height:400px;  
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;">
            </div>
        </div>
        <div class="carousel-item">
            <div style="
	background-image:url('이미지2 주소'); 
	height:400px;  
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;">
            </div>
        </div>
    </div>
</div>

위의 코드를 복사하고 '이미지1 주소', '이미지2 주소' 에 각각 복사한 이미지 주소를 넣어줍니다.

 

 

완성된 모습입니다.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div style="
	background-image:url('https://i.postimg.cc/76gT0QMm/1.webp'); 
	height:400px;  
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;">
            </div>
        </div>
        <div class="carousel-item">
            <div style="
	background-image:url('https://i.postimg.cc/76gT0QMm/2.webp'); 
	height:400px;  
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;">
            </div>
        </div>
    </div>
</div>

이 코드 전체를 복사하고 이제 html <body> 태그 아래에 넣어줍니다.

 

 

 

미리보기 버튼으로 변경사항 확인후 적용을 눌러줍니다.

 

커스텀 하는 부분은 이 글을 참고해주세요.

https://cocoder.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%83%81%EB%8B%A8-%EB%B0%B0%EB%84%88-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

티스토리 상단 반응형 배너 만들기

안녕하세요! cocoder 입니다. 이번엔 티스토리 상단에 고정된 배너 이미지를 만드는 방법을 알려드릴게요!! 일단 배너로 하실 이미지 하나를 준비해주세요. 가로비율이 넓은 이미지이면 좋을 것

cocoder.tistory.com

 

이상입니다 👍👍

 

감사합니다 ❤️

728x90

'블로그 꾸미기' 카테고리의 다른 글

누르고 싶은 구독버튼 만들기  (4) 2024.03.20
블로그 상단 배너에 귀여운 움직이 텍스트로 꾸미기  (2) 2024.03.20
드래그로 선택된 텍스트 기본 색상 변경  (4) 2024.03.19
스크롤바 내 맘대로 변경하기  (4) 2024.03.19
티스토리 상단 반응형 배너 만들기  (2) 2024.03.18