[CSS] 백그라운드 이미지, margin-auto

마크업/Html & Css

[CSS] 백그라운드 이미지, margin-auto

Rainbow🌈Coder 2023. 1. 15. 17:06

728x90

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images

배경 이미지 크기 조정하기 - CSS: Cascading Style Sheets | MDN

CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. background-size 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다. 이미지는 원하는대로

developer.mozilla.org

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인페이지 마크업</title>
    <style>
        div {
            color: black;
        }

        .login-title > div {
            color: white;
            background-size : 16px;
            background-image: url('https://avatars.githubusercontent.com/u/93479286?v=4');
            background-position: center;
            background-size: 300px;
            width: 300px;
            height: 300px;
            border-radius: 10px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin : auto;
            margin-top: 100px;
        }
        .wrap {
            width: 300px;
            margin : auto;
        }


    </style>
</head>
<body>
<div class="login-title">
<div>
    <h1>로그인 페이지</h1>
    <h5>아이디, 비밀번호를 입력해주세요.</h5>
</div>
</div>
    <div class="wrap">
        <div>
            <h3>로그인</h3>
            <p>
                ID = <input type="text" class="">
            </p>
            <p>
                PW = <input type="text" class="">
            </p>
            <button>로그인하기</button>
        </div>
    </div>
        
</body>
</html>

margin auto auto; 와 text-align: center; 의 차이

1. text-align: center

이 정렬방법은 inline 요소가 정렬이 되는 방식

부모 block 요소를 가진 부분에 적용

inline 요소는 그 content의 넓이만큼만 공간을 차지하게 된다.

그 요소에 직접 text-align: center 를 한다면 이미 딱 그 요소의 넓이만큼만 공간을 차지하고

있으니 거기다가 text-align을 적용해도 움직일 공간이 없다. block 요소는 기본적으로 한줄을 다 차지

2. block 요소에 margin: 0 auto 이용한 정렬

이 정렬방법은 정렬대상이 block 요소일 때 쓸 수 있다. 그리고 이 block 요소의 width가 있어야한다.

이미지 같은 경우엔 기본적으로 이미지마다 사이즈가 있으니 img 에 직접 적용할 수 있겠지만,

div 태그 같은 경우엔 width="165" 과 같이 고정된 값이 있어야 합한다.

div의 기본 width는 auto이다.

그래서 div 는 기본적으로 width:100% 즉 부모 width를 다 가지게 되므로 width 를 지정해주지 않는한 좌우 남는 margin 이 없게 된다.

3. 폰트 적용과 스타일시트 분리

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href = "style.css">
    <title>로그인페이지 마크업</title>
</head>
<body>
<div class="login-title">
<div>
    <h1>로그인 페이지</h1>
    <h5>아이디, 비밀번호를 입력해주세요.</h5>
</div>
</div>
    <div class="wrap">
        <div>
            <h3>로그인</h3>
            <p>
                ID = <input type="text" class="">
            </p>
            <p>
                PW = <input type="text" class="">
            </p>
            <button>로그인하기</button>
        </div>
    </div>
        
</body>
</html>

* {
    font-family: 'Noto Serif KR', serif;
}
div {
    color: black;
}

.login-title > div {
    color: white;
    background-size : 16px;
    background-image: url('https://avatars.githubusercontent.com/u/93479286?v=4');
    background-position: center;
    background-size: 300px;
    width: 300px;
    height: 300px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin : auto;
    margin-top: 100px;
}
.wrap {
    width: 300px;
    margin : auto;
}

728x90