인프런 커뮤니티 질문&답변

tlsdnr1135님의 프로필 이미지

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

[Part 03] 로그인 화면 UI 디자인 (CSS 디자인 - 버튼 디자인 및 체크박스와 Label)

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

해결된 질문

작성

·

1.6K

1

/* 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>

답변 2

1

폴더 구조가 어떻게 되는지 모르겠는데 아마도 아래처럼 되어 있을 것 같아요.

css 폴더 안에 style.css가 있으니까 css 파일 안에서 이미지를 링크할 때는 한수준 위로 올라와야 합니다.

background-image: url(../images/logo-mobile.png);

특별한 경우가 아니면 style.css 파일을 css 폴더에 넣지 말고 그냥 index.html 과 같은 위치에서 하시는게 좋습니다.

 

tlsdnr1135님의 프로필 이미지
tlsdnr1135
질문자

아 그렇네요 ㅠㅠ 생각해보니 html하고 css파일이 위치가 달라서 한번 위로 올라왔어야 했네요!!
근데 나중에 css파일이 많이 생겨도 따로 파일로 안만들고 그냥 html하고 같이 두나요?

css 파일이 많이 생길 때는 css 폴더에 관리하면 되지만 1개 일 때는 그냥 html 하고 같이 드세요

0

tlsdnr1135님의 프로필 이미지
tlsdnr1135
질문자

html에서는  자동으로 경로가 뜨는데
css에서는 경로도 못찾고 이미지가  삽입이 안 되네요ㅜ