CSS코딩 - 생활코딩 14 ~ 15강

주제 : CSS

교재 : 생활코딩

 

내용 : 

 

14강 CSS 코드의 재사용

 

1. 지금까지는 2.html파일에서 반응형 디자인이 가능하도록 했지만, index.html / 1.html / 3.html 에서도 모두 반응형 디자인이 가능하도록 하려고 한다. 그런데 style태그를 일일히 복붙해야 해서 불편... 

 

Q. 이처럼 공유하고 있는 양식을 갑자기 수정해야할 때, 어떻게 효율적으로 처리할 수 있을까?

 

A. '중복의 제거'를 통해 가능하다~ 지금부터 찬찬히 설명해주겠다!

1) style.css 라는 파일을 만들어서, 1.html의 style 태그에 속해있는 효과를(style태그는 빼고!) 모두 복붙해주기

 

2)기존 파일의 style 태그를 지워버리고, <link>태그를 이용해  style.css 파일에 저장된 CSS를 다운로드 받아서 기존 파일에서 동작하게 만들기!

-> <link rel="stylesheet" href="style.css"> : 1.html 웹페이지가 style.css라는 파일과 link(연결)되고, 웹브라우저는 그 파일을 다운받아서 이 웹페이지에 적용함.

- 구글링해보니 이 때 rel은 'relation - 관계'로 파일을 연결할 때 현재 파일과 연결할 파일의 관계를 정의한다고 함.

- 또한href는 'hyper reference - 하이퍼 참조'로 현재 파일에서 연결할 파일의 링크를 의미한다.(뒤에 나오는 파일명이 연결대상)

-그래서 link rel="stylesheet" href="style.css" 의 의미는 현재파일에서 연결할 "style.css"파일이 현재파일의 stylesheet(스타일)을 담당함을 의미한다.

스타일 효과 모조리 복붙해서 style.css 파일에 옮기기!

link코드로 style.css와 연결해주자!

 

3) 나머지 index.html / 2.html / 3.html에도 똑같이 적용해주기!

이렇게 하면 뭐가 좋냐구? 웹페이지에 모든 링크에 밑줄을 넣고 싶다? 웹페이지가 공유하는 style.css 파일로 들어가서 a{color:black; text-decoration: none;} <-요것만 지워주면 모든 웹페이지에 효과가 동시적용된다!!!

코드가 없어도

style.css를 통해 이전과 같이 뜬다는거!

4)link태그의 효과

- 이처럼 link태그를 이용해 style.css의 효과를 어떤 파일에도, 동일하게 적용할 수 있다!

- 전체 코드의 양이 줄면서 웹서버가 처리해야 할 데이터양도 줄어들게 된다!! 

- 또한 검사-개발자 도구- 네트워크에 들어가 리로드를 누르면 style.css파일을 다운받는 것을 확인할 수 있다.

Q.하나의 웹페이지에 대해 별도 파일을 두고 다운로드 받는 것 vs 웹페이지 안에 CSS코드를 넣기 중 네트워크 효율이 높은(처리해야 할 트래픽이 적은) 것은?

A.물론 단순히 두 가지를 비교하면  CSS코드를 넣는게 효율적이다. 그러나 캐싱을 통해 훨씬 빠르게 웹페이지를 구현하면서, 네트워크의 트래픽(=사용료)을 줄일 수 있다!

-캐싱은 한 번 style.css 파일을 다운받았다면, 웹 브라우저가 우리의 컴퓨터에 저장해 놨다가, 이후에 style.css 파일을 요청하게 될 때 저장된 결과를 가져와서 속도를 높일 수 있다(저장된 파일이므로 네트워크를 따로 쓰는게 아니기 때문)!!

네트워크에서 style.css파일이 다운된 것을 확인할 수 있다! 근데 다운로드 시간이 19ms라니..(1밀리초는 0.001초라고 한다 - 19초는 0.019초) 대박쓰

* 느낀점

이고잉샘은 중복의 제거를 통해 재사용성을 높이고, 가독성을 높이고, 유지보수를 편리하게 하는 것이 얼마나 중요한지 공감하면 좋겠다고 말씀하신다. 그간 코드를 간결하게 하는 것이 중요하다고 말로만 들었는데, 코드를 간결하게 하는 것이 위의 효과들을 다 포함하고 있기에 그만큼 중요하다는 사실을 알게 되었다! 

 

15강 수업을 마치며

 

지금까지 배운 CSS 개념 중에 가장 중요한 것을 꼽자면?

역시나 선택자와 속성이다! 이고잉샘은 속성을 많이 알게 될수록 더욱 다채로운 표현이, 선택자를 더 많이 알게 될수록 정확한 표현이 가능해진다고 하신다. accurate { effect: colorful; } !! 잊지 말기~(<-주의!물론 이런코드는 없슴니다! ㅎ)