CSS - 9. 코드의 재사용(마지막회)

https://opentutorials.org/course/3086/18327

*생활코딩 CSS강의를 따라가고 있습니다

1. html 페이지 하나가 완성되었다. 그런데 나머지는...?

자. 여태까지 이차저차 하여 2.html 페이지를 완성하였다. 하지만 내 홈페이지는 이 하나의 페이지로 이루어진 것이 아니다. 내 홈페이지를 이 디자인 양식으로 만들기 위해서는 앞서 행한 이 많은 작업들을 각 html 파일마다 복붙해서 다시 <div>에다가 아이디를 설정해주고... 또... 이걸 다시 다른 4개의 html에 반복을 해야 한다!!

싫다!

자, 역시 코드를 만드는 사람들을 똑똑하고 현명하기에 이렇게 중복 사용을 막아주는 훌륭한 방법을 마련해 놓았다!

2. CSS파일의 출현 - style.css

style.css라는 파일을 만들어 <style>태그에 있던 내용을 전부 넣어준다. 그리고 html페이지에 <style>태그마저 지우고, 이렇게 명령한다. 

"얘야, 여기에 style.css라는 파일을 불러와서 그게 있는 것처럼 동작해!"

  <link rel="stylesheet" href="style.css">

바로 이렇게, link가 걸려있고, style.css 파일을 참조한다는 뜻이다. 이렇게 하고 저장 후 리로드 하면, 그 긴 코드가 이 짧은 링크 하나로 대체되어 훌륭히 적용된 것을 볼 수 있다.

3. 간단해진 것뿐만 아니라 사후 처리가 쉽다.

단순히 긴 코드가 짧은 한 줄로 바뀌었다는 사실만 기쁜 것이 아니다. 이제 사후 관리도 엄청나게 쉬워진다. style.css파일만 수정하면 수십수천 개의 페이지를 언제든지 단번에 고쳐 통일성을 유지할 수 있게 된다(아니면 수천 개의 html을 한 땀 한 땀 다 수정해야 한다ㅠㅠ)

추가 페이지가 생겼을 때에도 link하나 걸어주면 통일성 있는 디자인이 짜잔- 하고 적용된다! 정말 행복하다!! 

4. 보이는 것이 같다고 해서 동작도 같을까? - css파일 뒤에서 일어나는 일들

이제 새로 만들어진 페이지를 우클릭>검사>네트워크 부분을 열어보자.  웹페이지를 처음 열게 되면 이제 웹에서 다른 사람들 몰래 style.css파일을 다운로드하는 것을 확인할 수 있다. 

쉿 들키면 안 된다

물론 처음 열었을 때는, 이 css파일을 다운로드하기 때문에 약간의 트래픽이 생길 수 있다. 하지만 홈페이지를 열었을 때 최초 한 번 이 파일을 다운로드하면 캐싱이라는 것을 통해서 계속해서 이 css파일을 불러오면 되기 때문에 훨씬 효율적이다! 

5. CSS를 마무리하며

자, 여기까지가 CSS 강의의 끝이자 시작이다. 이걸 다 읽어주신 독자분 감사하고 훌륭한 강의를 제작하여 끝까지 공부하도록 도와주신 이고잉님(생활코딩 저자?)께도 감사하다.

끝났다고 하지만 이제 극히 기초를 알게 되었을 뿐이다. 자 이다음은 어느 것을 시도해볼까? JAVA?

다른 언어? 아니면 CSS를 좀 더 파보아야 할까나...

곧 다른 언어나 심화과정을 들고 찾아뵙도록 하겠다. 그때까지 안녕!