본문 바로가기
프론트엔드/생활코딩

[생활코딩] CSS 10. 코드 재사용

by cejin 2023. 11. 5.

[생활코딩] CSS 목차
 
 

1. 링크 파일을 이용해서 퍼뜨리기

출처 : 생활코딩

1. style.css 파일 만들기
 
2. style 태그 내부에 있던 코드 옮기기
 
3. html 파일에 링크 태그 추가

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

 
- html 웹페이지가 style.css 파일과 링크(연결)되어있고, 웹브라우저는 css 파일을 다운로드하여 웹페이지에 적용
 
 
 

2. 효과

1. 내부적으로 훨씬 효율적인 상태
2. 재사용성 증가
3. 사용성 증가
4. 한 번에 전부를 바꿀 수 있음 
- style.css에 있는 코드만 변경하면 됨
5. 코드 양 감소로 경제적 효과
6. 캐시 기능 덕분에 네트워크적으로도 효율적
- 빠르게 보여주면서 사용료는 적게 사용
 
 
 

3. 확인

- 개발자 도구에서 [Network] 탭 확인