＊반짝이는＊이끌림

[생활코딩] WEB2(CSS_07) CSS 코드의 재사용 본문

Computer/Web

[생활코딩] WEB2(CSS_07) CSS 코드의 재사용

2kkeullim 2020. 4. 23. 01:39

* Windows 운영체제 기준으로 작성되었습니다.

* vs code editor를 사용합니다.

 

§ CSS 코드의 재사용 → Click!

 

하나의 웹 사이트에서 모든 웹페이지들에게 동일한 스타일을 주고 싶을 때 중복적으로 코드를 계속 작성하는건 번거로우므로, 코드를 재사용 해 봅시다. 일단 모든 html 파일 들에서 중복되고 있는 CSS 코드들(<style> 태그 제외)을 복사해서 style.css 파일에 붙여넣어 봅시다. 그 후 기존의 html 파일들에서 <style> 태그를 지워주고, <link> 태그를 이용한다면, style.css라는 별도의 파일에 저장된 CSS를 기존의 html들에서 사용할 수 있게 됩니다.

 

* style.css *

h1 { 
    text-align: center;
    font-size: 60px;
    border-bottom:3px black solid;
    padding:20px;
    margin:0px;
}
.list {
    text-decoration: none;
    font-size: 30px;
}
#grid {
    display: grid;
    grid-template-columns: 220px 1fr;
}
#article {
    padding:20px;
}
#grid ol {
    border-right: 3px black solid;
    width:150px;
    margin:0;
    padding-left:50px;
    padding-top: 20px;
}
@media(max-width:800px) {
    h1 {
        font-size: 40px;
        border-bottom:none;
    }
    #grid {
        display: block;
    }
    #grid ol {
        border-right:none;
    }
    .list {
    font-size: 20px;
    }
}

 

* index.html *

<!DOCTYPE html>
<html>
    <head>
        <title>web2 실습용 파일</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>WEB2</h1>
        <div id = "grid">
            <ol>
                <li><a href="1.html" class ="list">HTML</a></li>
                <li><a href="1.html" class ="list">CSS</a></li>
                <li><a href="1.html" class ="list">JavaScript</a></li>
            </ol>
            <div id="article">
                <h2>CSS</h2>
                <p>
                    Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>)
                    is a style sheet language used for describing
                    the presentation of a document written in a markup
                    language.[1] Although most often used to set the
                    visual style of web pages and user interfaces
                    written in HTML and XHTML, the language can be
                    applied to any XML document, including plain XML,
                    SVG and XUL, and is applicable to rendering in
                    speech, or on other media. Along with HTML and
                    JavaScript, CSS is a cornerstone technology used
                    by most websites to create visually engaging
                    webpages, user interfaces for web applications,
                    and user interfaces for many mobile applications.
                </p>
            </div>
        </div>
    </body>
</html>
저작자표시 비영리 변경금지

'Computer > Web' 카테고리의 다른 글

[생활코딩] WEB2 CSS 완강  (0) 2020.04.23
[생활코딩] WEB2(CSS_06) 반응형 디자인과 미디어 쿼리 소개  (0) 2020.04.23
[생활코딩] WEB2(CSS_05) 그리드  (0) 2020.04.22
[생활코딩] WEB2(CSS_04) 박스모델  (0) 2020.04.22
[생활코딩] WEB2(CSS_03) CSS 선택자  (0) 2020.04.21
'Computer/Web' Related Articles more
Comments