CSS(Cascading Style Sheets)
CSS 코드의 재사용
- 이제 만들어본 CSS 코드를 다른 페이지에 전파해보자.
- 2.html에 넣은 CSS코드를 1.html에 갖다 놓고 1.html을 열어보자.
그런데 1.html이 2.html과 동일하게 디자인되지 않는다. 무엇이 문제인지 알아보자.
- 아톰에서 2.html을 기준으로 Split Right 해서 1.html의 화면을 나란히 놓고 보았다.
<body> 태그에서 <div> 태그들이 빠져있는 것을 알 수 있다.
- 아톰에서 2.html을 기준으로 Split Right 해서 1.html의 화면을 나란히 놓고 보았다.
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
}
a {
color: black;
text-decoration: none;
}
h1 {
font-size:50px;
text-align:center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
#grid ol {
border-right: 1px solid gray;
width:200px;
height: 150px;
margin:0px;
padding: 40px;
padding-bottom: 350px;
}
h3 {
margin:0px;
height:50px;
}
#grid {
display:grid;
grid-template-columns: 200px 1fr;
}
#grid #文章 {
padding-top: 40px;
padding-left: 150px;
}
@media(max-width:800px){
#grid {
display:block;
}
#grid ol{
border-right:none;
padding-bottom:50px;
}
h1{
border-bottom:none;
}
#grid #文章{
padding-left: 40px;
}
}
</style>
</head>
<body>
<h1><a href="index.html" title="WEB1 - Welcome">WEB网络</a></h1>
<div id="grid">
<ol>
<h3>计算机语言-常见语言</h3>
<li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<div id="文章">
<h3>-HTML超文本标记语言</h3>
<p style="margin-top:40px;">
<strong><u>超文本标记语言HTML(HyperText Makeup Language)</u></strong>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
</p>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/tZooW6PritE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<p>
<a href="https://baike.baidu.com/item/%E8%B6%85%E6%96%87%E6%9C%AC/2832422" target="_blank" title="到百科的HTML意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</div>
</div>
</body>
</html>- 다음으로 3.html과 index.html에도 동일하게 CSS태그들을 갖다 놓자.
- 3.html
<!DOCTYPE html> <html> <head> <title>WEB1 - JavaScript</title> <meta charset="utf-8"> <style> body { margin: 0px; } a { color: black; text-decoration: none; } h1 { font-size:50px; text-align:center; border-bottom:1px solid gray; margin:0; padding:20px; } #grid ol { border-right: 1px solid gray; width:200px; height: 150px; margin:0px; padding: 40px; padding-bottom: 350px; } h3 { margin:0px; height:50px; } #grid { display:grid; grid-template-columns: 200px 1fr; } #grid #文章 { padding-top: 40px; padding-left: 150px; } @media(max-width:800px){ #grid { display:block; } #grid ol{ border-right:none; padding-bottom:50px; } h1{ border-bottom:none; } #grid #文章{ padding-left: 40px; } } </style> </head> <body> <h1><a href="index.html" title="到百科">WEB网络</a></h1> <div id="grid"> <ol> <h3>计算机语言-常见语言</h3> <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li> <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li> <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li> </ol> <div id="文章"> <h3>-JavaScript</h3> <p style="margin-top:40px;"> <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 </p> <p> <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a> </p> <img src="coding.jpg" width="50%"> </div> </div> </body> </html> - index.html
<!DOCTYPE html> <html> <head> <title>WEB1 - Welcome</title> <meta charset="utf-8"> <style> body { margin: 0px; } a { color: black; text-decoration: none; } h1 { font-size:50px; text-align:center; border-bottom:1px solid gray; margin:0; padding:20px; } #grid ol { border-right: 1px solid gray; width:200px; height: 150px; margin:0px; padding: 40px; padding-bottom: 350px; } h3 { margin:0px; height:50px; } #grid { display:grid; grid-template-columns: 200px 1fr; } #grid #文章 { padding-top: 40px; padding-left: 150px; } @media(max-width:800px){ #grid { display:block; } #grid ol{ border-right:none; padding-bottom:50px; } h1{ border-bottom:none; } #grid #文章{ padding-left: 40px; } } </style> </head> <body> <h1><a href="index.html" title="WEB1 - Welcome">WEB网络</a></h1> <div id="grid"> <ol> <h2><a href="https://baike.baidu.com/item/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%AF%AD%E8%A8%80/4456504" target="_blank" title="到百科的计算机语言">计算机语言</a>-常见语言</h2> <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li> <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li> <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li> </ol> <div id="文章"> <p style="margin-top:40px;"> <strong><u>WEB（World Wide Web）</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 </p> <p> 网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。 </p> <p> <a href="https://baike.baidu.com/item/web/150564" target="_blank" title="到百科的WEB意义"> <u>更多>></u> </a> </p> <img src="coding.jpg" width="50%"> </div> </div> <p> <div id="disqus_thread"></div> <script> /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */ /* var disqus_config = function () { this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; */ (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://web1-welcome-2.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </p> <!--Start of Tawk.to Script--> <script type="text/javascript"> var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); (function(){ var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; s1.async=true; s1.src='https://embed.tawk.to/60dbf1e07f4b000ac03a40d9/1f9dihm9j'; s1.charset='UTF-8'; s1.setAttribute('crossorigin','*'); s0.parentNode.insertBefore(s1,s0); })(); </script> <!--End of Tawk.to Script--> </body> </html>
- 3.html
이렇게 작업을 하고 나니 모든 웹페이지가 일관되게 디자인된 것을 볼 수 있었다.
여기서 상상코딩님은 극단적인 상상을 하도록 요청하셨다.
'작업한 CSS 코드를 여러 개의 페이지에 적용할 때 좀 까다로웠는데 만약 내가 연습한 웹페이지가 4개가 아니러 수억 개라고 한다면 어떨까? 그리고 이 웹페이지들의 디자인을 바꿔야 한다면? 예를 들어 링크들은 링크라는 것을 구분하기 위해 밑줄이 필요하다는 요청을 받았다면?... 직업을 바꿔야 할까? ;;'
라는 생각이 난다고 하십니다...
이런 문제가 일어나는 이유는 작성한 코드 즉, CSS 코드들이 모든 웹페이지에서 중복해서 등장하기 때문이다.
이전 시간에서 말씀하셨던 코드를 잘하기 위해서 필요한 작업
'중복의 제거'
가 필요한 때라는 것.
여기서 다시 한번 '중복의 제거'가 얼마나 중요한지를 배우자.
- 먼저 style.css라는 새로운 파일을 만들고 여기에 <style> 태그의 내용들만 옮긴다.
<style> 태그는 빼고 CSS 코드만 - 다음으로 웹페이지에서 <style> 태그 전체를 지워버리고 웹브라우저한테 이렇게 얘기할 것이다.
"웹브라우저야, 지금 이 커서가 깜빡거리는 위치에 style.css라는 별도의 파일에 저장된 CSS를 다운로드하여서 여기에 원래 그 코드가 있었던 것처럼 동작해"라고 얘기해주자.
이것이 바로 <link>라고 하는 태그다.- 2.html에 적용해주면
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"
</head>
<body>
<h1><a href="index.html" title="到百科">WEB网络</a></h1>
<div id="grid">
<ol>
<h3>计算机语言-常见语言</h3>
<li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<div id="文章">
<h3>-CSS层叠样式表</h3>
<p style="margin-top:40px;">
<strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
<p>
<a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
</p>
<p>
<img src="coding.jpg" width="40%">
</p>
</div>
</div>
</body>
</html>즉 1.html이라는 웹페이지는 style.css 파일과 link(연결)되어있고 웹브라우저는 style.css 파일을 다운로드 받아서 그것을 이 웹페이지에 적용하게 될 것이다'라는 것.
1.html을 리로드 해보면 이전과 변화가 없다.
- 나머지 3개의 웹페이지에도 동일하게 <link> 태그를 적용하자.
이렇게 모든 웹페이지에 적용해보았다. 웹페이지를 열어 보이는 결과는 달라지지 않았다. 똑같이 동작한다.
하지만 내부적으로는 완전히 구현이 달라지면서 훨씬 더 효율적인 상태가 되었다.
어떤 차이가 생겼는지 알아보면
만약 누군가가 이 웹페이지의 모든 링크에 밑줄을 넣어달라고 한다면 이제는 style.css라는 공통적으로 사용되고 있는 파일로 가서 a 선택자의 text-decoration: none; 만 지워주면 되는 폭발적인 효과를 얻게 되었다.
이렇게 얻을 수 있었던 것은 CSS를 막 시작했을 때 선택자를 통해서 얻을 수 있는 '중복의 제거'와 같은 효과를 만나게 되었다.
<link> 태그에 style.css라는 코드가 있다면 style.css라는 파일 안에 있는 코드라는 것을 확신할 수 있다. 하지만 다른 웹페이지들의 <link>태그 위치에 CSS 코드가 직접 기술되어 있다면 각각의 파일별로 존재하는 CSS가 실제로 같은지, 안 같은지를 파악하기 무척 어려울 것이다.
그리고 새로운 웹페이지를 만들었을 때, 해당 웹페이지에 <link>태그 한 줄만 추가하면 style.css라는 파일의 내용이 무엇인지 몰라도 해당 파일이 갖는 시각적인 기능을 사용할 수 있게 된다. 즉 재사용성이 높아지고 사용하는 입장에서는 내부적인 코딩의 원리를 몰라도 사용할 수 있게 되니까 사용성도 높아진다.
또한 가지고 있는 웹페이지의 수가 1억 개가 넘는다고 하더라도 이제 style.css 파일 하나만 바꾸면 1억 개 건 10억 개 건 1000억 개 건 동시에 바뀌는 폭발적 효과를 얻게 된 것, 아주 혁명적인 사건
이외에도 코드의 양이 줄었기 때문에 이 웹페이지를 다운로드할 때 인터넷 사용료를 덜 낼 수 있다는 것도 중요한 경제적 효과이다.
style.css을 빼놨다고 해서 이 파일을 다운로드하지 않는 것은 아니다.
개발자 도구, 검사를 들어가서 Network를 들어가 보면 현재 1.html이란 파일을 리로드 했을 때 내부적으로 어떤 파일들을 웹서버에서 다운로드하는지를 보여주는 기능이다.
'하나의 웹페이지에서 다른 여러 가지의 파일을 다운로드하는 것과 그냥 웹페이지 안에서 CSS 코드를 내장하는 것 중 어떤 게 더 네트워크적인 측면에서 더 효율적일까? 더 적은 트래픽을 사용하는 것일까? '
웹페이지 안에 직접 CSS를 놓는 것이 그것 자체로는 더 효율적이다.
그러나 캐싱이라는 것 때문에 그렇지 않게 됐다. (캐싱은 '저장하다'라는 뜻)
즉, 우리가 한 번 style.css라는 파일을 다운로드하였다면 저 파일이 바뀌기 전까지는 style.css란 파일을 이 웹브라우저는 우리의 컴퓨터에다가 저장해 놨다가 그다음에 style.css 파일을 요청하면 저장된 결과를 가져와서 속도를 높일 수 있고 (네트워크를 안 쓰기 때문) 사업자들은 돈을 덜 쓸 수 있는 중요한 효과를 얻게 된다는 것.
바로 캐시를 통해서 이 style.css 파일을 캐싱할 수 있게 되면 결국에는 훨씬 더 빠른 웹페이지를 보여줄 수 있게 되면서 네트워크 트래픽, 다시 말해 사용료를 훨씬 더 적게 낼 수 있다는 굉장히 신기하면서 중요한 효과를 얻을 수 있기 때문에 우리가 가급적 CSS 파일을 만들었다면 이렇게 별도의 파일로 꺼내서 '중복의 제거'를 하는 것이 중요하다.
'youtube.com|user|egoing2 > WEB2 - CSS' 카테고리의 다른 글
| WEB2 - CSS 13 (9) | 2021.09.07 |
|---|---|
| WEB2 - CSS 12 (3) | 2021.09.06 |
| WEB2 - CSS 11 (2) | 2021.09.02 |
| WEB2 - CSS 10 (10) | 2021.09.01 |
| WEB2 - CSS 9 (5) | 2021.08.30 |