티스토리 뷰

WEBn/WEB2 - CSS

[WEBn] WEB2 - CSS - 코드의 재사용

정짱 정뚱띵 2018.05.02 17:54

[WEBn] WEB2 - CSS


생활코딩 강의를 들었던 것을 정리를 하겠습니다.


이번 시간에는 중복을 제거하고 재사용성을 높이며 유지보수를 효율적으로 하는 방법을 설명하겠습니다.


그리고 이전 다른 .html에도 모두 적용을 하겠습니다.


<!doctype html>

<html>

<head>

  <title>WEB2 - CSS></title>

  <meta charset="utf-8">

  <style>

    body{

      margin: 0;

      border-bottom: 1px solid gray;

    }

    a {

      color: black;

      text-decoration: 

    }

    #active {

      color: red;

    }

    h1 {

      font-size: 45px;

      text-align: center;

      border-bottom: 1px solid gray;

      margin:0;

      padding:20px;

    }

    ol {

      border-right: 1px solid gray;

      width:100px;

      margin: 0;

      padding: 20px;

    }

    #grid{

      display: grid;

      grid-template-columns: 150px 1fr;

    }

    #grid ol{

      padding-left: 32px;

      padding-right: 1px;

    }

    #article h2, p{

      margin-left: 10px;

    }

    @media(max-width:800px){

      #grid{

        display: block;

      }

      ol{

        border-right: none;

      }

      h1{

        border-bottom: none;

      }

    }

  </style>

</head>

<body>

  <h1><a href="index.html">WEB</a></h1>

  <div id="grid">

    <ol>

      <li><a href="1.html" title="HTML이란">HTML</a></li>

      <li><a href="2.html" title="CSS이란" id="active">CSS</a></li>

      <li><a href="3.html" title="JavaScript">JavaScript</a></li>

      <li><a href="Iron man.html" title="아이언맨 슈트 변화">Iron man</a></li>

    </ol>

    <div id="article">

      <h2>CSS이란 무엇인가?</h2>

      <p>

      Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.<br>

      CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.<br>

      CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.<br>

      This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.<br>

      Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.<br>

      </p>

    </div>

  </div>

</body>

</html>


재사용성을 높이기 위해서

새로운 style.css 을 만듭니다.


이후 style 태그 안에 있는 css 부분을 

style.css 안에 붙어 넣어 줍니다.


body{

  margin: 0;

  border-bottom: 1px solid gray;

}

a {

  color: black;

  text-decoration: none;

}

#active {

  color: red;

}

h1 {

  font-size: 45px;

  text-align: center;

  border-bottom: 1px solid gray;

  margin:0;

  padding:20px;

}

ol {

  border-right: 1px solid gray;

  width:100px;

  margin: 0;

  padding: 20px;

}

#grid{

  display: grid;

  grid-template-columns: 150px 1fr;

}

#grid ol{

  padding-left: 32px;

  padding-right: 1px;

}

#article h2, p{

  margin-left: 10px;

}

@media(max-width:800px){

  #grid{

    display: block;

  }

  ol{

    border-right: none;

  }

  h1{

    border-bottom: none;

  }

}


이러한 식으로 만들고 난 후

기존 style 태그를 지워 줍니다.


지워 주게 되면 


<!doctype html>

<html>

<head>

  <title>WEB2 - CSS></title>

  <meta charset="utf-8">

</head>

<body>

  <h1><a href="index.html">WEB</a></h1>

  <div id="grid">

    <ol>

      <li><a href="1.html" title="HTML이란">HTML</a></li>

      <li><a href="2.html" title="CSS이란" id="active">CSS</a></li>

      <li><a href="3.html" title="JavaScript">JavaScript</a></li>

      <li><a href="Iron man.html" title="아이언맨 슈트 변화">Iron man</a></li>

    </ol>

    <div id="article">

      <h2>CSS이란 무엇인가?</h2>

      <p>

      Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.<br>

      CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.<br>

      CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.<br>

      This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.<br>

      Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.<br>

      </p>

    </div>

  </div>

</body>

</html>


이렇게 될 것입니다.


이거를 가지고 style.css 을 가지고 오는 것입니다.


<link rel="stylesheet" href="style.css">


이렇게 head 태그 안에 기존 style 태그가 있던 곳에 적어도 됩니다.

그러게 되면

링크를 걸어 style.css 을 불러오게 됩니다.


<!doctype html>

<html>

<head>

  <title>WEB2 - CSS></title>

  <meta charset="utf-8">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <h1><a href="index.html">WEB</a></h1>

  <div id="grid">

    <ol>

      <li><a href="1.html" title="HTML이란">HTML</a></li>

      <li><a href="2.html" title="CSS이란" id="active">CSS</a></li>

      <li><a href="3.html" title="JavaScript">JavaScript</a></li>

      <li><a href="Iron man.html" title="아이언맨 슈트 변화">Iron man</a></li>

    </ol>

    <div id="article">

      <h2>CSS이란 무엇인가?</h2>

      <p>

      Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.<br>

      CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.<br>

      CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.<br>

      This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.<br>

      Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.<br>

      </p>

    </div>

  </div>

</body>

</html>


최종 이렇게 변경을 하여도 웹 브라우저에서는 달라지는게 없어 보이지만

실제로는 내부적으로는 네트워크를 통해 style.css를 불러오는 동작이 진행 될 것입니다.


적은 트래픽을 사용하고 변경하고 싶은 부분을 style.css에서만 수정을 하면 style.css를 사용하는 모든 곳을

수정을 할 수 있기 때문입니다.


최종적으로는 https://jeongzzang7.github.io/web2-css/ 이러한 결과를 만들었습니다.


코드의 재사용 소개 강의

https://opentutorials.org/course/3086/18327






댓글
공지사항
«   2018/12   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Total
125,206
Today
7