별도의 CSS 파일을 불러 모든 웹페이지에 동일하게 적용하기

codeConnection 2024. 2. 22.

style.css 만들고 적용 시키기

해당 파일의 CSS를 적용할 문서의 <head> 내에 아래의 코드를 삽입한다.

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

별도의 CSS 파일을 웹에서 로드하여 다운로드하면 효율상 문서에 CSS 포함시키는 것보다 효율이 떨어지지만, 브라우저에서는 캐시를 사용하여 이용자의 PC에 CSS 파일을 저장하고 로드하기 때문에 네트워크 비용 절감과 속도면에서 이익이 크니, 무조건 사용하는 게 좋다.

해당 CSS를 적용시킬 문서의 body에 별도의 class를 선언

<body class="html-page">
</body>

그리고 style.css 문서에서 해당 class에만 CSS를 주면 된다.

.HTML-page .main {
	padding-left: 50px;
	sursor: pinter;
	}