하이베리의 소소한 일상

현재 운영중인 웹사이트나 새로 만들 웹 페이지에 미리 만들어 놓은 예쁜 스타일을 바로 적용할 수 있는 부트스트랩 사용법을 소개하겠습니다.

1. 부트스트랩 사이트에 접속합니다.

https://getbootstrap.com/

2. Quick start 에 따라서 필요한 라이브러리 불러오기
https://getbootstrap.com/docs/5.3/getting-started/introduction/

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

3. 다양한 예시들이 나와있는데 필요한 부분을 찾아서 소스코드를 적용한다.

4. 좀 더 다양한 예제를 확인하고 싶다면 examples 메뉴에서 확인할 수 있다.
https://getbootstrap.com/docs/5.3/examples/

지난 시간에 margin 과 padding 으로 객체를 정렬하는 방법을 포스팅 했었는데

display: flex; 기능을 이용해 객체들을 손쉽게 정렬할 수 있다.

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

flex-direction 의 경우 column 과 row 가 있는데 column 는 객체들을 세로로 나열, row 는 가로로 나열하기 이다.

참 편한 기능인 듯 하다.

아래 구글 폰트 링크로 이동 후 다음과 같은 순서에 따라 적용한다.

https://fonts.google.com/?subset=korean 

1. 적용하고 싶은 폰트 선택(클릭)

2. 삽입하고 싶은 형태를 선택 후 복사 (<link> 또는 @import 선택)

import 선택의 경우

1. <style>...</style> 태그 또는 .css 파일 안에 해당 코드를 그대로 삽입

2. CSS rules 에 해당 font-family 적용

* {
	font-family: 'Nanum Gothic', sans-serif;
}

<link> 선택의 경우

1. <header>...</header> 안에 해당 태그를 그대로 삽입

2. 마찬가지로 CSS rules 에 해당 font-family 적용

margin : 블럭 바깥쪽 여백 지정
margin : (위) (오른쪽) (아래) (왼쪽); 순서로 지정.
특정 부위만 지정하고 싶은 경우 해당 위치를 직접 지정해주면 된다.

margin : 0px 10px 0px 10px;

margin-left: 10px;
margin-right: 10px;

padding : 객체 안쪽 여백 지정
margin 과 마찬가지의 속성을 가진다.

Tip. 블럭을 정 중앙에 오게 하고 싶다면..?
<div>.....</div> 로 감싼 후 해당 블럭에 대하여 바깥 여백(margin)을 다음과 같이 설정

.div {
	width: 300px;
	margin: 0px auto 0px auto;
}

div 의 경우 브라우저의 가로 크기 만큼 한줄 통째로 영역이 지정되기 때문에 width 로 정렬할 블럭의 가로 사이즈를 지정한 후에 margin의 auto 속성을 이용하여 객체가 시작되는 위치까지 자동으로 쭉 밀어서 여백을 지정하는 방법을 이용한다.

background 에는 3가지 속성을 함께 써준다.

background-image: url('.....');
background-position: center;
background-size: cover;

background-image
배경에 이미지를 넣고 싶을때 사용.

background-positon
배경 이미지 위치 지정.
기본적으로 왼쪽 상단부터 이미지가 시작이 되는데 position을 center 로 지정할 경우 이미지 가운데 부터 시작할 수 있다.

background-size
배경 사이즈 선택. cover 의 경우 배경 블럭 공간 만큼 자동으로 맞춰 준다.

예전부터 블로그로 수익을 내는게 일상인 분들이 많이 있었죠~

CPA나 CPS나..

제 주변에도 부업과 주업으로도 많이 하고 계셨어요..

근데 이런 수익 구조들이 사실 포털 사이트의 개편과 여러가지 주변 상황에 영향을 너무 받다보니

어느정도 한계가 왔고 많은 인내심이 필요한 때도 있었죠..ㅠ

근데 마케팅에서도 변화가 시작됐죠..

모바일로 거의 모든것을 해결하는게 현실이다보니

CPA 만으로는 뭔가 부족하다 느끼게 되는 것이죠~ 업체별로 경쟁도 많구요..

최근 CPI 라는 마케팅이 각광을 받고 있는것이

앱 출시와 마케팅을 동시에 진행하고 싶은 광고주들이 많다보니

설치 마케팅이 급부상 하게됩니다~

그래서 CPI를 전문으로 광고/홍보 마케팅을 해주는 업체들도 생겨나게 되는데요~

아무래도 커뮤니티(SNS)에서 정보를 얻고 공유하는 것이

모바일로 모든것을 해결하는 현재 시점에서는 포털 검색을 통한 블로그 유입 보다는

효과가 더 크기 때문에 SNS 활동을 하고 있다면 너무나 쉽게 접근이 가능하다는게

CPA 랑은 또 전혀 다른 매력인것 같네요!! +_+

제가 추천하는 CPI 업체는 애드릭스 라는 곳인데

다른 경쟁업체에 비해 가입도 간편하고 관리가 쉬워요~

재택알바나 부업, CPA,CPS에 지치신 분들, 투잡을 하고싶으신분들~

꼭 한번씩 해보시길 권해드립니다~^^/

아래 링크를 클릭하면 새창으로 열립니다!!^^/