5. 자주 쓰이는 CSS 연습하기

 

이 페이지를 만들어 볼것이다. 자세한 과정은 동영상 참조!

 

 

 

내생각 -->

/*이미지는 항상 아래 3가지가 붙어다닌다고 생각하면 쉽습니다.!*/

background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;

border-radius: 10px;
padding-top: 20px;
/*여백 개념 공부하기*/
/*padding 안쪽으로 20px*/
/*margin 바깥으로 20px*/

}

/* div를 가운데로 옮기는법*/

/*내가 가운데 있다는 것은 내 양쪽여백이 동등하게 최대이다 를 의미한다.*/

.wrap{

width: 300px;
margin: auto;


}

.mybtn{

width: 100px;
margin: auto;
display: block;

}

 

여기서 재밌는거는 margin: auto와 width 의 값을 정해놓으면 가운데로 오지만 전제조건이 그 div의 display값이 block이라는 점이다.