하이베리의 소소한 일상

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

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

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

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

참 편한 기능인 듯 하다.

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