반응형
<!doctype html>
<html>
<head>
<title>WEB - html</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<style>
body {
margin : 0px;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom : 1px solid gray;
margin: 0;
padding:20px;
}
ol {
border-right : 1px solid gray;
width : 70px;
margin : 0px;
padding : 30px;
}
#grid {
display : grid;
grid-template-columns: 150px 1fr;
}
#grid ol {
padding-left : 33px;
}
@media (max-width:600px){
#grid {
display : block;
margin : 10px;
}
h1 {
font-size: 30px;
border-bottom:none;
}
ol {
border-right : none;
}
}
</style>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<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>
<div id="article">
<h2>HTML</h2>
<p>
Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web.[2] Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
</p>
</div>
</div>
</body>
</html>1.html 코드였다
이걸 2.html, 3.html에 똑같이 style써야 한다고 생각해보자
그리고 수정할 사항이 생기면 각 코드에 똑같이 수정해야 한다고 생각해보자
너무 중복이 많고 오류가 생길 여지가 많음
그래서 등장한게 css 문서
body {
margin : 0px;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom : 1px solid gray;
margin: 0;
padding:20px;
}
ol {
border-right : 1px solid gray;
width : 70px;
margin : 0px;
padding : 30px;
}
#grid {
display : grid;
grid-template-columns: 150px 1fr;
}
#grid ol {
padding-left : 33px;
}
@media (max-width:600px){
#grid {
display : block;
margin : 10px;
}
h1 {
font-size: 30px;
border-bottom:none;
}
ol {
border-right : none;
}
}style.css 코드다
여기에 style 태그 안에 있던 내용 그대로 복사해왔고
<!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>
<div id="grid">
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div>
<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>
</div>
</div>
</body>
</html>2.html을 이렇게 수정하자
style.css를 적용시킨다는 걸 알 수 있음!!!
매우매우 효율적
<!doctype html>
<html>
<head>
<title>WEB - JavaScript</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">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>JavaScript</h2>
JavaScript (/ˈdʒɑːvəˌskrɪpt/), often abbreviated as JS, is a high-level, dynamic, weakly typed, object-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spectrum fully, and with many engines supporting additional features beyond ECMA.
</div>
</div>
</body>
</html>3.html도 마찬가지
이렇게 되면 만약 웹페이지가 2.html 등 html문서를 구현하기 위해 2.html은 물론이고 style.css도 다운받아야 한다.
그렇게 되면 두 문서나 다운받아야 하니까 네트워크적으로 비효율적이지만
캐시 덕분에 효율성 올릴 수 있고
중복을 제거하기 때문에 css 파일을 사용하는 것이
중요하다.
반응형
'웹 프로그래밍 > CSS' 카테고리의 다른 글
| css에 폰트 적용하는 방법 (0) | 2021.09.29 |
|---|---|
| 생활코딩 css 마무리 (0) | 2021.07.14 |
| 생활코딩 css 반응형 디자인과 미디어 쿼리 소개 (0) | 2021.07.14 |
| 생활코딩 css 그리드2 그리드 써먹기 (0) | 2021.07.14 |
| 생활코딩 css 그리드 (0) | 2021.07.14 |
| 생활코딩 박스모델2 줄긋기 (0) | 2021.07.14 |
| 생활코딩 박스모델 (0) | 2021.07.14 |
| 생활코딩 css 선택자를 스스로 알아내는 방법 (0) | 2021.07.12 |