Vue CLI 부트스크랩 5 이미지 - Vue CLI Bootstrap 5 Image, img-fluid

이어서 메인 페이지 기본 상단 영역의 오른쪽에 이미지를 추가해 보겠습니다.

우선 이미지를 추가하기 위해 사이트에서 무료 이미지를 다운로드하고 이미지의 배경을 제거합니다.

​

​

무료 이미지 다운로드 받기

​

저는 이미지를 어도비 스톡(Adobe Stock)에서 무료 라이선스로 다운로드했습니다.

 

이미지/비디오 무료 다운로드(https://carrotweb.tistory.com/150)를 참고하세요.

다운로드한 이미지는 JPG 파일입니다. JPG 파일은 이미지의 배경을 제거할 수 없습니다. 그래서 이미지 배경을 제거하고 JPG 파일을 PNG 파일로 변환해야 합니다.

​

​

이미지 배경 제거

​

저는 이미지 배경을 제거하고 PNG 파일로 변환하여 다운로드할 수 있는 Remove.bg를 사용하였습니다.

이미지 편집 - 이미지 배경 제거, 파일 변환(https://carrotweb.tistory.com/151)을 참고하세요.

​

먼저 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다.

npm run serve

 

 

메인 페이지 기본 상단 영역에 이미지 추가

​

1. 이미지 배경이 제거하여 다운로드한 파일을 C:\workspaces\nodeserver\testvue\src\assets 폴더에 복사합니다.

​

2. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈합니다. 오른쪽 영역에 <img> 태그를 추가합니다.

<template>
	<div class="main-top-promotion">
		<div class="container">
			<div class="row">
				<div class="col-sm-12 col-md-6">
					<div class="py-3 py-md-5">
						<h1 class="text-white fw-bold">
							Welcome to Your <br>Vue.JS Application
						</h1>
						<p class="text-white mb-4 fs-5">
							당신의 이야기가 세상을 바꿉니다.
						</p>
						<router-link :to="{name: 'BoardWrite'}" class="btn btn-success">나의 이야기 쓰기</router-link>
					</div>
				</div>
				<div class="col-sm-12 col-md-6">
					<img src="../assets/AdobeStock_440217805-removebg-preview.png" alt="" class="img-fluid">
				</div>
			</div>
		</div>
	</div>
	<div class="home">
		<img alt="Vue logo" src="../assets/logo.png">
		<HelloWorld msg="Welcome to Your Vue.js App"/>
	</div>
</template>

<img> 태그의 class에 .img-fluid를 추가하면 이미지가 반응형으로 적용됩니다.

​

자세한 내용은 Bootstrap의 Images(https://getbootstrap.com/docs/5.1/content/images/)를 참조하세요.

​

오른쪽 영역에 이미지가 적용되면 다음과 같이 나타납니다.

 

모바일 사이즈에서는 다음과 같이 나타납니다.

 

 

3. 왼쪽 영역에 있는 내용을 오른쪽 영역에 있는 이미지의 중간에 정렬되도록 row인 <div> 태그의 class에 .align-items-center를 추가합니다.

<div class="row align-items-center">
	<div class="col-sm-12 col-md-6">
		<div class="py-3 py-md-5">
			<h1 class="text-white fw-bold">
				Welcome to Your <br>Vue.JS Application
			</h1>
			<p class="text-white mb-4 fs-5">
				당신의 이야기가 세상을 바꿉니다.
			</p>
			<router-link :to="{name:'BoardWrite'}" class="btn btn-success">나의 이야기 쓰기</router-link>
		</div>
	</div>
	<div class="col-sm-12 col-md-6">
		<img src="../assets/AdobeStock_440217805-removebg-preview.png" alt="" class="img-fluid">
	</div>
</div>

 

.align-items-center는 영역의 수직으로 자식 요소들을 가운데 정렬되게 합니다.

.align-items-center {
    align-items: center!important;
}

 

4. 왼쪽 영역에 있는 내용을 PC 사이즈에서는 왼쪽 정렬되게 하고 모바일 사이즈에서는 가운데 정렬되게 왼쪽 영역인 <div> 태그의 class에 .text-md-start를 추가합니다.

<div class="row align-items-center">
	<div class="col-sm-12 col-md-6 text-md-start">
		<div class="py-3 py-md-5">
			<h1 class="text-white fw-bold">
				Welcome to Your <br>Vue.JS Application
			</h1>
			<p class="text-white mb-4 fs-5">
				당신의 이야기가 세상을 바꿉니다.
			</p>
			<router-link :to="{name:'BoardWrite'}" class="btn btn-success">나의 이야기 쓰기</router-link>
		</div>
	</div>
	<div class="col-sm-12 col-md-6">
		<img src="../assets/AdobeStock_440217805-removebg-preview.png" alt="" class="img-fluid">
	</div>
</div>

.text-start는 텍스트가 왼쪽 정렬로 적용됩니다.

.text-center는 텍스트가 가운데 정렬로 적용됩니다.

.text-end는 텍스트가 오른쪽 정렬로 적용됩니다.

​

그리고 6개의 계층(반응형 중단점 - breakpoint)과 같이 적용하려면 text-{breakpoint}-{start|center|end}로 적용하면 됩니다.

​

자세한 내용은 Bootstrap의 Text(https://getbootstrap.com/docs/5.1/utilities/text/)를 참조하세요.

 

 

이미지 파일을 C:\workspaces\nodeserver\testvue\src\assets 폴더에 복사하여 배포하게 되면 다음 배포할 때까지 이미지 파일을 변경할 수 없습니다. 그래서 변경되어야 하는 이미지 파일들은 Node 서버의 정적 파일로 처리하시거나 별로 서버로 구성하는 것이 좋습니다.