on
WEB2 - CSS 14
WEB2 - CSS 14
CSS(C ascading Style Sheets)
CSS 코드의 재사용
- 이제 만들어본 CSS 코드를 다른 페이지에 전파해보자.
2.html에 넣은 CSS코드를 1.html에 갖다 놓고 1.html을 열어보자.
그런데 1.html이 2.html과 동일하게 디자인되지 않는다. 무엇이 문제인지 알아보자.
아톰에서 2.html을 기준으로 Split Right 해서 1.html의 화면을 나란히 놓고 보았다.
태그에서 태그들이 빠져있는 것을 알 수 있다.
그런데 1.html이 2.html과 동일하게 디자인되지 않는다. 무엇이 문제인지 알아보자.
WEB1 - HTML 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; } } WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript -HTML超文本标记语言 超文本标记语言HTML(HyperText Makeup Language)HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 更多>>
다음으로 3.html과 index.html에도 동일하게 CSS태그들을 갖다 놓자. 3.html
WEB1 - JavaScript 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; } } WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript -JavaScript JavaScript即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 更多>> index.html
WEB1 - Welcome 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; } } WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript WEB（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。 更多>> /** * 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); })(); Please enable JavaScript to view the comments powered by Disqus. 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); })();
이렇게 작업을 하고 나니 모든 웹페이지가 일관되게 디자인된 것을 볼 수 있었다.
여기서 상상코딩님은 극단적인 상상을 하도록 요청하셨다.
'작업한 CSS 코드를 여러 개의 페이지에 적용할 때 좀 까다로웠는데 만약 내가 연습한 웹페이지가 4개가 아니러 수억 개라고 한다면 어떨까? 그리고 이 웹페이지들의 디자인을 바꿔야 한다면? 예를 들어 링크들은 링크라는 것을 구분하기 위해 밑줄이 필요하다는 요청을 받았다면?... 직업을 바꿔야 할까? ;;'
라는 생각이 난다고 하십니다...
이런 문제가 일어나는 이유는 작성한 코드 즉, CSS 코드들이 모든 웹페이지에서 중복해서 등장하기 때문이다.
이전 시간에서 말씀하셨던 코드를 잘하기 위해서 필요한 작업
'중복의 제거'
가 필요한 때라는 것.
여기서 다시 한번 '중복의 제거'가 얼마나 중요한지를 배우자.
먼저 style.css라는 새로운 파일을 만들고 여기에
"웹브라우저야, 지금 이 커서가 깜빡거리는 위치에 style.css라는 별도의 파일에 저장된 CSS를 다운로드하여서 여기에 원래 그 코드가 있었던 것처럼 동작해"라고 얘기해주자.
이것이 바로 라고 하는 태그다. 2.html에 적용해주면
이것이 바로 라고 하는 태그다.
WEB1 - CSS WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript -CSS层叠样式表 层叠样式表CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 更多>>
즉 1.html이라는 웹페이지는 style.css 파일과 link(연결)되어있고 웹브라우저는 style.css 파일을 다운로드 받아서 그것을 이 웹페이지에 적용하게 될 것이다'라는 것.
1.html을 리로드 해보면 이전과 변화가 없다.
나머지 3개의 웹페이지에도 동일하게 태그를 적용하자.
이렇게 모든 웹페이지에 적용해보았다. 웹페이지를 열어 보이는 결과는 달라지지 않았다. 똑같이 동작한다.
하지만 내부적으로는 완전히 구현이 달라지면서 훨씬 더 효율적인 상태가 되었다.
어떤 차이가 생겼는지 알아보면
만약 누군가가 이 웹페이지의 모든 링크에 밑줄을 넣어달라고 한다면 이제는 style.css라는 공통적으로 사용되고 있는 파일로 가서 a 선택자의 text-decoration: none; 만 지워주면 되는 폭발적인 효과를 얻게 되었다.
이렇게 얻을 수 있었던 것은 CSS를 막 시작했을 때 선택자를 통해서 얻을 수 있는 '중복의 제거'와 같은 효과를 만나게 되었다.
태그에 style.css라는 코드가 있다면 style.css라는 파일 안에 있는 코드라는 것을 확신할 수 있다. 하지만 다른 웹페이지들의 태그 위치에 CSS 코드가 직접 기술되어 있다면 각각의 파일별로 존재하는 CSS가 실제로 같은지, 안 같은지를 파악하기 무척 어려울 것이다.
그리고 새로운 웹페이지를 만들었을 때, 해당 웹페이지에 태그 한 줄만 추가하면 style.css라는 파일의 내용이 무엇인지 몰라도 해당 파일이 갖는 시각적인 기능을 사용할 수 있게 된다. 즉 재사용성이 높아지고 사용하는 입장에서는 내부적인 코딩의 원리를 몰라도 사용할 수 있게 되니까 사용성도 높아진다.
또한 가지고 있는 웹페이지의 수가 1억 개가 넘는다고 하더라도 이제 style.css 파일 하나만 바꾸면 1억 개 건 10억 개 건 1000억 개 건 동시에 바뀌는 폭발적 효과를 얻게 된 것, 아주 혁명적인 사건
이외에도 코드의 양이 줄었기 때문에 이 웹페이지를 다운로드할 때 인터넷 사용료를 덜 낼 수 있다는 것도 중요한 경제적 효과이다.
style.css을 빼놨다고 해서 이 파일을 다운로드하지 않는 것은 아니다.
개발자 도구, 검사를 들어가서 Network를 들어가 보면 현재 1.html이란 파일을 리로드 했을 때 내부적으로 어떤 파일들을 웹서버에서 다운로드하는지를 보여주는 기능이다.
'하나의 웹페이지에서 다른 여러 가지의 파일을 다운로드하는 것과 그냥 웹페이지 안에서 CSS 코드를 내장하는 것 중 어떤 게 더 네트워크적인 측면에서 더 효율적일까? 더 적은 트래픽을 사용하는 것일까? '
웹페이지 안에 직접 CSS를 놓는 것이 그것 자체로는 더 효율적이다.
그러나 캐싱이라는 것 때문에 그렇지 않게 됐다. (캐싱은 '저장하다'라는 뜻)
즉, 우리가 한 번 style.css라는 파일을 다운로드하였다면 저 파일이 바뀌기 전까지는 style.css란 파일을 이 웹브라우저는 우리의 컴퓨터에다가 저장해 놨다가 그다음에 style.css 파일을 요청하면 저장된 결과를 가져와서 속도를 높일 수 있고 (네트워크를 안 쓰기 때문) 사업자들은 돈을 덜 쓸 수 있는 중요한 효과를 얻게 된다는 것.
바로 캐시를 통해서 이 style.css 파일을 캐싱할 수 있게 되면 결국에는 훨씬 더 빠른 웹페이지를 보여줄 수 있게 되면서 네트워크 트래픽, 다시 말해 사용료를 훨씬 더 적게 낼 수 있다는 굉장히 신기하면서 중요한 효과를 얻을 수 있기 때문에 우리가 가급적 CSS 파일을 만들었다면 이렇게 별도의 파일로 꺼내서 '중복의 제거'를 하는 것이 중요하다.
from http://livebyfaith117.tistory.com/17 by ccl(A) rewrite - 2021-09-11 16:27:20