HTML에서 CSS파일을 따로 분리 후의 폰트 적용 시 HTML 화면에 폰트 경로가 문구로 표시되는 문제

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

HTML에서 CSS파일을 따로 분리 후의 폰트 적용 시 HTML 화면에 폰트 경로가 문구로 표시되는 문제

[왕초보] 웹개발 종합반 v0

1주차

이*현

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

안녕하세요.

1주차 CSS 강의 듣는 중 HTML에서 CSS파일을 따로 분리 후의 폰트 적용 시 HTML 화면에 폰트 경로가 문구로 표시되는 문제가 있습니다.

HTML 하나에서 적용 시 문제가 없습니다.

문구로 안나오게 따로 적용하는 방법이 있을까요?

작성한 코드 및 에러 메세지

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="loginUi.css">
    <title>로그인 페이지</title>
</head>

<body>
    <div class="wrap">
        
        <div class="MyTitle">
            <h2>로그인 페이지</h2>
            <h5>비밀번호를 입력해주세요.</h5>
        </div>
        <p>ID: <input type="text" /></p>
        <p>PW: <input type="text" /></p>
        <button>로그인 하기</button>
    </div>

</body>

</html>

CSS 파일

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@100..900&display=swap');
* {
    font-family: "Noto Sans KR", sans-serif;
}

/* 제목 */
.MyTitle {
    width: 300px;
    height: 200px;

    color: rgb(255, 255, 255);
    text-align: center;

    padding-top: 50px;
    border-radius: 9px;

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

/* 로그인 화면 구역 전체 */
.wrap {
    width: 300px;
    margin: 300px auto 0px auto;
}

댓글 알림