배웠던 css코드를 다른 페이지에도 같이 적용해보자!
1 중복제거의 필요성
style태그를 복사해서 다른 페이지에 붙여 넣었더니
화면이 붙여넣은 페이지에서는 제대로 작동하지 않는다
왜그런지 확인해보자!
split right라는 기능으로 옆에 놓고 비교해봤더니
<div id="grid">
<div id="article">
</div>
</div>
div태그로 감싸져 있는걸 알게되었고 옆의 것과 같이 수정해주게되면 똑같이 동작하는 웹페이지로 수정할수있다!
여기서 극단적인 상황을 예정해보면
웹페이지의 디자인을 바꿔야 하는데 페이지가 100개 이상이라면
모든 웹페이지에 들어가서 수정해야 하는상황이 발생한다
이런문제가 일어나는 이유는 작성한 css코드가 모든 웹페이지에서 중복해서 나타나기 때문이다
중복의 제거가 이때 필요하다
2 link - 중복제거
모든 웹페이지에서 중복되고있는 style태그를 제외한 순수한
css코드만을 복사해서 style.css라는 새로운 파일을 만들어 복사해주었다
원래 파일에서 스타일태그를 지워버리고
style.css라고하는 별도의 파일에 저장된 css를 다운로드받아서
여기에 원래 그 코드가 있었던것처럼 동작해라고 얘기해 주면된다
--> 이게 link라고 하는 태그이다
링크라는 태그를 통해서 웹페이지가 어떤 css파일과 연결되어 있는지를 웹브라우저에 알려줄수있다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html css</title>
<link rel="stylesheet" href="style.css">
이렇게 바꾸어도 원래 결과와 변함이 없게된다
<link rel="stylesheet" href="style.css">
이제 남은건 이 링크를 다른 시트에도 style태그를 없애고 붙여넣어주면 된다
결과는 달라진것이 없지만 내부적으로는 구현이 달라지며 훨씬 효율적인상태가 되었고
이제 누군가가 웹페이지의 모든 링크에 밑줄을 넣으라고하면 이제 style.css라고하는 공통적인 파일로가서 하나만 수정해주면 된다
3 코드재사용의 장점
👍link태그를 이용해 한줄만 추가하게 되면 style.css의 내용이 무엇인지를 몰라도 가지고있는 시각적 기능을 사용할수있다
👍즉, 재사용성이 높아지고 사용하는 입장에서는 내부적인 코딩의 원리를 몰라도 사용할수 있게되니까 사용성도 높아지게 된다
👍그리고 가지고있는 웹페이지의 갯수에 상관없이
style.css라는 파일하나만 바꾸면
동시에 모든 웹페이지를 바꿀수있는 폭발적 효과를 갖는다
