나의 발자취

[CSS]CSS만 정의하는 <link rel="stylesheet" href="style.css"> 본문

Frontend/HTML,CSS, , UI,UX

[CSS]CSS만 정의하는 <link rel="stylesheet" href="style.css">

달모드 2020. 11. 4. 13:54

CSS코드를 각각의 HTML파일에 중복하여 쓰는것을 방지하기 위해 style.css 파일을 따로 사용하는것은 매우 효율적이다. 트래픽에 있어서도 그냥 웹페이지 안에서 css코드를 심어놓는것이 더 효율적이긴 하나, 캐싱때문에 효율적이지 않다. 그보다 style.css파일을 캐싱할 수 있다면 더 효율적이기 때문에 가급적 css파일을 만들었다면 별도로 꺼내서 중복을 제거하는것이 중요하다.

 

style.css

body{
    margin:0;
  }
  a {
    color:black;
  }
  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:33px;
  }
  #grid #article{
    padding-left:25px;
  }
  @media(max-width:800px){
    #grid{
      display: block;
    }
    ol{
      border-right:none;
    }
    h1 {
      border-bottom:none;
    }
  }

2.html

<!doctype html>
<html>
<head>
  <title>WEB - CSS</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
 
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    
        <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.[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>
     

  </body>
  </html>

'Frontend > HTML,CSS, , UI,UX' 카테고리의 다른 글

21-01-06 동아리 웹페이지 구축하기(프론트 팀) 회의 내용  (0) 2021.01.07
201112 블록체인학회 스터디(웹)  (0) 2020.11.12
[HTML/CSS] 반응형 웹 - media 쿼리  (0) 2020.11.04
[CSS] grid 기본 사용법  (0) 2020.11.04
[CSS] CSS box model  (0) 2020.11.04
'Frontend/HTML,CSS, , UI,UX' Related Articles more
Comments