🎈style안 내용물을 파일분리 해보겠다.

<style>
        *{
           font-family: 'Noto Serif KR', serif;
        }
        .mytitle {
            background-color: green;

            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

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

            border-radius: 10px;
            padding-top: 20px;
        }
            .wrap {
                width: 300px;
                margin: auto;
            }

            .mybtn {
                width: 100px;
                margin :auto;
                display: block;
            }

            .red-font {
                color: red;
                font-size: 16px;
            }

    </style>

💨별로 길진 않지만 style안 내용물이 너무 길어졌을때를 대비한 파일 분리를 해보겠다.

💨지금 있는 파일 (frontend)에 new>stylesheet에 mystyle이라는 파일(CSS)을 만든다.
* 부터 아래 }까지 드래그를 한다.
ctrl+x로 잘라내기 해서 mystyle안에 붙인다.

💨01_login.html 파일에서 <style></style>을 없애준다.

💨

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

를 대충 <title> 아래에 붙여넣기 하고

<link rel="stylesheet" type="text/css" href = "mystyle.css">

(css파일이름)에 붙여준 파일이름 mystyle을 넣어준다

💨이름을 붙여주고 "mystyle"을 읽는순간 mystyle.css 에 있는
style안 내용물이 먹혀서가 적용이 된다.