Inflearn コミュニティ Q&A

sulbin

投稿した質問数

HTML+CSS+JS ポートフォリオ実践公開(シーズン1)

[Part 03] ログイン画面 UIデザイン (CSSデザイン - ボタンデザインとチェックボックスとLabel)

이미지가 안들어가져요.....

解決済みの質問

作成

1.8K

/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');

body{
        font-family: 'Noto Sans KR' ,sans-serif;
        line-height: 1.5em;
        margin: 0;
        font-weight: 300;
        background-color: #eee;
        font-size: 15px;
}
a{
        text-decoration: none;
        color: #000;
}

.container{}
header{
        border-bottom: 1px solid lightgray;
        background-color: #fff;
        height: 60px;
        text-align: center;
        padding: 13px;
        box-sizing: border-box;
}
section{
        border: 1px solid red;
        height: calc(100vh - 60px);
        position: relative;
}
.login{
        border: 1px solid red;
        width: 360px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
}
.login-type{}
.login-type h1{
        margin: 0;
        font-size: 38px;
        text-align: center;
}
.login-type a{
        border: 1px solid red;
        display: block;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-radius: 3px;
        margin-bottom: 10px;
        font-size: 18px;
        color: #fff;
}

.login-type a:nth-of-type(1){
        background-color: #fff;
        color: #222;
        /* background: url(images/logo-mobile.png); */
        background-image: url(images/logo-mobile.png);
}
.login-type a:nth-of-type(2){
        background-color: #898c9b;
}
.login-type a:nth-of-type(3){
        background-color: #11ce00;
}
.login-type a:nth-of-type(4){
        background-color: #0076fe;
}
.login-type a:nth-of-type(5){
        background-color: #00c026;
}

.login-type span{

}
.login-footer{}

[part3]로그인 화면 UI 디자인(css디자인-버튼 디자인 및 체크박스와 label)에서 문제가 생겼습니다.
동영상 5:14초에 백그라운드 이미지를 넣을 때 이미지가 안들어가네요 ㅠㅠ

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <link rel="icon" href="images/favicon.png">

        <title>밴드 로그인 폼</title>
</head>

<body>
        <div class="container">
                <header>
                        <a href="#none">
                                <img src="images/logo-band.png">
                        </a>
                </header>
                <section>
                        <div class="login">
                                <div class="login-type">
                                        <h1>로그인</h1>
                                        <a class="btn" href="#none">휴대폰 번호로 로그인</a>
                                        <span class="or-text">또는</span>
                                        <a class="btn" href="#none">이메일로 로그인</a>
                                        <a class="btn" href="#none">네이버로 로그인</a>
                                        <a class="btn" href="#none">페이스북으로 로그인</a>
                                        <a class="btn" href="#none">라인으로 로그인</a>
                                </div>
                                <div class="login-footer">
                                        <input type="checkbox">로그인 상태 유지
                                        <p>
                                                밴드가 처음이신가요<a href="#none">회원가입</a>
                                        </p>
                                </div>
                        </div>
                </section>
        </div>
</body>

</html>