나 보라고 만드는 CSS 팁들!

내가 까먹을까봐 적는 CSS 팁들!

 

1) 간단하게 div 를 가운데 정렬로 만드는 방법!

div {
	width:700px;
    margin: auto;
    }

 

2) 배경화면 이미지(background-image)가 헤더크기보다 클때 헤더 크기에 맞추기 (cover 이용)

header{
    width: 700px;
	background-image: url(xxx.jpg);
    background-size: cover;
    }

 

3) 배경화면 이미지(background-image)가 헤더크기보다 작을 때 헤더 크기에 맞추기 (contain 이용)

header {
	background-image: url(xxx.jpg);
    background-size: contain;
    }

 

4) 이미지 여러 개 한줄로 놓고 가운데 정렬 하기 (inline-block 이용)

<div class="images-wrapper">
  <div class="images-item">
    <img src="image1.jpg" alt="image1">
    <br>image1-explanation
  </div>
  <div class="images-item">
    <img src="image2.jpg" alt="image2">
    <br>image2-explanation
  </div>
  <div class="images-item">
    <img src="image3.jpg" alt="image3">
    <br>image3-explanation
  </div>

html (그림 밑에 설명을 넣어준다고 하면 함께 div 박스로 묶어야 하고 아니면 그럴 필요 없이 img에 클래스를 지정해줘서 진행하면 될 것 같다.)

 

.images-wrapper {
    text-align: center;
    margin: auto;  
}

.images-item{
    display: inline-block;
    text-align: center;
    margin: 0 5% 0 5%;
    max-width: 20%;
    font-size: 0.8em;
}

.images-item img{
    max-width:100%;
}

css 파일 wrapper 도 센터처리, item들도 센터처리(그림 밑에 글씨르 ㄹ넣을 경우) 디스플레이는 inline-block으로 해주기