개발나라 스용공주

[생활코딩] CSS 왕기초 20장 - Visual Studio Code / link로 css 파일 따로 관리하기 본문

WEB/HTML & CSS

[생활코딩] CSS 왕기초 20장 - Visual Studio Code / link로 css 파일 따로 관리하기

스용공주 2024. 7. 2. 03:05
728x90
728x90

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.

(생활코딩)

https://www.youtube.com/watch?v=djBrHjeitUo&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=14

 

 

[ CSS 묶어 관리하기 ]

중복되는 css가 있다면 이것을 묶어 관리하면 나중에 수정하기도 편리해진다.

아래 두개의 페이지 코드가 있다.

이 두 페이지 코드는 모두 동일한 형식으로 내부의 콘텐츠 구성만 다르게 이뤄져 있다.

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <style>
        h1 {
            text-align : center;
            border-bottom : grey solid 2px;
            margin : 0;
            padding : 15px;
        }
        ol {
            border-right : grey solid 2px;
            margin : 10px;
            padding : 15px;
        }
        #div {
            display : grid;
            grid-template-columns: 250px 1fr;
        }
        #con {
            margin-left : 20px;
        }
        @media (max-width : 500px)
        {
            #div{
                display : block;
            }
            ol {
                border-right : none;
                border-bottom : grey solid 2px;
            }
        }
    </style>
</head>
<body>
    <h1>Youtuber</h1>
    <div id = "div">
        <ol>
            <li><a href="index.html">Youtube</a></li>
            <li><a href="2.html">Contents</a></li>
        </ol>
    <div id = "con">
        <h2>Introducing My Youtube</h2>
        <img src="image_01.jpg" width="50%">
        <p>This is <b>my YOUTUBE CHANNEL <a href="https://www.youtube.com/watch?v=1pBoUsMzqZE" target="_blank" title="Thapha Youtube link"><u>'THAPHA'</u></a></b>!<br>
        Your subscription will give me some energy!</p>
    </div>
    </div>
</body>
</html>

 

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <style>
        h1 {
            text-align : center;
            border-bottom : grey solid 2px;
            margin : 0;
            padding : 15px;
        }
        ol {
            border-right : grey solid 2px;
            margin : 10px;
            padding : 15px;
        }
        #div {
            display : grid;
            grid-template-columns: 250px 1fr;
        }
        #con {
            margin-left : 20px;
        }
        @media (max-width : 500px)
        {
            #div{
                display : block;
            }
            ol {
                border-right : none;
                border-bottom : grey solid 2px;
            }
        }
    </style>
</head>
<body>
    <h1>Youtuber</h1>
    <div id = "div">
    <ol>
        <li><a href="index.html" class="green">Youtube</a></li>
        <li><a href="2.html" class="green" id="red">Contents</a></li>
    </ol>
    <div id = "con">
    <h2>Introducing My Youtube Contents</h2>
    <P>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/1pBoUsMzqZE?si=Loif9sowegTarQ6S" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </P>
    <p>Vietnam Danang Vlog -> <a href="https://www.youtube.com/watch?v=1pBoUsMzqZE" title="Danang Vlog">Link</a></p>
</div>
</div>
</body>
</html>

 

 

이 두개의 코드 중 css는 같은 내용이 중복되어 작성되어져 있고 이 부분을 한번에 묶어 관리하면 더 좋다.

 

먼저 style.css 라는 css 파일을 만들어준다.

 

그리고 style.css 안에는 <style>태그를 제외한 부분을 입력해준다.

h1 {
    text-align : center;
    border-bottom : grey solid 2px;
    margin : 0;
    padding : 15px;
}
ol {
    border-right : grey solid 2px;
    margin : 10px;
    padding : 15px;
}
#div {
    display : grid;
    grid-template-columns: 250px 1fr;
}
#con {
    margin-left : 20px;
}
@media (max-width : 500px)
{
    #div{
        display : block;
    }
    ol {
        border-right : none;
        border-bottom : grey solid 2px;
    }
}

 

 

그리고 해당 css가 사용되었던 파일에서 <style> 태그에 해당하는 부분을 삭제해준다.

그리고 아래 코드와 같이 <link rel="stylesheet" href="style.css">를 통해 해당 파일이 style.css 파일을 사용한다는 것을 명시해준다.

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Youtuber</h1>
    <div id = "div">
        <ol>
            <li><a href="index.html">Youtube</a></li>
            <li><a href="2.html">Contents</a></li>
        </ol>
    <div id = "con">
        <h2>Introducing My Youtube</h2>
        <img src="image_01.jpg" width="50%">
        <p>This is <b>my YOUTUBE CHANNEL <a href="https://www.youtube.com/watch?v=1pBoUsMzqZE" target="_blank" title="Thapha Youtube link"><u>'THAPHA'</u></a></b>!<br>
        Your subscription will give me some energy!</p>
    </div>
    </div>
</body>
</html>

 

 

 

 

[ 캐싱 ]

캐싱이란 한번 css 파일과 같은 파일을 저장해두었다면 캐싱으로 인해 웹 브라우저가 한번 다운받은 파일에 대해서 계속 다운받지 않고 다운 받은 것을 계속 이용하는 것이다.

따라서 코드를 위와 같이 css를 분리한 방식으로 작성하여도 한번 다운로드된 css 파일은 계속 남아있기 때문에 다운로드를 계속 하지 않아서 속도가 느려지지 않는다.

 

 

 

 

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[교재] HTML 왕기초 22장 - Visual Studio Code / 폼(form) 양식 만들기  (0) 2024.07.03
[교재] HTML 왕기초 21장 - Visual Studio Code / 표 만들기  (1) 2024.07.03
[생활코딩] CSS 왕기초 19장 - Visual Studio Code / 반응형 웹 디자인 실습  (0) 2024.06.30
[생활코딩] CSS 왕기초 18장 - Visual Studio Code / 반응형 웹 디자인  (0) 2024.06.30
[생활코딩] CSS 왕기초 17장 - Visual Studio Code / 예제 실습 (3)  (0) 2024.06.27
'WEB/HTML & CSS' Related Articles more
Comments