하이베리의 소소한 일상

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

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 의 경우 배경 블럭 공간 만큼 자동으로 맞춰 준다.