2021-06-08 (html 백그라운드이미지 사용하기)

background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size:cover; /*백그라운이미지 전체 크기조점*/
background-position: center;

 

3가지가 함께 움직이면 편하다.

background-image는 이미지를 가져오는것background-size: cover는 이미지 전체 크기조정background-position:center는 이미지 가운데 조정

 

margin은 바깥쪽 여백공간

padding은 안쪽 여백공간

margin: auto는 여백에 맞게 자동으로 위치 조정

display: block; /*글씨는 가로세로 개념이없어 그림처럼 가로세로 개념을 주기위해 블록처리함*/

text-align:center는 텍스트의 위치를 가운데 조정할수있다.

 

전체 폰트를 적용하려면

head에서 레퍼럴문구

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

그리고 헤더 css에서 *{}전체를 통해 선언

 

질문 :

1. background-size : cover; 커버가 정확히 어떤기능인가요? 그림 크기를 조정해주는건가요?

2. 로그인하기 버튼을 만들고 버튼을 페이지 가운데 배치할 때 margin 오토로 해도 배치가 안될수 있어, display block을 줘야한다고 하셨는데 이유가 문자는 가로세로 개념이없어 그림처럼 가로 세로개념을 주기위해 block으로 해주어야한다고 하셨는데 로그인하기 버튼이 문자인가요? 문자라서 block으로 해서 그림처리해야한다는건가요? 로그인하기버튼은 문자가 아니지 않는가요?