web 4 : html과 css파일 분리하기

디자인에 변경사항이 있을 때마다 html 내의 모든 css(style태그)를 일일이 수정해야하는 번거로움을 해결하기 위해

css부분을 파일로 별도로 빼서 외부에서 관리하는 아이디어를 생각해냈다.

 

css파일을 만들고(예:style.css)  html문서의 head 안에 css의 link 태그를 추가한다.

type은 "text/css"로 지정한다.

link + tap 하고 type 추가하고 css파일의 url을 추가하기

예: <link rel="stylesheet" type="text/css" href="css파일 url">

html 문서 내에 있던 style 태그는 삭제한다

웹 브라우저는 link라는 태그를 만나면 태그에 적혀있는 속성들을 보고
이 사용자가 외부에 있는 css파일을 읽어오라고 하는거구나,
그리고 외부의 css파일은 이 주소에 있구나 라는것을 이해하고
이 주소에 해당되는 파일을 다운받아서 이 웹페이지에 적용하게 된다.

css파일을 외부로 빼서 외부의 css파일을 각각의 html이 로드해서 사용하게 되면
디자인이 바뀌었을때 중앙의 css파일 하나만 수정하면 모든 html 파일에 변화가 일어나게 된다.

각각의 html 파일마다 있던 중복된 css를 하나의 파일로 분리시킴으로써
중복된 내용을 제거하게 되며, 그렇게 중복을 제거하면 유지보수가 쉬워지고

html 파일을 실행할 때 css파일을 한 번 로드하기 때문에 용량도 줄어들고 비용도 절감된다.

중복제거는 it관련 기술의 중요한 key point 이다.